html页面长截图或生成pdf

arron4210

已于 2022-04-27 19:13:41 修改

阅读量879

点赞数

分类专栏：前端 vue node 文章标签： javascript

于 2022-03-21 14:34:31 首次发布

本文链接：https://blog.youkuaiyun.com/arron4210/article/details/123634962

版权

本文探讨如何解决使用html2canvas在处理复杂HTML页面时出现的长截图和PDF生成耗时过长的问题，寻求更高效的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html页面需要生成长截图或者PDF，用html2canvas, 页面复杂耗时太长

import html2canvas from 'html2canvas'
// import jsPDF from 'jspdf'

shotPic() {
   
      const targetDom = document.querySelector('.target-div')
      // 此处是实现滚动元素长截图的关键 start
      const copyDom = targetDom.cloneNode(true)
      copyDom.setAttribute('id', 'copyDom')
      // 更改id 避免与targetDom id重复
      copyDom.style.width = targetDom.scrollWidth + 'px'
      copyDom.style.height = targetDom.scrollHeight + 'px'
      document.querySelector('.parent-div').appendChild(copyDom)
      // 此处是实现滚动元素长截图的关键 end /* *如不需要长截图，或者要截取的元素无滚动即完全显示。 *下方要截取的元素改为targetDom,并把copyDom相关代码删除即可 */
      html2canvas(copyDom, {

最低0.47元/天解锁文章