vue实现将iframe保存图片--html2canvas

1、vue导入html2canvas

npm install --save html2canvas

2、vue配置

main.js

import html2canvas from 'html2canvas'

Vue.prototype.$html2canvas = html2canvas

3、iframe

  <iframe  ref="iframe"  src='.。。/index.html'> </iframe>  

4、组件vue代码

 download_iframeimg(){

      var     iframeHtml=this.$refs.iframe.contentWindow

      const iframeScrollY = iframeHtml.document.documentElement.scrollTop

     const iframeScrollX = iframeHtml.document.documentElement.scrollLeft

    var   iframeBody= iframeHtml.document.getElementsByTagName('body')[0]

     //利用 html2canvas库

     var that=this

    that.$html2canvas(iframeBody, {

        useCORS: true,

        width: 812, 

        height: 661,

        x: iframeScrollX,

        y: iframeScrollY

    }).then(function(canvas){        

        let canvasImg = canvas.toDataURL("image/png"); // 转化成 dataurL

        //生成图片并下载 

        var $a = document.createElement('a');

        var type = 'png';

        //图片名称

        $a.download = “aa” + '.' + type;

        $a.target = '_blank';

        $a.href = canvasImg;

        if (typeof MouseEvent === 'function') {

          var evt = new MouseEvent('click', {

            view: window,

            bubbles: true,

            cancelable: false

          });

          $a.dispatchEvent(evt);

        }

    })

   },