在谷歌浏览器中,已经设置“下载PDF文件,而不是在chrome中自动打开它们”选项为关闭状态时,前端方式实现el-link谷歌浏览器点击超链接强制下载PDF文件而不是预览。注意,download属性无效无效
时间: 2024-05-12 16:21:14 浏览: 195
在浏览器中打开PDF文件
可以考虑使用Blob对象和URL.createObjectURL方法来实现点击超链接强制下载PDF文件而不是预览。
具体实现步骤如下:
1. 在el-link组件中添加点击事件处理函数,用于生成Blob对象和URL.createObjectURL方法创建URL。
2. 通过a标签的download属性设置文件名,将URL设置为a标签的href属性。
3. 通过a标签的click方法模拟用户点击,从而实现强制下载。
示例代码如下:
```html
<template>
<el-link @click="downloadPDF">下载PDF文件</el-link>
</template>
<script>
export default {
methods: {
downloadPDF() {
// 获取PDF文件内容
const pdfContent = 'PDF文件内容';
// 创建Blob对象
const blob = new Blob([pdfContent], { type: 'application/pdf' });
// 创建URL
const url = URL.createObjectURL(blob);
// 创建a标签
const link = document.createElement('a');
link.href = url;
link.download = 'PDF文件名.pdf';
// 模拟点击
link.click();
}
}
}
</script>
```
需要注意的是,在文件下载完成后,应该及时释放URL,以避免占用过多内存空间,代码如下:
```javascript
// 释放URL
URL.revokeObjectURL(url);
```
阅读全文