jsPDF生成pdf文件和中文编码

jsPDF的简单使用以及中文编码问题的解决

文中js通过CDN引入，若是为了加载时间最好下载至本地。

jsPDF的使用

1. jsPDF简介
   jsPDF 是一个基于 HTML5 的客户端解决方案，用于在客户端JavaScript中生成PDF的库。

   有着方法简单，易于实现的优点。

2. 简单使用
   因为为了页面美观，使用bootstrap进行简单设计，所以要先引入bootstrap相关的css和javascript。
   css:

   javascript:

   html片段:

   
       
   
           
   导出demo
           
   
               
   
               
   
                   
   ID
    
   First
                   
   Last
    
   Handle
               
               
               
   
               
   
                   
   1
    
   Mark
                   
   Otto
    
   @mdo
               
               
   
                   
   2
    
   Jacob
                   
   Thornton
    
   @fat
               
               
   
                   
   3
    
   Larry
                   
   the Bird
    
   @twitter
               
               
           
           导出表格
       
   

   接下来引入jsPDF的相关javascript:

   实现方式:

   function exportPDF() {
       var doc = new jsPDF('p', 'pt');
       //pdf标题设置
       doc.text(20, 20, 'hello world!');
   
       doc.save('导出.pdf');
   }

3. 导出表格
   为了处理相关表格数据，根据jsPDF引入相关javascript:

   简单实现

4. 中文处理
   导出过程中发现中文显示乱码，根据文档发现jsPDF不支持中文，网上资料是使用html2canvas方式转换canva方式，并不是十分灵活。后根据项目jsPDF-CustomFonts-support引入中文字体，解决了导出pdf后中文字体显示乱码的问题。
   这个插件并没有CDN，将项目源码下载到本地，dist文件夹下为相关脚本,font文件夹下为相关字体文件。

   脚本实现

   var doc = new jsPDF('p', 'pt');
   doc.addFont('NotoSansCJKtc-Regular.ttf', 'NotoSansCJKtc', 'normal');
   //pdf标题设置
   doc.setFont('NotoSansCJKtc');
   //pdf标题设置
   doc.text(20, 20, '导出标题');
   //doc.autoTable(columns, data, {});
   // https://github.com/simonbengtsson/jsPDF-AutoTable 主要属性参考
   doc.autoTable(columns, data, {styles: {cellPadding: 0.5, fontSize: 8, font: "NotoSansCJKtc"}});
   
   doc.save('导出.pdf');

5. 最终样式