Jspdf 和 jspdf-autotable 中文乱码问题解决

• 问题描述

  1. 项目中的需求：将页面中部分内容导出为PDF（能复制pdf中文字）

  2. 经过分析，决定采用JsPDF在前端进行 pdf 的导出。为了能够复制PDF中的文字，所以不能采用html2canvas方法，而是采用直接生成的方法。

• 在使用JsPDF和jspdf-autoTable的过程中，遇到了以下问题：

  1. JsPDF如何直接添加图片的问题

  2. JsPDF 中文显示乱码的问题

  3. Jspdf-autoTable中文显示乱码的问题

JsPDF直接添加图片的问题

• 针对这个问题，最简单的解决办法就是将待添加的图片转为base64编码，形如：

  data:image/png;base64,iVxxxxxxxxxxx
  

JsPDF和Jspdf-autoTable 中文显示乱码的问题

• 解决方法如下：

1. 去这里下载一个ttf字体文件，或者自己从别处下载（字体文件越小越好）。
2. 去这里将项目clone下来，打开 fontconverter/fontconverter.html，操作如下图
   
3. 将生成的 .js 文件引入项目，vue项目中引用如下图：
   
4. 实例代码如下：

• 生成的字体js文件

import { jsPDF } from "jspdf"
var font = 'AAdfjsklfsl';  # ttf字体文件的base64编码
var callAddFont = function () {
	this.addFileToVFS('chs_song-normal.ttf', font); 
	this.addFont('chs_song-normal.ttf', 'chs_song(# 自定义字体名称)', 'normal');
};
jsPDF.API.events.push(['addFonts', callAddFont])

• Vue中引用代码如下

import JsPDF from 'jspdf'
import 'jspdf-autotable'   # 引入 jspdf-autoTable，也有其他调用方法
import './chs_song-normal' # 引入 ttf字体 js
export default {
 install(Vue, options) {
   Vue.prototype.getPdf = function(id, title) { # 打印pdf的方法，自定义
     const PDF = new JsPDF('', 'pt', 'a4')
     PDF.setFont('chs_song')  #设置自定义字体
     // 天汇图标
     var thImg = 'data:iI='  #base64格式的图片
     PDF.addImage(thImg, 'PNG', 373, 40, 200, 80)
     PDF.setFontSize(14)
     PDF.text(30, 110, '感兴趣区域一')
     PDF.setTextColor(0, 0, 255)
     PDF.text(100, 200, 'https://baidu.com')
     // 表格
     PDF.autoTable({  # autoTable调用 ，font:中修改为自定义字体名称，注意：fontStyle需要与addFont中的类型对应。
       styles: { fillColor: [255, 255, 255], font: 'chs_song', fontStyle: 'normal', textColor: [0, 0, 0], halign: 'center' }, // 表格样式
       theme: 'grid', // 主题
       headStyles: { lineWidth: 1 }, // 表头样式
       startY: 630, // 距离上边距离
       body: [ // 表格体
         { sate: '总体覆盖', full: '84.02' },
         { sate: '2 米级', full: '36.77' },
         { sate: 'GF-1', full: '36.77' }
       ], // tableDate
       columns: [ // 表头
         { header: '卫星', dataKey: 'sate' },
         { header: '覆盖率（%）', dataKey: 'full' }
       ]
     })
     PDF.save(title + '.pdf')
   }
 }
}

PS：大部分中文博客讲的不甚详细，很乱，建议去github issue中查找问题解决方法，附上地址：

1. JsPDF-autoTable Github地址

2. JsPDF-fontConverter Github地址

3. JsPDF 简单文档