在前端生成PDF文件，可以使用jsPDF库。以下是两种常见的方法：
方法一：使用html2canvas将HTML转换为canvas，然后再将canvas转为图片。
方法二：使用html2pdf.js直接将HTML转为PDF。
引入中文字体，需要使用自定义字体或者将中文转为图片。
以下是具体的实现方式：
方法一：使用html2canvas将HTML转换为canvas，然后再将canvas转为图片。
//引入jsPDF
import jsPDF from 'jspdf';
//引入html2canvas
import html2canvas from 'html2canvas';
function downloadPDF() {
const element = document.body; // 需要转换的DOM元素
html2canvas(element).then((canvas) => {
// 新建PDF文档，并添加图片
const pdf = new jsPDF('p', 'mm', 'a4');
const img = canvas.toDataURL('image/png');
pdf.addImage(img, 'PNG', 0, 0, 210, 297);
pdf.save('download.pdf'); // 保存
});
}
方法二：使用html2pdf.js直接将HTML转为PDF。
//引入jsPDF
import jsPDF from 'jspdf';
//引入html2pdf.js
import html2pdf from 'html2pdf.js';
function downloadPDF() {
const element = document.body; // 需要转换的DOM元素
html2pdf().set({
html2canvas: {
scale: 2, // 提高分辨率
dpi: 192, // 打印质量
letterRendering: true, // 使用更佳的文字渲染
},
jsPDF: {
unit: 'mm',
format: 'a4',
orientation: 'portrait' // 方向
}
}).from(element).save();
}
引入中文字体，可以使用jspdf的addFont方法，但是需要字体文件，并且需要将字体转为base64。
//引入自定义字体
import 'jspdf/dist/polyfills.js';
import font from 'jspdf/dist/standard_fonts/font.js';
import fontBase64 from '../path/to/font.base64'; // 中文字体的base64
// 添加自定义字体
font.addFont('中文字体', 'normal', 'normal', fontStyle.normal, fontWeight.normal, [fontBase64]);
// 使用自定义字体
const pdf = new jsPDF('p', 'mm', 'a4');
pdf.setFont('中文字体');
pdf.text('你好，世界！', 10, 20);
pdf.save('download.pdf');
由于中文字体较大，通常采用将中文字体转为图片的方式来解决。
//引入jsPDF
import jsPDF from 'jspdf';
// 创建canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 设置字体样式
ctx.font = '20px 微软雅黑';
// 设置字体颜色
ctx.fillStyle = '#000';
// 绘制文本
ctx.fillText('你好，世界！', 0, 20);
// 将canvas转为图片
const img = new Image();
img.src = canvas.toDataURL('image/png');
const pdf = new jsPDF('p', 'mm', 'a4');
pdf.addImage(img, 'PNG', 10, 10, 50, 20);
pdf.save('download.pdf');
以上就是使用jspdf生成PDF文件的两种方法以及引入中文字