页面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>