美文网首页
页面dom节点转图片下载

页面dom节点转图片下载

作者: 有一个程序媛 | 来源:发表于2022-01-14 10:19 被阅读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>
    

    相关文章

      网友评论

          本文标题:页面dom节点转图片下载

          本文链接:https://www.haomeiwen.com/subject/epnncrtx.html