下面这种写法有些chrome不起作用
downLoadCanvas (data, filename = '活动.png') {
var saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
saveLink.href = data
saveLink.download = filename
var event = document.createEvent('MouseEvents')
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
saveLink.dispatchEvent(event)
}
换这种写法之后OK,base64转blob
saveImg () {
html2canvas(this.$refs.imageTofile, {
backgroundColor: null
}).then((canvas) => {
let url = canvas.toDataURL('image/png')
let downloadName = this.detailData.basic.act_name + '.png'
this.downloadFile(downloadName, url)
})
},
base64ToBlob (code) {
let parts = code.split(';base64,')
let contentType = parts[0].split(':')[1]
let raw = window.atob(parts[1])
let rawLength = raw.length
let uInt8Array = new Uint8Array(rawLength)
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i)
}
return new Blob([uInt8Array], {type: contentType})
},
downloadFile (fileName, content) {
let aLink = document.createElement('a')
let blob = this.base64ToBlob(content) // new Blob([content]);
let evt = document.createEvent('HTMLEvents')
evt.initEvent('click', true, true)// initEvent 不加后两个参数在FF下会报错 事件类型,是否冒泡,是否阻止浏览器的默认行为
aLink.download = fileName
aLink.href = URL.createObjectURL(blob)
aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}))// 兼容火狐
},