admin管理员组文章数量:1558039
针对问题: 各个浏览器下载图片 兼容ie
handleDown (row) {
// 生成时间戳避免图片名称相同
var t = new Date().getTime()
const imgUrl = row.qrcodeUrl + '?t=' + t
// 判断ie浏览器
if (this.Global.isIE()) {
this.saveAs(imgUrl)
return
}
const image = new Image()
// 解决跨域 Canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous')
debugger
image.onload = function () {
const canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
const context = canvas.getContext('2d')
context.drawImage(image, 0, 0, image.width, image.height)
const url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
const a = document.createElement('a') // 生成一个a元素
const event = new MouseEvent('click') // 创建一个单击事件
a.download = '活码二维码.png' || 'photo' // 设置图片名称
a.href = url // 将生成的URL设置为a.href属性
a.dispatchEvent(event) // 触发a的单击事件
}
image.crossOrigin = '' // 切记一定要将这个放在src赋值前,要不然会在safari上报安全错误
image.src = imgUrl
// var a = document.createElement('a') // 创建一个a节点插入的document
// var event = new MouseEvent('click') // 模拟鼠标click点击事件
// a.target = '_blank' // 针对 ie模式 的浏览器
// a.download = row.qrcodeUrl // 设置a节点的download属性值,图片名称
// a.href = row.qrcodeUrl // 将图片的src赋值给a节点的href
// a.dispatchEvent(event)
// // this.Global.downloadBlob(row.qrcodeUrl)
},
saveAs (fileUrl) {
if (window.navigator.msSaveOrOpenBlob) {
// 兼容IE11 发现在微软在ie10 和ie11中有两个特有的方法:window.navigator.msSaveBlob和window.navigator.msSaveOrOpenBlob 方法,
// 这两个方法的区别在于,前者只有保存,后者有保存和打开两个选项,按个人喜好使用就行
this.getBlob(fileUrl).then(blob => {
window.navigator.msSaveBlob(blob, '活码二维码.png')
})
}
},
getBlob (url) {
return new Promise(resolve => {
const xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.responseType = 'blob'
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response)
}
}
xhr.send()
})
},
- 补充
this.Global.isIE()
是
isIE () {
if (!!window.ActiveXObject || 'ActiveXObject' in window) { return true } else { return false }
}
- 再补充 判断浏览器方式
myBrowser() {
var userAgent = navigator.userAgent // 取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf('OPR') > -1
if (isOpera) { return 'Opera' } // 判断是否Opera浏览器 OPR/43.0.2442.991
// if (userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 && !isOpera) { return 'IE' } // 判断是否IE浏览器
if (userAgent.indexOf('Firefox') > -1) { return 'FF' } // 判断是否Firefox浏览器Firefox/51.0
if (userAgent.indexOf('Trident') > -1) { return 'IE' } // 判断是否IE浏览器 Trident/7.0; rv:11.0
if (userAgent.indexOf('Edge') > -1) { return 'Edge' } // 判断是否Edge浏览器 Edge/14.14393
if (userAgent.indexOf('Chrome') > -1) { return 'Chrome' }// Chrome/56.0.2924.87
if (userAgent.indexOf('Safari') > -1) { return 'Safari' } // 判断是否Safari浏览器 AppleWebKit/534.57.2 Version/5.1.7 Safari/534.57.2
}
- 再补充 判断微信方式
export function envjudge () {
var isMobile = window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i) // 是否手机端
var isWx = /micromessenger/i.test(navigator.userAgent) // 是否微信
var isComWx = /wxwork/i.test(navigator.userAgent) // 是否企业微信
if (isComWx && isMobile) { // 手机端企业微信
return 'com-wx-mobile'
} else if (isComWx && !isMobile) { // PC端企业微信
return 'com-wx-pc'
} else if (isWx && isMobile) { // 手机端微信
return 'wx-mobile'
} else if (isWx && !isMobile) { // PC端微信
return 'wx-pc'
} else if (isMobile) { // 不是手机端
return 'isMobile'
} else {
return 'other'
}
}
- 补充–下载导出
downloadBlob (data, fileName) { // 下载导出
const blob = new Blob([data])
if (navigator.msSaveOrOpenBlob) {
navigator.msSaveOrOpenBlob(blob, fileName)
} else {
const elink = document.createElement('a')
elink.download = fileName
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
}
}
+ 调取接口
async exportLeads () {
const that = this
const params = {
surveyId: that.$route.query.surveyId
}
const res = await exportActivitiesCouponsTemplate(params)
that.Global.downloadBlob(res.data, '电子奖券链接模版.xlsx')
}
大家有什么好的方式欢迎补充 拜了个白
版权声明:本文标题:兼容ie的下载图片---判断浏览器方式--判断微信方式··下载导出 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1727373176a1111407.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论