<el-button type="primary" round @click="templateDownLoad()">下載模板</el-button>
//當后端返回的是文件的時候,我們怎么在各大瀏覽器實現下載功能
//后端定義的是傳0的時候,我們下載模板
templateDownLoad() {
getTemplateUrl('0')
.then(res => {
const d = `${BASE_HOST}${BASE_PARJECT_NAME}/下載接口/0`
const url = d.replace(/\"/g, '')
const alink = document.createElement('a')
document.body.appendChild(alink)
alink.style.display = 'none'
alink.href = url
var explorer = window.navigator.userAgent
if (explorer.indexOf('Firefox') >= 0) {
alink.download = getTemplateUrl
const clickEvent = new MouseEvent('click')
alink.dispatchEvent(clickEvent)
} else if (explorer.indexOf('Safari') >= 0) {
alink.target = '_blank'
alink.addEventListener('click', event => {}, false)
const clickEvent = new MouseEvent('click', {
altKey: true
})
alink.dispatchEvent(clickEvent)
} else {
alink.download = getTemplateUrl
alink.target = '_blank'
alink.addEventListener('click', event => {}, false)
const clickEvent = new MouseEvent('click', {
altKey: true
})
alink.dispatchEvent(clickEvent)
}
})
.catch(error => {
console.log('error', error)
})
},
在ie瀏覽器上出現了兼容性的問題,ie瀏覽器不支持MouseEvent事件,這個時候,只需要做ie對事件的兼容性即可
beforeCreate() {
(function(window) {
try {
new MouseEvent('test')
return false // No need to polyfill
} catch (e) {
// Need to polyfill - fall through
}
var MouseEvent = function(eventType, params) {
params = params || { bubbles: false, cancelable: false }
var mouseEvent = document.createEvent('MouseEvent')
mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
return mouseEvent
}
MouseEvent.prototype = Event.prototype
window.MouseEvent = MouseEvent
})(window)
},