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

最新推荐文章于 2024-08-08 07:22:23 发布

zhe是我呀

最新推荐文章于 2024-08-08 07:22:23 发布

阅读量3.7k

点赞数 5

分类专栏：前端文章标签： jspdf jspdf-autotable jspdf中文乱码 autotable中文乱码导出pdf

本文链接：https://blog.csdn.net/zhangzhe_0305/article/details/108245016

版权

问题描述
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 中文显示乱码的问题

解决方法如下：

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

生成的字体js文件

import {
    jsPDF } from "jspdf"
var font = 'AAdfjsklfsl';  # ttf字体文件的base64编码
var callAddFont = function () {
   
	this.addFileToVFS('chs_song-normal.ttf', font)