参考文档 ——>

htm2Pdf ——>

html2canvas—->

jsPDF(github)—->

jsPDF(Documentation)——>

原理简介：

我们可以直接在浏览器端使用html2canvas,对整个或局部页面进行‘截图’。但这并不是真的截图，而是通过遍历页面DOM结构，收集所有元素信息及相应样式，渲染出canvas image

由于html2canvas只能将它能处理的生成canvas image，因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与，整个图片都由客户端浏览器生成，使用很方便。

jsPDF库可以用于浏览器端生成PDF

使用React hooks

  1.   const handelOnBtnClick = useCallback(
  2.     (previewTitle) => {
  3.       var element = document.getElementById("drop-container-preview");
  4.       var opt = {
  5.         margin: 1,
  6.         filename: '标题',
  7.         // image: { type: "jpeg", quality: 0.98 },
  8.         // html2canvas: { scale: 2 },
  9.         jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
  10.         pagebreak: { mode: "avoid-all", after: ".page-break" }
  11.       };
  13.       // New Promise-based usage:
  14.       html2pdf()
  15.         .set(opt)
  16.         .from(element)
  17.         .save();
  18.     },
  19.     [],
  20.   );


  • drop-container-preview 这个容器的宽度要设置为 792px; (mac 电脑上 量取的 a4 pdf 宽度)