Score
0
Watch 6 Star 20 Fork 3

XE / vxe-table-plugin-export-pdfTypeScriptMIT

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
基于 vxe-table 表格的增强插件,支持导出 pdf 格式 spread retract

Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

vxe-table-plugin-export-pdf

gitee star npm version npm downloads gzip size: JS npm license

基于 vxe-table 表格的增强插件,支持导出 pdf 格式

Installing

npm install xe-utils vxe-table vxe-table-plugin-export-pdf jspdf
// ...
import VXETablePluginExportPDF from 'vxe-table-plugin-export-pdf'
// ...

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
// ...
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-table-column type="index" width="60"></vxe-table-column>
  <vxe-table-column field="name" title="Name"></vxe-table-column>
  <vxe-table-column field="age" title="Age"></vxe-table-column>
  <vxe-table-column field="date" title="Date"></vxe-table-column>
</vxe-table>
export default {
  data () {
    return {
      tableData: [
        {
          id: 100,
          name: 'test',
          age: 26,
          date: null
        }
      ]
    }
  },
  methods: {
    exportEvent() {
      this.$refs.xTable.exportData({
        filename: 'MyExport',
        type: 'pdf',
        fontName: 'SourceHanSans-Normal' // Set font
      })
    }
  }
}

License

MIT © 2019-present, Xu Liangzhan

Comments ( 0 )

Sign in for post a comment

TypeScript
1
https://gitee.com/x-extends/vxe-table-plugin-export-pdf.git
git@gitee.com:x-extends/vxe-table-plugin-export-pdf.git
x-extends
vxe-table-plugin-export-pdf
vxe-table-plugin-export-pdf
master

Search