關(guān)注公眾號【Miles】查看更多技術(shù)文檔
實現(xiàn)方式一 ： html2canvas 和 jsPDF
案例描述
https://www.cnblogs.com/sap-jerry/p/9819200.html
案例代碼
https://github.com/linwalker/render-html-to-pdf
拓展功能：
1、將當前窗口保存成PDF
document.body 是保存 當前瀏覽器窗口 （有滾動條的 包含滾動條向下全部內(nèi)容）
html2canvas(document.body, {
onrendered:function(canvas) {}
})
2、將頁面中某一 dom 盒模型 保存成PDF
document.getElementById('result-calculated') 是保存 某一個盒模型 內(nèi)容
html2canvas(document.getElementById('result-calculated'), {
onrendered:function(canvas) {}
})
實現(xiàn)方式二 ： 前端自動生成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"}, // !!!---表格里設(shè)置為中文字體---!!!
doc.autoTable(columns, rows, {
startY: 70,
theme: 'grid',
styles: { font: "SourceHanSans"}, // !!!---表格里設(shè)置為中文字體---!!!
//標題
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: "従業(yè)員情報", dataKey: "name"},
{title: "給與等について", dataKey: "country"}
];
// 表格數(shù)據(jù)
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": "従業(yè)員情報"},
{"id": 6, "name": "Garcia", "country": "導入予定システム"},
{"id": 7, "name": "Shaw", "country": "従業(yè)員情報"},
{"id": 8, "name": "Nelson", "country": "導入予定システム"},
{"id": 9, "name": "Garcia", "country": "従業(yè)員情報"},
{"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"緩存起來
// 添加并設(shè)置字體
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", // !!!---表格里設(shè)置為中文字體---!!!
// fillColor: [255, 255, 0], //修改背景顏色
// styles: { textColor: [0, 255, 0] } //修改文字顏色
},
// //標題 （只設(shè)置標題的情況下 用這種方式即可 || 標題 + 副標題 用上面方式）
// addPageContent: function(data) {
// doc.text("導入予定システム==標題", 40, 30);
// }
});
doc.save('table.pdf');
}
</script>
</head>
<body >
<button type="button" name="button" onclick="exportPDF()">導出</button>
</body>
</html>
