update

Author: xuliangzhan

README.md

@@ -22,12 +22,25 @@ import VXETablePluginExportPDF from 'vxe-table-plugin-export-pdf'
 VXETable.use(VXETablePluginExportPDF)
 ```
 
+## Font
+
+```javascript
+// ...
+import VXETablePluginExportPDF from 'vxe-table-plugin-export-pdf'
+// ...
+
+VXETablePluginExportPDF.setup({
+  fontName: 'SourceHanSans-Bold', // 指定字体
+  fontUrl: 'https://cdn.jsdelivr.net/npm/vxe-table-plugin-export-pdf/fonts/source-han-sans-bold.js' // 字体库下载路径，可以将包下载放到自己服务器中
+})
+```
+
 ## Demo
 
 ```html
 <vxe-toolbar>
   <template v-slot:buttons>
-    <vxe-button @click="exportEvent">export.pdf</vxe-button>
+    <vxe-button @click="exportEvent">MyExport.pdf</vxe-button>
   </template>
 </vxe-toolbar>
 
@@ -60,7 +73,7 @@ export default {
   methods: {
     exportEvent() {
       this.$refs.xTable.exportData({
-        filename: 'export',
+        filename: 'MyExport',
         type: 'pdf'
       })
     }

dist/index.common.js

@@ -25,6 +25,10 @@
   /* eslint-disable no-unused-vars */
 
   /* eslint-enable no-unused-vars */
+  var isWin = typeof window !== 'undefined';
+  var globalOptions = {};
+  var globalFonts = {};
+
   var _vxetable;
 
   function getFooterCellValue($table, opts, rows, column) {
@@ -35,9 +39,13 @@
 
   function exportPDF(params) {
     var colWidth = 0;
+    var msgKey = 'pdf';
+    var fontName = globalOptions.fontName,
+        fontUrl = globalOptions.fontUrl;
     var options = params.options,
         columns = params.columns,
         datas = params.datas;
+    var showMsg = options.message !== false;
     var $table = params.$table;
     var treeConfig = $table.treeConfig,
         treeOpts = $table.treeOpts;
@@ -46,7 +54,6 @@
         isHeader = options.isHeader,
         isFooter = options.isFooter,
         original = options.original,
-        message = options.message,
         footerFilterMethod = options.footerFilterMethod;
     var footList = [];
     var headers = columns.map(function (column) {
@@ -88,27 +95,76 @@
         });
         footList.push(item);
       });
-    } // 转换pdf
+    }
 
-    /* eslint-disable new-cap */
+    var exportMethod = function exportMethod() {
+      /* eslint-disable new-cap */
+      var doc = new _jspdf["default"]({
+        putOnlyUsedFonts: true,
+        orientation: 'landscape'
+      });
 
+      if (fontName && fontUrl) {
+        doc.addFont(fontName + '.ttf', fontName, 'normal');
+        doc.setFont(fontName, 'normal');
+      }
 
-    var doc = new _jspdf["default"]({
-      putOnlyUsedFonts: true,
-      orientation: 'landscape'
-    });
-    doc.table(1, 1, rowList.concat(footList), headers, {
-      printHeaders: isHeader,
-      autoSize: false
-    });
-    doc.save("".concat(filename, ".").concat(type));
+      doc.table(1, 1, rowList.concat(footList), headers, {
+        printHeaders: isHeader,
+        autoSize: false
+      });
+      doc.save("".concat(filename, ".").concat(type));
 
-    if (message !== false) {
+      if (showMsg) {
+        _vxetable.modal.close(msgKey);
+
+        _vxetable.modal.message({
+          message: _vxetable.t('vxe.table.expSuccess'),
+          status: 'success'
+        });
+      }
+    };
+
+    if (showMsg) {
       _vxetable.modal.message({
-        message: _vxetable.t('vxe.table.expSuccess'),
-        status: 'success'
+        id: msgKey,
+        message: _vxetable.t('vxe.table.expLoading'),
+        status: 'loading',
+        duration: -1
       });
+    } // 转换pdf
+
+
+    checkFont().then(function () {
+      if (showMsg) {
+        setTimeout(exportMethod, 1000);
+      } else {
+        exportMethod();
+      }
+    });
+  }
+
+  function checkFont() {
+    var fontName = globalOptions.fontName,
+        fontUrl = globalOptions.fontUrl;
+
+    if (fontName && fontUrl) {
+      if (!globalFonts[fontName]) {
+        globalFonts[fontName] = new Promise(function (resolve, reject) {
+          var fontScript = document.createElement('script');
+          fontScript.src = fontUrl;
+          fontScript.type = 'text/javascript';
+          fontScript.onload = resolve;
+          fontScript.onerror = reject;
+          document.body.appendChild(fontScript);
+        });
+        return globalFonts[fontName];
+      }
     }
+
+    return new Promise(function (resolve) {
+      return setTimeout(resolve, 1000);
+    });
   }
 
   function handleExportEvent(params) {
@@ -117,13 +173,30 @@
       return false;
     }
   }
