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

客官°小女子只卖身不卖艺 2022-04-02 13:07 162阅读 0赞

需求： 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][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);

\})

[https_developer.mozilla.org_zh-CN_docs_Web_API_MouseEvent]: https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 html2canvas、canvas2image将HTML网页生成图片

相关 html2canvas.js----html网页指定div保存为图片canvas

相关 vue通过html2canvas来将div保存成图片

相关结合使用katex html2canvas 将LaTeX公式保存为图片

相关 html2canvas将html内容生成canvas图片实现方式

相关将HTML5 Canvas的内容保存为图片

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

相关 html2canvas 将html代码转为图片

相关将HTML5 Canvas的内容保存为图片

相关 vue - 使用 html2canvas 将页面转为图片，实现分享功能