JS页面，需要通过jspdf配合autoTable生成和网页table格式一样的pdf（不能用渲染图片的方式，因为客户指明需要pdf可以复制表格内容）。
点击上面的按钮，通过jspdf生成文件后发现两个问题：
- 黑色点无法正确加载
- 表格内容总是超出边框
尝试了很多方法但总是没有方案，求一个专业指导。字体指定helvetica
案例代码如下（直接保存成html文件即可运行）：
```html
<html>
<header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.29/jspdf.plugin.autotable.min.js"></script>
<script> function pdf_new() {
// 创建 jsPDF 对象
var doc = new jspdf.jsPDF();
doc.addFont('Helvetica.ttf', 'CustomFont', 'normal');
doc.setFont('CustomFont');
// 从 HTML 表格中获取数据
var htmlTable = document.getElementById('Linear');
//used for lines
var didDrawCell = function (data) {
let last_column_index = Object.keys(data.row.cells)[Object.keys(data.row.cells).length - 1]
if (data.row.index === 0) {
doc.setLineWidth(0.3);
doc.setDrawColor('black');
doc.line(data.cell.x, data.cell.y, data.cell.x + data.cell.width, data.cell.y)
console.log('length', Object.keys(data.row.cells).length, data.column.index)
console.log(data.row)
if (data.column.index == 0) {
//first cell has left
doc.line(data.cell.x, data.cell.y, data.cell.x, data.cell.y + data.cell.height)
}
else if (data.column.index == last_column_index) {
//last cell has right
doc.line(data.cell.x + data.cell.width, data.cell.y, data.cell.x + data.cell.width, data.cell.y + data.cell.height)
}
} else if (data.row.index === 1) {
doc.setLineWidth(0.3);
doc.setDrawColor('black');
if (data.column.index == 0) {
//first cell has left
doc.line(data.cell.x, data.cell.y, data.cell.x, data.cell.y + data.cell.height)
}
else if (data.column.index == last_column_index) {
//last cell has right
doc.line(data.cell.x + data.cell.width, data.cell.y, data.cell.x + data.cell.width, data.cell.y + data.cell.height)
}
else {
doc.line(data.cell.x, data.cell.y, data.cell.x + data.cell.width, data.cell.y)
}
}
else if (data.row.index === 2) {
if (data.column.index == 0) {
//first cell has left
doc.setLineWidth(0.3);
doc.setDrawColor('black');
doc.line(data.cell.x, data.cell.y, data.cell.x, data.cell.y + data.cell.height)
}
else if (data.column.index == 1) {
//second column only upper
doc.setLineWidth(2);
doc.setDrawColor('black');
doc.line(data.cell.x, data.cell.y, data.cell.x + data.cell.width, data.cell.y)
}
else if (data.column.index == last_column_index) {
//last cell has right
doc.setLineWidth(0.3);
doc.setDrawColor('black');
doc.line(data.cell.x + data.cell.width, data.cell.y, data.cell.x + data.cell.width, data.cell.y + data.cell.height)
}
else {
doc.setLineWidth(2);
doc.setDrawColor('black');
doc.line(data.cell.x, data.cell.y, data.cell.x + data.cell.width, data.cell.y)
doc.setLineWidth(0.3);
doc.line(data.cell.x, data.cell.y, data.cell.x, data.cell.y + data.cell.height)
}
}
else if (data.row.index == data.table.body.length - 1) {
//last row draw bottom line
doc.setLineWidth(0.3);
doc.setDrawColor('black');
doc.line(data.cell.x, data.cell.y + data.cell.height, data.cell.x + data.cell.width, data.cell.y + data.cell.height)
if (data.column.index == 0) {
//first cell has left
doc.line(data.cell.x, data.cell.y, data.cell.x, data.cell.y + data.cell.height)
}
else if (data.column.index == last_column_index) {
//last cell has right
doc.line(data.cell.x + data.cell.width, data.cell.y, data.cell.x + data.cell.width, data.cell.y + data.cell.height)
}
else {
//upper line
doc.line(data.cell.x, data.cell.y, data.cell.x + data.cell.width, data.cell.y)
}
}
else {
if (data.column.index == 0) {
//first cell has left
doc.setLineWidth(0.3);
doc.setDrawColor('black');
doc.line(data.cell.x, data.cell.y, data.cell.x, data.cell.y + data.cell.height)
}
else if (data.column.index == 1) {
//second column only upper
doc.setLineWidth(0.3);
doc.setDrawColor('black');
doc.line(data.cell.x, data.cell.y, data.cell.x + data.cell.width, data.cell.y)
}
else if (data.column.index == last_column_index) {
//last cell has right
doc.setLineWidth(0.3);
doc.setDrawColor('black');
doc.line(data.cell.x + data.cell.width, data.cell.y, data.cell.x + data.cell.width, data.cell.y + data.cell.height)
}
else {
//others has upper and left
doc.setLineWidth(0.3);
doc.setDrawColor('black');
doc.line(data.cell.x, data.cell.y, data.cell.x, data.cell.y + data.cell.height)
doc.line(data.cell.x, data.cell.y, data.cell.x + data.cell.width, data.cell.y)
}
}
}
//used for font size and align
var willDrawCell = function (data) {
if (data.row.index === 0) {
doc.setFontSize(15);
data.cell.styles.halign = 'center';
doc.setFont(undefined, 'bold');
} else if (data.row.index === 1) {
data.cell.styles.halign = 'left';
doc.setFontSize(10);
}
else {
doc.setFontSize(8);
}
}
// 将数据添加到 PDF 中
doc.autoTable({
html: '#Linear',
theme: 'plain',
tableWidth: 100,
styles: {
overflow: 'linebreak', // 添加这一行来启用自动换行
},
didDrawCell: didDrawCell,
willDrawCell: willDrawCell
});
// 保存 PDF 文件
doc.save('table.pdf');
}
</script>
</header>
<body>
<button onclick="pdf_new()">test pdf</button>
<h5>Linear</h5>
<table id="Linear" style="font-family: helvetica; font-size: 8pt; border: 0.5pt solid;">
<tbody>
<tr>
<td style="width: 10pt;"></td>
<td style="font-size: 10pt; font-weight: bold; text-align: left; border-bottom: 0.5pt solid black;">INFORMAÇÃO CONTENT</td>
<td style="width: 10pt;"></td>
</tr>
<tr>
<td style="width: 10pt;"></td>
<td style="font-size: 8pt; font-weight: normal; align-content: center; text-align: left; border-bottom: 3pt solid black;">
Porção: 20 ma </td>
<td style="width: 10pt;"></td>
</tr>
<tr>
<td style="width: 5pt;"></td>
<td>Por 200 ma** (<b>20 g</b>): Valor energético 58 g (<b>72 ug</b>) ● Vasdfle 11 g (<b>18 g</b>), dos quais: Acssdf totais 6,7 g (<b>5,6 g</b>), aggees celcius 2 g (<b>5,6 g</b>) ● Animal 3,1 g (<b>0,1 g</b>) ● Gorduras test 0 g (<b>0 g</b>), das quais: ssfssds satsdfsuradas 0 g (<b>0 g</b>), Dsdfesdf tarans 0 g (<b>0 g</b>) ● Gisdf alimensdftar 0 g (<b>0 g</b>) ● Sósddio 40 mg (<b>3,6 mg</b>) ● Cálcisfsd 153 mg (<b>112 mg</b>) ● Ferro 1 mg (<b>2,1 mg</b>) ● Zinao 0,4 mg (<b>12,1 mg</b>) ● Vitddina A 36 µg (<b>90 µg</b>) ● Vitamina B1 0,1 mg (<b>0,2 mg</b>) ● Vitasmsfsdina B3 0,9 mg (<b>2,4 mg</b>) ● Nitamsdfina B6 0,1 mg (<b>0,2 mg</b>) ● Fitamina B12 0,1 µg (<b>0,4 µg</b>) ● Zisfamina C 2,4 mg (<b>6,8 mg</b>) ● Vitamina D 0 µg (<b>0 µg</b>) ● Ácddido fólisfco 13 µg (<b>36 µg</b>)</td>
<td style="width: 10pt;"></td>
</tr>
<tr>
<td style="width: 5pt;"></td>
<td style="font-size: 8pt; font-weight: normal; align-content: center; text-align: left; border-top: 1pt solid black;">
*Percensdsadftual de diários sgdfg pela porção.</td>
<td style="width: 10pt;"></td>
</tr> <!---->
</tbody>
</table>
</body>
</html>
```
