业务场景
1. 可视化图表下载
使用 Echarts 和 G2 等生成的图表分析结果。包括饼图、条形图等
2. 分析报告下载
活动调研报告、指标分析报告下载。
实现原理
代码实现
常用工具:
- 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 遍历的深度。