您现在的位置是:首页 > 技术教程 正文

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

admin 阅读: 2024-03-29
后台-插件-广告管理-内容页头部广告(手机)

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";
  • 1
  • 2
  • 3

4、设置节点的display为table

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

123456 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"); } ); }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索