使用jsPDF生成PDF文件

使用两个开源项目,这是他们的地址

jsPDF:https://github.com/MrRio/jsPDF
jsPDF-AutoTable:https://github.com/simonbengtsson/jsPDF-AutoTable

项目引入,我使用的版本是jsPDF(1.5.3)、jsPDF-AutoTable(3.2.4)

<script src="libs/jspdf.debug.js"></script>
<script src="libs/jspdf.plugin.autotable.js"></script>

js设置

//初始化
const doc = new jsPDF();
//设置生成的内容(html:表格的ID)
doc.autoTable({html: '#table'});
//导出
doc.save('table.pdf');

运行

第一次生成的效果,中文乱码

问题

jsPDF默认是不支持中文显示,所以显示的都是一些乱码。我翻阅了很多的一些资料。能找到一些有用的信息。

官网有那么一段说明。

The 14 standard fonts in PDF are limited to the ASCII-codepage. If you want to use UTF-8 you have to to integrate a custom font, which provides the needed glyphs. jsPDF supports .ttf-files. So if you want to have for example chinese text in your pdf, your font has to have the necessary chinese glyphs. So check if your font supports the wanted glyphs or else it will show a blank space instead of the text.

To add the font to jsPDF use our fontconverter in /fontconverter/fontconverter.html . The fontconverter will create a js-file with the content of the provided ttf-file as base64 encoded string and additional code for jsPDF. You just have to add this generated js-File to your project. You are then ready to go to use setFont-method in your code and write your UTF-8 encoded text.

用翻译软件翻译一下,这里不确保翻译的正确性,大致上看懂就行。

PDF中的14种标准字体仅限于ASCII代码页。如果要使用UTF-8,则必须集成自定义字体,该字体提供所需的字形。jsPDF支持.ttf文件。因此,如果您希望在pdf中使用中文文本,则您的字体必须具有必要的中文字形。因此,请检查您的字体是否支持所需的字形,否则它将显示空白而不是文本。

要将字体添加到jsPDF,请在/fontconverter/fontconverter.html中使用我们的fontconverter。fontconverter将创建一个js文件,其中包含提供的ttf文件的内容作为base64编码的字符串和jsPDF的附加代码。您只需将生成的js-File添加到项目中即可。然后,您就可以在代码中使用setFont-method并编写UTF-8编码文本。

这段话能得到几个信息:

  • 如果要使用中文,必须要集成自定义字体(必须是.ttf后缀的文件。我之前一直用win10自带的字体,结果一直有异常。win10的有些字体后缀是.ttc)
  • 使用fontconverter生成字体的js文件,并引入到项目中(clone下jsPDF的项目,项目下/fontconverter/fontconverter.html能把字体文件转成js文件)
  • 设置setFont

现在变成了这样,这里我使用的是微软雅黑字体,你们自行百度下载

<script src="libs/jspdf.debug.js"></script>
<script src="libs/jspdf.plugin.autotable.js"></script>
//重点引入这个自定义字体
<script src="msyh-normal.js"></script>
//初始化
const doc = new jsPDF();
//设置字体
doc.setFont('msyh');
//设置内容
doc.autoTable({html: '#table'});
//导出
doc.save('table.pdf');

第二次运行

第二次生成的效果,和第一次无差别
这和第一次的效果没任何区别。我在别人的博客中找到了解决的方法,下面是地址

https://www.hangge.com/blog/cache/detail_2213.html

重点看这里
引用代码
根据他的提示我修改了js

doc.autoTable({
    html: '#table',
    styles: {
        font: "msyh"
    }
});

第三次运行

第三次生成的效果,标题还存在乱码
可以看到表格的区域已经解决了乱码的问题,但是标题栏还是一样还是乱码。这里我找了另一个人的博客,下面是地址

https://juejin.im/post/5c1bb46a5188252dcb310f9f

重点看这里
引用别人分析的标题栏乱码的问题
他的想法是修改源码以达到效果,但是我并没有这样做,我去了jsPDF-AutoTable官网找了有没有相关可以设置的接口,还真让我找到了,在样式设置一栏中,找到了可以设置fontStyle
在这里插入图片描述
根据上面的提示在js中加入以下代码

doc.autoTable({
    html: '#table',
    styles: {
        font: "msyh",
        //这里设置字体样式
        fontStyle: "normal"
    }
});

最终效果

解决中文乱码

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章