关于dashboard需要导出成PDF这件事

Posted on | In

这篇算是业务小笔记吧。

需求描述： 有个 dashboard 界面，需要新增一个 export PDF 的功能。这个功能需要在两个地方存在：1. monitor dashboard 可以直接导出 2. list 页面可以快速导出。

需求分析： 又是一个前后端都可以做的 feature.但是如果从前端可以拿出什么方案呢？我用到的方案就是 dom node 转 canvas 之后再转 PDF。

这个方案用到了两个 package. 1. html2canvs 2. jsPDF

方案很简单。拿到 dom node 后使用 html2canvas 转 image, 再把 image 转 jsPDF。

来看一个简单的 demo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import jsPDF from "jspdf";
import html2canvas from "html2canvas";

const HTMLToCanvas = async (selector) => {
  const canvas = await html2canvas(document.querySelector(selector));
  return canvas;
};

export const domNodeToPDF = async (selector, pdfName) => {
  const canvas = await HTMLToCanvas(selector);
  const pageData = canvas.toDataURL("image/jpeg", 1.0);
  const pdf = new jsPDF({
    orientation: "l",
    unit: "pt",
    format: [canvas.width, canvas.height],
  });
  pdf.addImage(pageData, "JPEG", 0, 0, canvas.width, canvas.height);
  pdf.save(pdfName + ".pdf");
};

这个方案的可行性已经验证没问题。那么下一步，看一下这个方案的局限性在哪？

其实我能想到会遇到的问题就是当 dashboard 的数据巨大的时候，在渲染耗时上会不会存在问题？

比如一年量的数据。关于这个问题我能想到的是，改变交互，使用 web worker 进行 canvas 的转换和渲染。

这部分的工作都交给 web worker 来执行。执行完成后以 notification 的方式通知用户下载。