html2canvas将HTML转为图片并保存以及Document.createEvent() 创建指定类型的事件

需求： vue（PC）项目中，页面上根据提供的信息生成一个审核报告，需要把该报告生成图片并自动保存到本地

实现思路： 

1、使用html2canvas 将HTML转成canvas

 npm install html2canvas

 import html2canvas from 'html2canvas'

-------------------------------------------------------------------------

2、调用canvas的toDataURL（）方法，将canvas转成base64图片

-------------------------------------------------------------------------

3、利用a标签下载图片

***************************************************

实现一：

  js: 

   let element = document.getElementById('apply_report');

   html2canvas(element).then(canvas => {

      var alink = document.createElement('a')

      alink.href = canvas.toDataURL("image/png")

      alink.download = ‘temp’  //图片名称

      alink.click() // 触发a标签点击事件，自动下载图片

   })

所遇问题，谷歌浏览器中可以自动下载保存图片到本地，火狐不行

**************************************************

实现二：

  js: 

   let element = document.getElementById('apply_report');

   html2canvas(element).then(canvas => {

      var alink = document.createElement('a')

      alink.href = canvas.toDataURL("image/png")

      alink.download = ‘temp’  //图片名称

       // 创建事件

      const event = document.createEvent('MouseEvents');

       // 事件初始化（已从web标准中移除，一些浏览器仍然支持） 可用new MouseEvent()代替

      event.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

       // 触发对象可以是任何元素或其他时间目标

      alink.dispatchEvent(event);

      //alink.click() // 触发a标签点击事件，自动下载图片

   })

按照如上方法写触发事件，谷歌和火狐浏览器均可以自动保存图片。

************************************************************

************************************************************

MDN上说initMouseEvent已经被废弃了,建议使用MouseEvent (MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent)

实现三：

  js: 

   let element = document.getElementById('apply_report');

   html2canvas(element).then(canvas => {

      var alink = document.createElement('a')

      alink.href = canvas.toDataURL("image/png")

      alink.download = ‘temp’  //图片名称

       /**

      // 创建事件

      const event = document.createEvent('MouseEvents');

       // 事件初始化（已从web标准中移除，一些浏览器仍然支持） 可用new MouseEvent()代替

      event.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

       // 触发对象可以是任何元素或其他时间目标

      alink.dispatchEvent(event);

      //alink.click() // 触发a标签点击事件，自动下载图片

    */

     const event = new MouseEvent('click', {  bubbles: true,cancalable: true,view: window });

     alink.dispatchEvent(event);

   })