需求背景: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
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。