+
+  function setup(options) {
+    var _Object$assign = Object.assign(globalOptions, options),
+        fontName = _Object$assign.fontName,
+        fontUrl = _Object$assign.fontUrl;
+
+    if (fontName) {
+      if (!fontUrl) {
+        throw new Error('The fontUrl cannot be empty.');
+      }
+
+      if (isWin && !window.jsPDF) {
+        window.jsPDF = _jspdf["default"];
+      }
+    }
+  }
   /**
    * 基于 vxe-table 表格的增强插件，支持导出 pdf 格式
    */
 
 
   var VXETablePluginExportPDF = {
-    install: function install(xtable) {
+    setup: setup,
+    install: function install(xtable, options) {
       var interceptor = xtable.interceptor;
       _vxetable = xtable;
       Object.assign(xtable.types, {
@@ -132,11 +205,15 @@
       interceptor.mixin({
         'event.export': handleExportEvent
       });
+
+      if (options) {
+        setup(options);
+      }
     }
   };
   _exports.VXETablePluginExportPDF = VXETablePluginExportPDF;
 
-  if (typeof window !== 'undefined' && window.VXETable) {
+  if (isWin && window.VXETable) {
     window.VXETable.use(VXETablePluginExportPDF);
   }
 

dist/index.js

@@ -1,8 +1,10 @@
 declare module 'jspdf' {
   export class jsPDF {
     constructor(options: any)
+    addFont(postScriptName: string, id: string, fontStyle: string, encoding?: any): any;
+    setFont(fontName: string, fontStyle: string): any;
     table(x: number, y: number, row: any[], headers: any[], options?: any): any;
     save(filename: string): any;
   }
   export default jsPDF
-}
+}

dist/index.min.js

@@ -10,6 +10,9 @@ import {
 import jsPDF from 'jspdf'
 /* eslint-enable no-unused-vars */
 
+const isWin = typeof window !== 'undefined'
+const globalOptions: VXETablePluginExportPDFOptions = {}
+const globalFonts: { [key: string]: any } = {}
 let _vxetable: typeof VXETable
 
 function getFooterCellValue ($table: Table, opts: ExportOptons, rows: any[], column: ColumnConfig) {
@@ -19,10 +22,13 @@ function getFooterCellValue ($table: Table, opts: ExportOptons, rows: any[], col
 
 function exportPDF (params: InterceptorExportParams) {
   let colWidth = 0
+  const msgKey = 'pdf'
+  const { fontName, fontUrl } = globalOptions
   const { options, columns, datas } = params
+  const showMsg = options.message !== false
   const $table: any = params.$table
   const { treeConfig, treeOpts } = $table
-  const { type, filename, isHeader, isFooter, original, message, footerFilterMethod } = options
+  const { type, filename, isHeader, isFooter, original, footerFilterMethod } = options
   const footList: { [key: string]: any }[] = []
   const headers: { [key: string]: any }[] = columns.map((column) => {
     const title = XEUtils.toString(original ? column.property : column.getTitle()) || ' '
@@ -60,14 +66,49 @@ function exportPDF (params: InterceptorExportParams) {
       footList.push(item)
     })
   }
+  const exportMethod = () => {
+    /* eslint-disable new-cap */
+    const doc = new jsPDF({ putOnlyUsedFonts: true, orientation: 'landscape' })
+    if (fontName && fontUrl) {
+      doc.addFont(fontName + '.ttf', fontName, 'normal')
+      doc.setFont(fontName, 'normal')
+    }
+    doc.table(1, 1, rowList.concat(footList), headers, { printHeaders: isHeader, autoSize: false })
+    doc.save(`${filename}.${type}`)
+    if (showMsg) {
+      _vxetable.modal.close(msgKey)
+      _vxetable.modal.message({ message: _vxetable.t('vxe.table.expSuccess'), status: 'success' })
+    }
+  }
+  if (showMsg) {
+    _vxetable.modal.message({ id: msgKey, message: _vxetable.t('vxe.table.expLoading'), status: 'loading', duration: -1 })
+  }
   // 转换pdf
-  /* eslint-disable new-cap */
-  const doc = new jsPDF({ putOnlyUsedFonts: true, orientation: 'landscape' })
-  doc.table(1, 1, rowList.concat(footList), headers, { printHeaders: isHeader, autoSize: false })
-  doc.save(`${filename}.${type}`)
-  if (message !== false) {
-    _vxetable.modal.message({ message: _vxetable.t('vxe.table.expSuccess'), status: 'success' })
+  checkFont().then(() => {
+    if (showMsg) {
+      setTimeout(exportMethod, 1000)
+    } else {
+      exportMethod()
+    }
+  })
+}
+
+function checkFont () {
+  const { fontName, fontUrl } = globalOptions
+  if (fontName && fontUrl) {
+    if (!globalFonts[fontName]) {
+      globalFonts[fontName] = new Promise((resolve, reject) => {
+        const fontScript = document.createElement('script')
+        fontScript.src = fontUrl
+        fontScript.type = 'text/javascript'
+        fontScript.onload = resolve
+        fontScript.onerror = reject
+        document.body.appendChild(fontScript)
+      })
+      return globalFonts[fontName]
+    }
   }
+  return new Promise(resolve => setTimeout(resolve, 1000))
 }
 
 function handleExportEvent (params: InterceptorExportParams) {
@@ -77,21 +118,48 @@ function handleExportEvent (params: InterceptorExportParams) {
   }
 }
 
+interface VXETablePluginExportPDFOptions {
+  fontName?: 'SourceHanSans-Bold';
+  fontUrl?: string;
+}
+
+function setup (options: VXETablePluginExportPDFOptions) {
+  const { fontName, fontUrl } = Object.assign(globalOptions, options)
+  if (fontName) {
+    if (!fontUrl) {
+      throw new Error('The fontUrl cannot be empty.')
+    }
+    if (isWin && !window.jsPDF) {
+      window.jsPDF = jsPDF
+    }
+  }
+}
+
+declare global {
+  interface Window {
+    jsPDF: any;
+  }
+}
+
 /**
  * 基于 vxe-table 表格的增强插件，支持导出 pdf 格式
  */
 export const VXETablePluginExportPDF = {
-  install (xtable: typeof VXETable) {
+  setup,
+  install (xtable: typeof VXETable, options?: VXETablePluginExportPDFOptions) {
     const { interceptor } = xtable
     _vxetable = xtable
     Object.assign(xtable.types, { pdf: 0 })
     interceptor.mixin({
       'event.export': handleExportEvent
     })
+    if (options) {
+      setup(options)
+    }
   }
 }
 
-if (typeof window !== 'undefined' && window.VXETable) {
+if (isWin && window.VXETable) {
   window.VXETable.use(VXETablePluginExportPDF)
 }
 

fonts/source-han-sans-bold.js

@@ -1,11 +1,12 @@
 {
   "name": "vxe-table-plugin-export-pdf",
-  "version": "1.3.3",
+  "version": "1.4.2",
   "description": "基于 vxe-table 表格的增强插件，支持导出 pdf 格式",
   "scripts": {
     "lib": "gulp build"
   },
   "files": [
+    "fonts",
     "dist",
     "*.ts",
     "*.d.ts"