業務場景
1. 可視化圖表下載
使用 Echarts 和 G2 等生成的圖表分析結果。包括餅圖、條形圖等
2. 分析報告下載
活動調研報告、指標分析報告下載。
實現原理
101635476820_.pic.jpg
代碼實現
常用工具:
- html2canvas
- jspdf
// 1. 將 DOM 轉化為 canvas
html2canvas(document.body).then(function(canvas){
// 初始化 pdf 的寬高
const a4w = 595
const a4h = 842
// 2. 將 canvas 轉化為圖片
const pageData = canvas.toDataURL('image/jpeg', 1.0);
const pdf = new jsPDF('p', 'pt', [a4w, a4h],);
// 3. 將圖片插入到 pdf 中
pdf.addImage(pageData, 'JPEG', 0, 0, imageWidth, imageHeigth)
// 下載 pdf 文件
pdf.save(“hello.pdf”)
});
注意事項
比例問題：我的 pdf 弄多大合適？
通過控制 DOM 的寬高，間接控制 PDF 的尺寸。
生成的 PDF 展示的頁面內容不全
在 pdf.addImage 方法中，通過控制圖片的寬高，實現圖片的全展示
推薦按照 A4 的尺寸等比例縮放
如何實現分頁
- 通過 PDF 的高度，等比例換算出一張 PDF 對應的 DOM 的高度
- 遍歷 DOM 節點，將滿足一張 PDF 高度的 DOM 轉化 canvas，然后再增加到 PDF 文件中
- 以此類推，直到將所有的 DOM 節點都插入到 PDF
- 下載 PDF
如何設計分頁
分頁算法設計和實現。
根據是否允許 DOM 跨頁，確定 DOM 遍歷的深度。
總結
WeChatd2f706ce6746a92f3e4bb4df967f43fe.png
