前端使用html2canvas导出图片及pdf的解决滚动条内容导出空白的方法

阅读本书更多章节>>>>

html2canvas链接

中文文档：https://allenchinese.github.io/html2canvas-docs-zh-cn/
摘要：
html2canvas 是一个 HTML 渲染器。该脚本允许你直接在用户浏览器截取页面或部分网页的“屏幕截屏”，屏幕截图是基于 DOM，因此生成的图片并不一定 100% 一致，因为它没有制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。
该脚本通过读取 DOM 以及应用于元素的不同样式，将当前页面呈现为 canvas 图像。

它不需要来自服务器的任何渲染，因为整个图像是在客户端上创建的。但是，由于它太依赖于浏览器，因此该库不适合在 nodejs 中使用。它也不会神奇地规避任何浏览器内容策略限制，因此呈现跨域内容将需要代理来将内容提供给相同的源。

该脚本仍然处理非常实验状态，因此不建议在生产环境中使用它，也不建议使用它来构建应用程序，因为仍然会有重大更改。

jsPDF

jspdf是一个基于Node.js的PDF生成器，它可以创建和修改PDF文档，添加文本、图像、表格、链接等内容。它支持多种页面尺寸和方向，以及多种字体和样式。它还提供了一些高级功能，如加密、压缩、合并等。（new bing生成）
相关链接：https://www.jianshu.com/p/570c84ee2e8d

问题

在进行日常开发过程中发现html2canvas对带有滚动条的界面进行截图会导致被隐藏部分空白。

1、配置参数，循环截取拼接图片（失败）

通过在线文档研究了一遍参数之后发现即使设置了scrollX和scrollY仍旧无法完全截下来，大部分相关文档中解决方案大同小异。一种特殊思路是多次截取进行图片的拼接，但由于项目需求并不仅仅是元素本身的滚动，所以改解决方案并没有做出尝试，感觉应该是有效。

2、导出前全部内容显示，导出后恢复滚动条

原理：空白是由于滚动条造成的，所以直接取消滚动条或者截屏前设置滚动条为overflow:visible，显示全部内容，该方案虽然会照成回流和重绘一级滚动条的闪烁，但也是行的通的。

3、将要导出的节点复制一份，导出后移除复制节点

原理：使用[node].cloneNode(true)复制节点，复制之后将原节点的scrollWidth和scrollHeight赋值给复制出来的节点，由于不对原节点进行修改，所以不会照成屏幕显示元素除滚动条之外的变化
缺点：对于canvas元素要特殊处理，因为复制节点的canvas是空白的（对复制节点的canvas使用drawImage绘制出对应原节点的canvas图像）
注意：复制的节点不能是虚拟Node，必须要放到dom上面显示（隐藏不可）

var copyDom = el.cloneNode(true);copyDom.style.width = el.scrollWidth + "px";copyDom.style.height = el.scrollHeight + "px";

4、设置节点的display为table

通过偶然发现，对于设置display:table的元素进行html2canvas是可以直接导出为完美效果的，唯一不足的就是表格布局略微繁琐，原理未知（猜测可能和table布局渲染的原理有关系，没有找到相关文档）
解决方案：
后续需要考虑对导出的pdf进行分页，但是pdf分页实在html2canvas的前提上进行的，所以导出为图片可能需要更好的方式

<div      style="height: 1000px; background-color: antiquewhite; overflow-y: auto"    >      <div        id="container"        style="height: 800px; overflow-y: auto; display: table"      >        <div id="main" style="width: 600px; height: 400px"></div>        <div style="height: 800px; background-color: green"></div>        <div style="height: 800px; background-color: blue">123456</div>      </div>    </div>    function html2Pdf() {        // var downPdf = document.getElementById("container");        var dom = document.querySelector("#container");        let opt = {          backgroundColor: "white",          useCORS: true,          scale: 1,          width: dom.offsetWidth,          height: dom.scrollHeight,          windowHeight: dom.scrollHeight,          windowWidth: dom.offsetWidth,        };        console.log(opt);        html2canvas(document.getElementById("container"), opt).then(          (canvas) => {            //返回图片dataURL，参数：图片格式和清晰度(0-1)            var pageData = canvas.toDataURL("image/jpeg", 1.0);            console.log(jspdf);            //方向默认竖直，尺寸ponits，格式a4[595.28,841.89]            var pdf = new jspdf.jsPDF("", "pt", [              opt.windowWidth,              opt.windowHeight,            ]);            //addImage后两个参数控制添加图片的尺寸，此处将页面高度按照a4纸宽高比列进行压缩            pdf.addImage(              pageData,              "JPEG",              0,              0,              opt.windowWidth,              opt.windowHeight            );            pdf.save("stone.pdf");          }        );      }

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-03-30/150805.html，文章来源：网络cs，作者：付梓，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！