vxe-table-plugin-export-pdf
v4.0.1
Published
基于 vxe-table 表格的扩展插件,支持导出 pdf 格式
Downloads
406
Maintainers
Keywords
Readme
vxe-table-plugin-export-pdf
基于 vxe-table 的表格插件,支持导出 pdf 格式,基于 jspdf 实现
Compatibility
对应 vxe-table v4 版本
Installing
npm install vxe-table@next vxe-table-plugin-export-pdf@next jspdf
// ...
import VXETable from 'vxe-table'
import VXETablePluginExportPDF from 'vxe-table-plugin-export-pdf'
import { jsPDF } from 'jspdf'
// ...
// 方式1:NPM 安装,注入 jsPDF 对象
VXETable.use(VXETablePluginExportPDF, {
jsPDF
})
// 方式2:CDN 安装,只要确保 window.jsPDF 存在即可
// VXETable.use(VXETablePluginExportPDF)
Options
| 属性 | 类型 | 描述 | 默认值 | |------|------|------|------| | fontName | String | 设置默认的字体 | | | fonts | Array<{fontName, fontUrl}> | 字体映射配置 | | | beforeMethod | Function({ $pdf, options, columns, datas }) | 导出之前触发回调,可以自行设置字体等相关样式 | |
Font
这里使用开源的 思源黑体
| 字体名称 | 文件名 | |------|------| | SourceHanSans-ExtraLight | source-han-sans-extralight.js | | SourceHanSans-Light | source-han-sans-light.js | | SourceHanSans-Normal | source-han-sans-normal.js | | SourceHanSans-Regular | source-han-sans-regular.js | | SourceHanSans-Medium | source-han-sans-medium.js | | SourceHanSans-Bold | source-han-sans-bold.js | | SourceHanSans-Heavy | source-han-sans-heavy.js |
Demo
<vxe-toolbar>
<template v-slot:buttons>
<vxe-button @click="exportEvent">MyExport.pdf</vxe-button>
</template>
</vxe-toolbar>
<vxe-table
ref="xTable"
height="600"
:data="tableData">
<vxe-column type="seq" width="60"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="age" title="Age"></vxe-column>
<vxe-column field="date" title="Date"></vxe-column>
</vxe-table>
export default {
data () {
return {
tableData: [
{ id: 100, name: 'test', age: 26, date: null },
{ id: 101, name: 'test1', age: 30, date: null },
{ id: 102, name: 'test2', age: 34, date: null }
]
}
},
methods: {
exportEvent() {
this.$refs.xTable.exportData({
// fontName: 'SourceHanSans-Normal', // Set the font, default first
filename: 'MyExport',
type: 'pdf'
})
}
}
}
License
MIT © 2019-present, Xu Liangzhan