关注公众号【Miles】查看更多技术文档
实现方式一 ： html2canvas 和 jsPDF
案例描述
https://www.cnblogs.com/sap-jerry/p/9819200.html
案例代码
https://github.com/linwalker/render-html-to-pdf
拓展功能：
1、将当前窗口保存成PDF
document.body 是保存 当前浏览器窗口 （有滚动条的 包含滚动条向下全部内容）
html2canvas(document.body, {
onrendered:function(canvas) {}
})
2、将页面中某一 dom 盒模型 保存成PDF
document.getElementById('result-calculated') 是保存 某一个盒模型 内容
html2canvas(document.getElementById('result-calculated'), {
onrendered:function(canvas) {}
})
实现方式二 ： 前端自动生成PDF(jsPDF autoTable)
案例描述
1、https://blog.csdn.net/weixin_43237339/article/details/98473873
2、https://www.cnblogs.com/tianxiangbing/p/autotable.html
3、详细的auto-Table https://www.hangge.com/blog/cache/detail_2208.html
解决中文、日文、韩文 【乱码问题】
引入①；
<script src="https://cdn.jsdelivr.net/npm/vxe-table-plugin-export-pdf/fonts/source-han-sans-normal.js"></script>
引入②；
doc.addFont('SourceHanSans-Normal.ttf', 'SourceHanSans-Normal', 'normal');
doc.setFont('SourceHanSans-Normal');
引入③：styles: { font: "SourceHanSans"}, // !!!---表格里设置为中文字体---!!!
doc.autoTable(columns, rows, {
startY: 70,
theme: 'grid',
styles: { font: "SourceHanSans"}, // !!!---表格里设置为中文字体---!!!
//标题
addPageContent: function(data) {
doc.text("導入予定システム", 40, 50);
}
});
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jspdf/2.2.0/jspdf.umd.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jspdf-autotable/3.5.13/jspdf.plugin.autotable.js"></script>
<!-- 字体库--解决中日韩文字乱码用 -->
<script src="https://cdn.jsdelivr.net/npm/vxe-table-plugin-export-pdf/fonts/source-han-sans-normal.js"></script>
<script type="text/javascript">
// 页面初始化
function exportPDF() {
// 表格列头
var columns = [
{title: "導入予定システム", dataKey: "id"},
{title: "従業員情報", dataKey: "name"},
{title: "給与等について", dataKey: "country"}
];
// 表格数据
var rows = [
{"id": 1, "name": "Shaw", "country": "你好"},
{"id": 2, "name": "Nelson", "country": "Kazakhstan"},
{"id": 3, "name": "Garcia", "country": "給与等について"},
{"id": 4, "name": "Shaw", "country": "Tanzania"},
{"id": 5, "name": "Nelson", "country": "従業員情報"},
{"id": 6, "name": "Garcia", "country": "導入予定システム"},
{"id": 7, "name": "Shaw", "country": "従業員情報"},
{"id": 8, "name": "Nelson", "country": "導入予定システム"},
{"id": 9, "name": "Garcia", "country": "従業員情報"},
{"id": 10, "name": "Garcia", "country": "導入予定システム"}
];
// 只支持pt
var doc = new jspdf.jsPDF('p', 'pt');
// 印章
var imgData = 'https://upload-images.jianshu.io/upload_images/24486407-57f3eb5bee753d93.jpeg'
doc.addImage(imgData, 'PNG', 480, 10, 75, 50,"yinzhang"); // 将图片使用别名"yinzhang"缓存起来
// 添加并设置字体
doc.addFont('SourceHanSans-Normal.ttf', 'SourceHanSans', 'normal');
doc.setFont('SourceHanSans');
// 添加表格上方的标题
doc.setFontSize(16);
doc.text('導入予定システム==标题', 40, 30);
// 添加表格上方的副标题
doc.setFontSize(10);
doc.setTextColor(100);
var pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth();
var text = doc.splitTextToSize('Welcome to hangge.com.......', pageWidth - 35, {});
doc.text(text, 40, 45);
// 表格
doc.autoTable(columns, rows, {
startY: 70, //表格距离顶部 70
theme: 'grid',
styles: {
font: "SourceHanSans", // !!!---表格里设置为中文字体---!!!
// fillColor: [255, 255, 0], //修改背景颜色
// styles: { textColor: [0, 255, 0] } //修改文字颜色
},
// //标题 （只设置标题的情况下 用这种方式即可 || 标题 + 副标题 用上面方式）
// addPageContent: function(data) {
// doc.text("導入予定システム==标题", 40, 30);
// }
});
doc.save('table.pdf');
}
</script>
</head>
<body >
<button type="button" name="button" onclick="exportPDF()">导出</button>
</body>
</html>
