美文网首页
vue使用 html2canvas 截取页面并下载图片 已解决图

vue使用 html2canvas 截取页面并下载图片 已解决图

作者: Gaochengxin | 来源:发表于2020-07-20 15:59 被阅读0次

已解决图片跨域的问题

一、引包

npm install --save html2canvas

二、导入

import html2canvas from 'html2canvas'

三、使用

  kssstart () {
   // mymap你要截取的元素 也可以是body  整个页面  **
      let canvasID = this.$refs.mymap;
      let that = this;
      let a = document.createElement('a');
      html2canvas(canvasID, {useCORS:true, scrollY:0,removeContainer:false}).then(canvas => {
        let dom = document.body.appendChild(canvas);
        dom.style.display = "none";
        a.style.display = "none";
        document.body.removeChild(dom);
        let blob = that.dataURLToBlob(dom.toDataURL("image/png"));
        a.setAttribute("href", URL.createObjectURL(blob));
        a.setAttribute("download", "res.png")
        document.body.appendChild(a);
        a.click();
        URL.revokeObjectURL(blob);
        document.body.removeChild(a);
      });
},
dataURLToBlob(dataurl) {//ie 图片转格式
      var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], {type: mime})
    },

相关文章

网友评论

      本文标题:vue使用 html2canvas 截取页面并下载图片 已解决图

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