在使用 jsPDF
生成 PDF 时,如果中文字符显示为乱码,通常是因为默认字体不支持中文。要正确显示中文字符,您需要使用支持中文的字体。以下是解决方法:
方法一:使用 addFont
方法添加自定义字体
下载支持中文的字体文件(如
Source Han Sans
,Noto Sans CJK
等),并确保它们以.ttf
格式存在。转换字体 为 base64 字符串。可以使用工具如 ttf2base64 或其他在线转换工具。
在 jsPDF 中注册该字体,然后在文本中使用该字体。例如:
// 首先引入 jsPDF 和适当的字库
const { jsPDF } = window.jspdf;
// 创建 PDF 实例
const pdf = new jsPDF();
// 添加自定义字体(这里用的是 Base64 编码)
pdf.addFileToVFS("CustomFont.ttf", "<Base64编码>");
pdf.addFont("CustomFont.ttf", "CustomFont", "normal");
// 使用自定义字体输出文本
pdf.setFont("CustomFont");
pdf.text("这是我的 ECharts 图表", 10, 10);
// 保存 PDF
pdf.save("example.pdf");
方法二:使用第三方库 (例如: jspdf-autotable
, html2canvas
, 或者图像)
如果您只需简单地在 PDF 中插入 ECharts 图表,可以考虑将图表导出为图片,然后再将图片插入到 PDF 中。
将 ECharts 图表导出为图片,例如 PNG 格式。
var chartImage = myChart.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#fff' });
将图片插入到 PDF: “`javascript const pdf = new jsPDF(); pdf.addImage(chartImage, ‘PNG’, 10, 20); pdf.text(“这是我的 ECharts 图表”, 10, 10);
// 保存 PDF pdf.save(“example.pdf”); “`
小结
如果想直接在 PDF 中写中文,需要确保使用了支持中文的字体。如果只是想展示 ECharts 图表,建议先将其转为图像,再插入到 PDF 中,这样能保证图形质量和清晰度。
内容由零声教学AI助手提供,问题来源于学员提问