html - Vue/HTML/JS 如何使用下载标签将文件下载到浏览器
问题描述
这个问题与提供的其他答案不同,因为我的问题集中在 VUE 以及 VUE 是否也有办法阻止默认方法。
这个问题更具体到 HTML 5“下载”以及 :href 的 VUE 绑定以及为什么它不能阻止默认浏览器在新选项卡中打开文件的行为。
预期行为:将文件下载到浏览器
实际行为:在新选项卡中打开文件
例外:只有图像、pdf 和浏览器兼容文件在新选项卡中打开,其他文件(如 .exe)正常下载 - 为什么会这样,这种行为可以在 html 中更改吗?
添加 target="_blank" 并不能解决问题
<a :href="downloadById(item.url)" download>Download</a>
单击上面的链接时,文件会在新的浏览器选项卡中打开,我需要防止这种默认行为并在单击时强制下载。假设 HTML 5 标签“下载”似乎无法解决这个问题。
Chrome 最近弃用了用于跨域下载的下载标签表单。vue 是否有一个修饰符来防止这种默认值?有没有其他方法可以用 javascript 或 html 下载文件?
一种建议的解决方案是将 URL 读取为 arrayBuffer,然后在 DOM 中创建一个新的 blob,然后创建一个锚元素并单击它。但是强制下载文件似乎很棘手。
我相信他们必须是从 URL 下载文件的更清洁的解决方案,这是一个微不足道的问题,希望有一个简单的解决方案。
谢谢。
解决方案
您可以将文件作为 blob 获取并以相同的方式提供,不会有导致 CORS 问题的请求。
模板
<a
:href="item.url"
v-text="item.label"
@click.prevent="downloadItem(item)" />
Vue
methods: {
downloadItem ({ url, label }) {
Axios.get(url, { responseType: 'blob' })
.then(response => {
const blob = new Blob([response.data], { type: 'application/pdf' })
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = label
link.click()
URL.revokeObjectURL(link.href)
}).catch(console.error)
}
}
注意:我在示例中使用了 Axios,但这不是必需的,为了简单起见,blob 的 mime 类型是硬连线的。
推荐阅读
- gradle - 尝试构建此存储库/代码时出现这些错误?
- ios - HealthKit 后台交付权利 iOS 15
- php - 基于 entityUid 字段的 Doctrine OneToMany 关系
- swift - 针对多个 CA 的 Alamofire 5 自定义 SSL 验证
- python - Locust - 在 python 中获取统计信息
- xml - 需要一个宏来使用 VBA 搜索和替换 XML 中的数据
- mysql - 指定的数据目录 /var/lib/mysql/ 不可用。您可以删除服务器添加到其中的所有文件
- javascript - 如何在数据表服务器端处理连接表中使用过滤?
- sql - 为什么 GETDATE() 函数在 IF 条件下不起作用?
- javascript - 如何在Javascript中执行异步代码