JsPDF 不支持日语

Question

我正在为我的反应项目使用 JsPDF，并在为日语版本保存 pdf 时遇到一些问题，但它在英语版本中工作正常。

问题有时它正在打印一些随机的特殊字符和 有时它不会在 PDF 上打印任何内容。

任何帮助将不胜感激。

这是我的代码

import React from "react";
import jsPDF from 'jspdf';
import "./styles.css";
const HelloWorldJapanese = 'こんにちは世界';
export default function App() {
const downloadPdf = () => {
const doc = new jsPDF()
doc.text('Hello world!', 10, 10)
doc.save('a4.pdf')
}
const downloadJapanesePDF = () => {
const doc = new jsPDF();
doc.text(HelloWorldJapanese, 10, 10)
doc.save('a4.pdf');
}
return (
<div className="App">
<button onClick={downloadPdF}>Download Pdf</button>
<br />
<button onClick={downloadJapanesePDF}>Download Japanese Pdf</button>
</div>
);
}

沙盒演示：https://codesandbox.io/s/jspdf-bk7p3

Answer 1

您必须手动添加字体文件。例如，在 jsPDF git 中

doc.addFont("test/reference/MouhitsuBold.ttf", "Mouhitsu", "bold");
doc.setFont("Mouhitsu", "bold"); // set font

我在故障中添加了代码以方便演示(在故障中预览pdf仅适用于新窗口中显示(

Answer 2

据我所知，我所做的是将 MouhitsuBold.ttf 转换为 base64，将其放入文件中(您可以选择您想要的文件类型，只要您知道如何将 base64string 称为 js 文件或 txt 文件，但我的 js 文件是这样的(

export default {
myFunction(){
return myBase64Txt
}
}

您可以将该功能导入到其他文件中

import myFunction from "<thelocationofthefile>"

之后我使用doc.addFileToVFS("MS-Gothic_new.ttf",myFunction.myFunction());

然后

doc.addFont("MS-Gothic_new.ttf", "MS-Gothic_new", "bold");
doc.setFont("MS-Gothic_new", "bold");

你也可以做其他的想法，你只需要将MouhitsuBold的base64导入.ttf到VFS

我希望它有所帮助