jquery如何实现PDF预览 jquery pdf插件

这篇文章可能会比较乱，改的别人的文章、做好先看演示代码（最下面）： 先把代码拉下来，再看文章比较清楚；

前言

• 最近在整一个前端的一个测试工具，使用Express+Nodejs实现后台功能。为了能够实现前端表格的导出功能，各种尝试发现tableExport是一个很不错的插件。因此最后选择了hhurz的JQuery Plugin来实现表格的导出功能。
• 可以从下面的地址下载TableExport插件；该插件可以将Html的表格导出成为 JSON, XML, CSV, TSV, TXT, SQL, Word, Excel, PNG and PDF格式，支持的导出格式还是挺多的，基本能满足自己的需求。
• 因为github上作者给出的插件的使用描述已经很详细了，我就不在这里赘述很多重复的东西了（具体怎么使用该插件，还请麻烦移步tableExport的git上）。简述：我们可以通过下载插件，然后放到自己的工程路径下，使用’script’标签做路径引用能够很好实现Json、XML、CSV、TSV、TXT、SQL、Word、Excel格式的导出。
• 该插件pdf格式的导出有一些中文问题，现在已经解决，但是PNG格式的导出测试在火狐浏览器中会显示图片不全的问题，在360浏览器中正常使用，而在微软自带浏览器中所有导出功能都不能正常使用，其他浏览器没有测试，看来该插件的使用和浏览器的内核有很大关系。
• 下面给出我使用过程中遇到的问题及一些尝试解决的方法,同时会在最后附上纯表格导出的代码链接，以tableExport为例子做一个demo，希望达到这样的目的：想要实现前端表格的导出功能的小伙伴能够在这个博客得到需要的，因为自己在tableExport这个插件上耗费了整整2天的时间，希望其他小伙伴使用的过程中能够更快实现自己的需求。 

tableExport插件  https://github.com/hhurz/tableExport.jquery.plugin

---

遇到的问题及解决

• 主要遇到的问题是pdf的中文问题。
  因为该插件pdf格式的导出使用了jspdf，而jspdf不支持中文的导出，通过查看tableTable.js关于pdf导出代码，发现还可以使用pdfmake来实现pdf的导出。而该插件中并未包含pdfmake的js相关代码，因此首先下载了pdfmake并引用到工程中。pdfmake是纯js，有很强大的排版功能。下面是pdfmake的git地址

pdfMake git地址： https://github.com/bpampuch/pdfmake

• pdfmake 的字体vfs_fonts.js不支持中文，可以通过自定义字体来实现中文的pdf导出，下面是关于自定义pdfmake字体的方法：

自定义字体方法：https://github.com/bpampuch/pdfmake/wiki/Custom-Fonts—client-side

附：pdfmake的使用： 

• 我在网上找到了现成的编译好字体的pdfmake(下载耗费了我5个积分，还好资源很好用，耶！)：

亲测解决了pdf中文显示问题： 
这是 js 导出 中文pdf 解决方法：http://www.jb51.net/article/88397.htm

使用TableExport实现前端表格的pdf中文导出

！！！我是干货！！！

1. 首先将下载的tableExport目录拷贝到工程的目录下，并重命名“tableExport.jquery.plugin-master”为“tableExport”，同时将“pdfmake-master”目录下的build目录拷贝到“tableExport”目录下，并重命名为“pdfMake”；
2. 将已经生成的微软雅黑的字体文件”vfs_fonts.js”，替换pdfMake目录中的“vfs_fonts.js”。
3. 修改tableExport目录下的tableExport.js文件，将类型为pdf的判断下的代码替换：

从github上拉的最新的https://github.com/hhurz/tableExport.jquery.plugin 项目，主要修改tableExport.js文件的两个地方：

 

第一个地方：

onCellData:          null,
      onCellHtmlData:      null,
      onIgnoreRow:         null,        // onIgnoreRow($tr, rowIndex): function should return true to not export a row
      outputMode:          'file',      // 'file', 'string', 'base64' or 'window' (experimental)


      //原代码
     /* pdfmake: {
        enabled:           false,       // true: use pdfmake instead of jspdf and jspdf-autotable (experimental)
        docDefinition: {
          pageOrientation: 'portrait',  // 'portrait' or 'landscape'
          defaultStyle: {
            font:          'Roboto'     // Default is 'Roboto', for arabic font set this option to 'Mirza' and include mirza_fonts.js
          }
        },
        fonts: {}
      },*/




        //----修改后代码-------
       pdfmake: {
       enabled:           false,       // true: use pdfmake instead of jspdf and jspdf-autotable (experimental)
       docDefinition: {
         pageOrientation: 'portrait',  // 'portrait' or 'landscape'
         defaultStyle: {
           font:          '微软雅黑'     // Default is 'Roboto', for arabic font set this option to 'Mirza' and include mirza_fonts.js
         }
       },
       fonts: {}
     },

      /*-------end-----------*/



      preserve: {
        leadingWS:         false,       // preserve leading white spaces
        trailingWS:        false        // preserve trailing white spaces
      },

第二个地方：

$.extend(true, docDefinition, defaults.pdfmake.docDefinition);

        /*//原代码
        pdfMake.fonts = {
          Roboto: {
            normal:      'Roboto-Regular.ttf',
            bold:        'Roboto-Medium.ttf',
            italics:     'Roboto-Italic.ttf',
            bolditalics: 'Roboto-MediumItalic.ttf'
          }
        };
        */

          //------修改后代码------
          pdfMake.fonts = {
            Roboto: {
              normal:      'Roboto-Regular.ttf',
              bold:        'Roboto-Medium.ttf',
              italics:     'Roboto-Italic.ttf',
              bolditalics: 'Roboto-MediumItalic.ttf'
            },
            微软雅黑: {
                normal: 'msyh.ttf',
                bold: 'msyhbd.ttf',
                italics: 'msyh.ttf',
                bolditalics: 'msyhbd.ttf'
            }
          };

          /*-----修改后代码end-----*/


        $.extend(true, pdfMake.fonts, defaults.pdfmake.fonts);

4.最后将引用：tableExport.min.js修改成tableExport.js

<script type="text/javascript" src="./tableExport/tableExport.js"></script>

---

效果

---

总结

• png格式的导出在火狐浏览器显示不全，360浏览器显示正常。其他浏览器没有测试
• hhurz的tableExport.jquery.plugin插件支持前端表格导出格式多样，非常好用。
• 其他格式导出的使用还请下载链接，这里不再说明。
• 最后非常感谢这些博主博客对我的帮助：

http://godlewis.iteye.com/blog/2335834 
http://www.jb51.net/article/88397.htm 

测试代码（最后的干货）

这个demo是代码： 是原创人写的（亲测可以使用）

Demo： 
pdfMake自定义字体文件： 

 我把我写的一个简单把table导出pdf的代码，想用的同学可以扩充、补充：

github地址：https://github.com/Ta0hua/myTableExportTest

效果图：

导出后：