纯前端文件导出-Excel/PDF

更新于：2020-6-29

导出Excel

Excel 的导出还是比较容易的，不需要引入什么插件，利用JS的原生对象Blob即可实现。
通常情况下，前端导出文件都要伴随着一个请求，将获得json数据，转成可导出的文件，所以需要有一个ajax请求

    
    
    
    


    点我导出Excel
    

Excel导出文件.png

导出PDF

PDF 导出就要麻烦多了，需要引入插件，当下比较流行的有两种：
1. jspdf + jspdf.plugin.autotable
2. jspdf + html2canvas
PS：两种方式用法差不多

方式一（推荐）：jspdf + jspdf.plugin.autotable

    
    
    
    
    
    


    

        

            

                
ID
                
姓名
                
电话
            
        
        

            

                
1001
                
小明
                
880-400-123
            
            

                
1002
                
小红
                
880-400-456
            
        
    
    点我导出PDF
    

PDF导出文件.png

解决中文乱码

导出PDF 中文乱码是是一个很常见的问题，这里就详细说明一下解决办法之——终极方案

在上边的代码中，可以看到除了CDN引入的.js文件，还引入了一个名为msyh-normal.js的本地文件，这就是要引入的字体。

1. 准备好一个中文字体文件（必须是 .ttf 格式）

2. 前往 GitHub (克隆)下载文件，用来生成需要引入的 .js

3. 打开目录下的fontconverter文件夹，并打开里边的 .html文件
   

   jspdf目录.png

4. 选择准备好的字体文件后，点击 Create按钮生成.js文件

选择字体文件.png

PS：如上图，fontName可以不用填写，选择了字体文件后会自动填写

5. 将生成的.js文件引入页面（按照上边的代码做些小设置），即可

方式二 ：jspdf + html2canvas

    
    
    
    
    
    



    点我导出PDF
    

PS：导出文件还有优化空间，今天先到这里，后续会继续更新的~