摘要：
用到的库：html2canvas和jsPDF，安装一下：npminstallhtml2canvasjsPDFhtml部分导出PDFHTML的的内容JS部分import{jsPDFasJsPDF}from'jspdf';//这里是因为用了eslint，构造函数要大写，才弄个别名importhtml2canvasfrom'html2canvas';constdownloadPdf=()=˃{constprintHtml=document.getElementById;//myPage里面的内容会经过库处理变成图片html2canvas.then;};方式二：清晰可见，打印出来效果很好。
刚做完把页面表格导出为PDF的功能，记录一下。
把页面导出pdf我们有2种方式：
- 把页面变成图片，然后把图片弄成pdf
- 直接把html变成pdf
方式一：
简单快捷，但不是很清晰，而且如果需要打印出来，会有一点黑色背景。适合要求不高，不需要打印的。
用到的库：html2canvas 和 jsPDF，安装一下：npm install html2canvas jsPDF
html部分
<button onclick="downloadPdf">导出PDF</button>
<div id="myPage">
HTML的的内容
</div>
JS部分
import { jsPDF as JsPDF } from 'jspdf'; //这里是因为用了eslint，构造函数要大写，才弄个别名
import html2canvas from 'html2canvas';
const downloadPdf = () => {
const printHtml = document.getElementById('myPage'); //myPage里面的内容会经过库处理变成图片
html2canvas(printHtml).then((canvas) => {
const contentWidth = canvas.width;
const contentHeight = canvas.height;
// 一页pdf显示html页面生成的canvas高度;
const pageHeight = contentWidth / 592.28 * 841.89;
// 未生成pdf的html页面高度
let leftHeight = contentHeight;
// 页面偏移
let position = 0;
// a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
const imgWidth = 595.28;
const imgHeight = 592.28 / contentWidth * contentHeight;
const pageData = canvas.toDataURL('image/jpeg', 1.0);
const pdf = new JsPDF('', 'pt', 'a4'); // 纵向方向p，单位pt|mm， 格式a4
// 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
// 当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
// 避免添加空白页
if (leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save('pdf的名字.pdf');
});
};
方式二：
清晰可见，打印出来效果很好。
用到的库：jsPDF 和 jspdf-autotable 安装一下：npm install jsPDF jspdf-autotable
坑：处理中文，因为默认不支持中文
解决导出中文不乱码问题，我们需要提供一个编译处理过的js字体文件，给jsPDF设置上字体，就可以了。
方法：
1.先去这里 转换你需要的字体（只支持 .ttf格式的字体）
2. 在上面转换后你会得到一个js文件，打开文件我们只需要保留那很长的字符串，并且把它导出，其他代码可以注释掉。
const myFont ="那一堆超长字符串"；
export defalut myFont;
3. 使用时
doc.addFileToVFS("ok.ttf", myFont);// 前面.ttf随便写，后面就是那个超长字符串
doc.addFont("ok.ttf", "hahaFont", "normal"); //.ttf和上一行对应；定义的字体名字，后面要用到；默认normal
html部分
使用的是table标签，然后如果单元格内容多需要换行的使用
标签，这样到时导出的pdf才会换行，同时不需要再套p或div标签。不然页面上会空出很多。
<button onclick="downloadPdf">导出PDF</button>
<div id="myPage">
xxxx的内容
<table border="1" cellPadding="10" cellspacing="0">
<thead>
<tr>
<th style={{ '10%', textAlign: 'center' }}>类</th>
<th style={{ '10%', textAlign: 'center' }}>指标</th>
</tr>
</thead>
<tbody>
<tr>
<td>课堂适应学生<br>清晰一二</td>
<td>四五六</td>
</tr>
<tr>
<td>蒸馏水<br>水电费<br/>朗读一下</td>
<td>临时冻结</td>
</tr>
</tbody>
</table>
</div>
js部分
import { jsPDF as JsPDF } from 'jspdf';
import 'jspdf-autotable';
import myFont from './myzt-normal';//引入字体js文件，解决中文乱码
const downloadPdf = () => {
const doc = new JsPDF('p', 'pt'); // 获取实例
const res = doc.autoTableHtmlToJson(document.getElementById('indexTable'));
// 设置中文字体
doc.addFileToVFS('ok.ttf', myFont);
doc.addFont('ok.ttf', 'myFont', 'normal');
doc.setFont('myFont');
doc.autoTable({
styles: {//设置表格的字体，不然表格中文也乱码
fillColor: [255, 255, 255], font: 'myFont', textColor: [0, 0, 0], halign: 'left', fontSize: 12,
},
headStyles: { lineWidth: 1, halign: 'center' },
columnStyles: {
0: { valign: 'middle', cellWidth: 50 },
1: { valign: 'middle', cellWidth: 50 },
2: { valign: 'middle' },
3: { valign: 'middle', cellWidth: 200 },
4: { valign: 'middle', minCellWidth: 30 }, // 第4列居中,宽度最小30
},
theme: 'grid', // 主题
startY: 80, // 距离上边的距离
margin: 20, // 距离左右边的距离
body: res.data, // 表格内容
columns: [ // 表头
{ header: '类', dataKey: 'lei' },
{ header: '指标', dataKey: 'zhibiao' },
{ header: '要点及要素', dataKey: 'yaosu' },
{ header: '大数据计分方案', dataKey: 'fangan' },
{ header: '得分', dataKey: 'defen' },
],
});
const pageWidth = doc.getPageWidth(); // A4纸:595.28
const x1 = (pageWidth - doc.getTextWidth(indexTitle)) / 2;
doc.text(x1, 40, indexTitle); // x坐标,y坐标,文字
doc.setFontSize(12);// 设置文字大小,下一行起有效
doc.text(20, 60, `总分:${score}`);
doc.save(`${indexTitle}-大数据指数.pdf`);
};