业务场景

1. 可视化图表下载

使用 Echarts 和 G2 等生成的图表分析结果。包括饼图、条形图等

2. 分析报告下载

活动调研报告、指标分析报告下载。

实现原理

101635476820_.pic.jpg

代码实现

常用工具:

1. html2canvas
2. 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 的尺寸等比例缩放

如何实现分页

1. 通过 PDF 的高度，等比例换算出一张 PDF 对应的 DOM 的高度
2. 遍历 DOM 节点，将满足一张 PDF 高度的 DOM 转化 canvas，然后再增加到 PDF 文件中
3. 以此类推，直到将所有的 DOM 节点都插入到 PDF
4. 下载 PDF

如何设计分页

分页算法设计和实现。

根据是否允许 DOM 跨页，确定 DOM 遍历的深度。

总结

WeChatd2f706ce6746a92f3e4bb4df967f43fe.png