zoukankan      html  css  js  c++  java
  • 点击按钮保存当前页面为图片html2canvas

    npm install --save html2canvas

    import html2canvas from 'html2canvas'

      

    handleDownload (id) {
          let ele = document.getElementById(id)
          let ignoreElements = ele.querySelector('.chart-download')
          html2canvas(ele, {
            logging: false,
            ignoreElements: (elements) => { //  忽略的ele
              return elements === ignoreElements
            }
          }).then(function (canvas) {
            // canvas转为图片流
            let dataurl = canvas.toDataURL('image/png')
            console.log(dataurl)
    
            // 非ie下正常,主要原因是ie下a标签不支持download属性
            let donwLink = document.createElement('a')
            donwLink.href = dataurl
            donwLink.download = '统计分析' + new Date().getTime() // 图片名字
            donwLink.click()
            let event = new MouseEvent('click')
            donwLink.dispatchEvent(event)
    
            // 使用downloadjs兼容ie下下载,https://github.com/rndme/download
            // download(data, strFileName, strMimeType);
            // downloadjs(dataurl, `统计分析${new Date().getTime()}`, 'image/png')
          })
        },
    

      

  • 相关阅读:
    中序遍历【递归算法】和【非递归算法】
    等价无穷小替换
    轮转访问MAC协议
    曲率
    Java I/O流 01
    Java 集合框架 04
    Java 集合框架 03
    Java 集合框架 02
    Java 集合框架 01
    Java 常见对象 05
  • 原文地址:https://www.cnblogs.com/cs122/p/15603904.html
Copyright © 2011-2022 走看看