需求背景:vue3專案點選下載按鈕,下載檔案,使用頁面新增a標籤方式會導致不是下載而是開啟檔案(圖片/pdf)
使用了直接動態新增a標籤的方法,還是會開啟預覽
const url = 'http://192.168.60.59:8888/fayuan/head/4b33a2a1-3911-4586-9878-50373a1fb852.jpg'
const a = document.createElement('a')
a.setAttribute('download', '')
a.setAttribute('href', url)
a.click() // 自執行點選事件
解決 :
setup() {
const down = () => {
const url = 'http://file.fayuan.com/tiaojie/wechatImg/website/ali-mini-operation.pdf'
const filename = '操作指南'
const x = new XMLHttpRequest()
x.open('GET', url, true)
x.responseType = 'blob'
x.onload = e => {
// 會建立一個 DOMString,其中包含一個表示引數中給出的物件的URL。這個 URL 的生命週期和建立它的視窗中的 document 繫結。這個新的URL 物件表示指定的 File 物件或 Blob 物件。
const url = window.URL.createObjectURL(x.response)
const a = document.createElement('a')
a.href = url
a.download = filename
a.click()
}
x.send()
}
return {
down
}
}