美文网首页
Vue 页面内容利用canvas做成导出图片

Vue 页面内容利用canvas做成导出图片

作者: QRFF | 来源:发表于2019-11-05 10:58 被阅读0次

import html2Canvas from "html2canvas";

downloadIamge() {
      let that = this;
      html2Canvas(document.getElementById("export_content"), {
       useCORS:true,//解决canvas跨域
       allowTaint:false
      }).then(function(canvas) {
        let contentWidth = canvas.width;
        let contentHeight = canvas.height;
        let pageHeight = (contentWidth / 592.28) * 841.89;
        let leftHeight = contentHeight;
        let position = 0;
        let imgWidth = 595.28;
        let imgHeight = (592.28 / contentWidth) * contentHeight;
        let pageData = canvas.toDataURL("image/jpeg", 1.0);
        var a = document.createElement('a')
        var event = new MouseEvent('click')
        a.download = 'xx分析报告'
        a.href = pageData
        a.dispatchEvent(event)
      });
    }

相关文章

网友评论

      本文标题:Vue 页面内容利用canvas做成导出图片

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