页面dom节点转图片下载

2022-01-14  本文已影响0人  有一个程序媛

前端页面导出功能:
1.前端页面画出的html节点
2.html节点转图片
3.file-saver下载
步骤:
1.下载html2canvas,file-saver

npm install html2canvas
npm install file-saver

2.jsx或vue文件中引入两个插件

import html2canvas from 'html2canvas' // dom转图片下载
import fileSaver from 'file-saver' // dom转图片下载
// eslint-disable-next-line no-case-declarations
   const node = document.getElementById('printMe')
   // 使用html2canvas捕获生成canvas图像
   html2canvas(node, {
       useCORS: true
   }).then(canvas => {
    // 将canvas转换为H5的blob对象
      canvas.toBlob((blob) => {
        // 使用fileSaver插件中saveAs函数下载到本地
          fileSaver.saveAs(blob, '图片.jpg')
       })
     })

3.dom层节点用id标识需要导出为图片的dom节点

<div id="printMe" class="gantt-table">我是需要导出的dom节点</div>
上一篇下一篇

猜你喜欢

热点阅读