使用两个开源项目，这是他们的地址
项目引入，我使用的版本是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
doc.autoTable({
html: '#table', styles: {
font: "msyh" } }); 第三次运行
可以看到表格的区域已经解决了乱码的问题，但是标题栏还是一样还是乱码。这里我找了另一个人的博客，下面是地址
https://juejin.im/post/5c1bb46adcb310f9f
doc.autoTable({
html: '#table', styles: {
font: "msyh", //这里设置字体样式 fontStyle: "normal" } }); 最终效果
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/228668.html原文链接：https://javaforall.net
