资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

JS PDF中文乱码解决方案：使用支持中文的字体、设置正确编码及第三方库

创作时间:

作者:

@小白创作中心

JS PDF中文乱码解决方案：使用支持中文的字体、设置正确编码及第三方库

引用

来源

https://docs.pingcode.com/baike/3685038

JS PDF出现中文乱码的解决方案：使用支持中文的字体、设置正确的编码、利用第三方库（如pdfmake或jspdf）。其中，使用支持中文的字体是最为关键的一步，因为默认的字体通常不包含中文字符。

一、使用支持中文的字体

在生成PDF文件时，如果使用的字体不支持中文字符，那么就会导致中文字符无法正常显示，出现乱码。因此，解决中文乱码问题的首要任务是使用支持中文的字体。以下是详细步骤：

1.1 具体操作步骤

pdfmake库

pdfmake是一个非常流行的生成PDF文件的JavaScript库。使用pdfmake可以方便地加载中文字体并生成支持中文的PDF文件。

加载中文字体：

var fonts = {
    Roboto: {  
        normal: 'Roboto-Regular.ttf',  
        bold: 'Roboto-Medium.ttf',  
        italics: 'Roboto-Italic.ttf',  
        bolditalics: 'Roboto-Italic.ttf'  
    },  
    SimSun: {  
        normal: 'SimSun.ttf',  
        bold: 'SimSun.ttf',  
        italics: 'SimSun.ttf',  
        bolditalics: 'SimSun.ttf'  
    }  
};

生成PDF文件：

var docDefinition = {
    content: [  
        { text: '你好，世界！', font: 'SimSun' }  
    ]  
};  
pdfMake.createPdf(docDefinition).download('example.pdf');

jsPDF库

jsPDF是另一个常用的生成PDF文件的JavaScript库。使用jsPDF同样需要加载支持中文的字体文件。

加载中文字体：

var doc = new jsPDF();
doc.addFileToVFS("SimSun.ttf", fontData);  
doc.addFont("SimSun.ttf", "SimSun", "normal");  
doc.setFont("SimSun");

生成PDF文件：

doc.text("你好，世界！", 10, 10);
doc.save("example.pdf");

二、设置正确的编码

除了使用支持中文的字体外，确保文本的编码方式正确也是解决中文乱码问题的关键。常见的编码方式包括UTF-8和GB2312。以下是一些具体操作步骤：

2.1 设置UTF-8编码

大多数现代的应用程序和库都默认使用UTF-8编码，因此通常不需要额外设置。如果需要明确指定编码，可以在生成PDF时进行设置。

pdfmake库

设置UTF-8编码：

var docDefinition = {
    content: [  
        { text: '你好，世界！', font: 'SimSun' }  
    ],  
    defaultStyle: {  
        font: 'SimSun'  
    }  
};  
pdfMake.createPdf(docDefinition).download('example.pdf');

jsPDF库

设置UTF-8编码：

var doc = new jsPDF();
doc.addFileToVFS("SimSun.ttf", fontData);  
doc.addFont("SimSun.ttf", "SimSun", "normal");  
doc.setFont("SimSun");  
doc.text("你好，世界！", 10, 10, { encoding: 'UTF-8' });  
doc.save("example.pdf");

2.2 设置GB2312编码

如果需要使用GB2312编码，可以在生成PDF时进行设置。

pdfmake库

设置GB2312编码：

var docDefinition = {
    content: [  
        { text: '你好，世界！', font: 'SimSun' }  
    ],  
    defaultStyle: {  
        font: 'SimSun'  
    }  
};  
pdfMake.createPdf(docDefinition).download('example.pdf');

jsPDF库

设置GB2312编码：

var doc = new jsPDF();
doc.addFileToVFS("SimSun.ttf", fontData);  
doc.addFont("SimSun.ttf", "SimSun", "normal");  
doc.setFont("SimSun");  
doc.text("你好，世界！", 10, 10, { encoding: 'GB2312' });  
doc.save("example.pdf");

三、利用第三方库

除了pdfmake和jsPDF外，还有许多第三方库可以用于生成支持中文的PDF文件。这些库通常已经内置了对中文字体的支持，使用起来更加方便。

3.1 pdf-lib库

pdf-lib是一个强大的生成和修改PDF文件的JavaScript库。使用pdf-lib可以轻松加载中文字体并生成支持中文的PDF文件。

加载中文字体：

import { PDFDocument, rgb, StandardFonts } from 'pdf-lib';
import fontkit from '@pdf-lib/fontkit';  
const pdfDoc = await PDFDocument.create();  
pdfDoc.registerFontkit(fontkit);  
const fontBytes = await fetch('/path/to/SimSun.ttf').then(res => res.arrayBuffer());  
const customFont = await pdfDoc.embedFont(fontBytes);

生成PDF文件：

const page = pdfDoc.addPage();
page.drawText('你好，世界！', {  
    x: 50,  
    y: 700,  
    size: 30,  
    font: customFont,  
    color: rgb(0, 0, 0),  
});  
const pdfBytes = await pdfDoc.save();

3.2 Puppeteer库

Puppeteer是一个基于Chrome浏览器的自动化库，可以用于生成PDF文件。使用Puppeteer可以直接生成支持中文的PDF文件。

安装Puppeteer：

npm install puppeteer

生成PDF文件：

const puppeteer = require('puppeteer');
(async () => {  
  const browser = await puppeteer.launch();  
  const page = await browser.newPage();  
  await page.setContent('<h1>你好，世界！</h1>');  
  await page.pdf({ path: 'example.pdf', format: 'A4' });  
  await browser.close();  
})();