需求: 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);
})