vue前端实现下载文件功能
作者：阿波拉
首先介绍一下我使用a标签方法碰到的错误：
点击下载后一直显示无法下载，更换浏览器也不行，后来找到了错误所在。
错误原因就是我把路径写在与我存图片的路径目录下面了 src/assets/... ,这样是不对的，应该把你需要下载的文件放在跟src同级的目录下或者放在publice目录里面，就是与你的网页图标文件favicon.ico以及index.html 这两个文件同级就好了，由于 public 目录下的文件可以直接通过 URL 访问，您可以简单地指定该文件的 URL,例如：
loadFile() {
let url = '/upload_template.csv'; // public 目录下的文件的 URL
let link = document.createElement('a'); // 创建一个 <a> 元素
link.href = url; // 设置链接的 href 属性为文件的 URL
link.download = 'upload_template.csv'; // 设置下载的文件名
link.style.display = 'none'; // 隐藏链接
document.body.appendChild(link); // 将链接添加到文档中
link.click(); // 模拟点击链接以触发下载
document.body.removeChild(link); // 下载完成后移除链接
}第一种：
使用<a>标签下载文件：你可以在Vue组件中使用<a>标签创建一个链接，设置href属性为文件的URL，然后使用download属性指定文件名。这样点击链接时会触发文件下载。
代码如下:
<a :href="fileUrl" rel="external nofollow" download="filename">下载文件</a>
export default {
data() {
return {
fileUrl: '/path/to/file.pdf',
};
},
};第二种：
通过window.open()下载文件：可以通过打开一个新窗口来实现文件下载。
window.open就是打开了一个新网页直接在新网页访问文件地址了，只要访问文件地址，就能下载文件。这时候后端返回的是文件流直接渲染,不需要url再打开下载了
downloadFile() {
window.open('/path/to/file.pdf', '_blank');
},第三种：
通过创建iframe下载文件：创建一个隐藏的iframe，并设置其src属性为文件的URL，这样文件将会在iframe中加载并自动下载。
downloadFile() {
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = '/path/to/file.pdf';
document.body.appendChild(iframe);
},第四种：
通过向后端发送POST请求获取文件流并使用Blob格式处理文件下载：在这种方法中，前端向后端发送POST请求，后端返回文件流，前端通过Blob对象处理并下载文件。
downloadFile() {
axios({
url: '/download',
method: 'POST',
responseType: 'blob',
data: {
// 可以根据需要传递参数
},
}).then((response) => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'filename.pdf');
document.body.appendChild(link);
link.click();
});
},如果后端提供的下载接口是get类型，可以直接使用方法一和二和三，简单又便捷；当然如果想使用方法四也是可以的，不过感觉有点舍近求远了。
如果后端提供的下载接口是post类型，就必须要用方法四了。
第五种：
通过Ajax请求下载文件：使用Vue的HTTP库（如axios）发送GET请求来获取文件数据，然后使用Blob对象创建一个URL，并将其赋给一个隐藏的<a>标签，最后模拟点击这个链接来下载文件。
import axios from 'axios';
export default {
methods: {
downloadFile() {
axios({
url: '/path/to/file.pdf',
method: 'GET',
responseType: 'blob',
}).then((response) => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'filename.pdf');
document.body.appendChild(link);
link.click();
});
},
},
};到此这篇关于vue前端实现下载文件功能的文章就介绍到这了,更多相关vue下载文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！