在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:vxe-table-plugin-export-pdf开源软件地址:https://gitee.com/x-extends/vxe-table-plugin-export-pdf开源软件介绍:vxe-table-plugin-export-pdf基于 vxe-table 的表格插件,支持导出 pdf 格式,基于 jspdf 实现 Installingnpm install xe-utils vxe-table@next vxe-table-plugin-export-pdf@next jspdf // ...import VXETable from 'vxe-table'import VXETablePluginExportPDF from 'vxe-table-plugin-export-pdf'// ...VXETable.use(VXETablePluginExportPDF) Options
Font这里使用开源的 思源黑体
// ...import VXETablePluginExportPDF from 'vxe-table-plugin-export-pdf'// ...VXETablePluginExportPDF.setup({ // Set default font fontName: 'SourceHanSans-Normal', // Font maps fonts: [ { // Font name fontName: 'SourceHanSans-Normal', // Font library url fontUrl: 'https://cdn.jsdelivr.net/npm/vxe-table-plugin-export-pdf/fonts/source-han-sans-normal.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({ filename: 'MyExport', type: 'pdf', fontName: 'SourceHanSans-Normal' // Set font }) } }} LicenseMIT © 2019-present, Xu Liangzhan |
请发表评论