摘要
对于前端来说，下载文件是一个特别常见的需求。但是前端要根据后端返回的内容，来选择下载文件的具体方法。通常情况下，后端要么给你返回文件的网络地址，要么返回文件流。返回地址一般用在静态文件上，比如图片和音视频资源等；返回文件流一般用在动态文件上，前端传入参数，后端返回不同的excel统计表等。
一、后端返回文件地址
1. a标签
<a href="http://xxx.docx">下载文件</a>
通过download属性可以修改文件名（前提：href指定的地址必须是同源路径，否则无效）
<a href="xxx" download="自定义文件名.doc">下载文件</a>
2. 指定location的href属性
<!-- html -->
<div @click="downloadFile">下载文件</div>
// js
function downloadFile(){
location.href = "http://xxx.doc";
}
3. window.open
window.open("http://xxx.doc","_self");
_self – 在当前窗口打开链接
_blank – 默认的，在新窗口打开链接
4. download.js*
使用以上三种方法，如果是图片、视频、pdf 等格式的文件会直接在浏览器预览，而不是像 docx 、xlsx 一样直接下载。download.js则可以不区分文件格式，全部实现下载。
1）下载
yarn add downloadjs
2）在main.js中引入downloadjs，全局注册download方法
import download from "downloadjs";
Vue.prototype.$download = download;
3）使用
this.$download(url, name);
二、后端返回文件流
1. axios
1）在响应拦截器里书写下载文件的逻辑
响应头需要后端配合设置，不同的数据格式，返回的响应头不一样
// request.js
axios.interceptors.response.use((response) => {
// 通过响应头判断是否需要下载文件
if (['application/x-msdownload;charset=utf-8', 'application/vnd.ms-excel'].includes(response.headers['content-type'])) {
const blob = new Blob([response.data], {
type: "application/octet-stream; charset=utf-8"
});
let filename = decodeURIComponent(response.headers['filename']);
const link = document.createElement('a');
link.style.display = 'none';
link.download = filename;
link.href = URL.createObjectURL(blob);
document.body.appendChild(link);
link.click();
URL.revokeObjectURL(link.href);
document.body.removeChild(link);
return;
}
}
2）新建api.js，封装请求
// api.js
export function downloadFile(query) {
return request({
url: '/general/general/downloadFile',
method: 'get',
params: query,
responseType: "blob"
})
}
3）使用
<!-- html -->
<div @click="downloadDoc(item)">下载</div>
// js
downloadDoc(file) {
downloadFile({ name: file.name, url: file.url }).then(() => {});
},
2. file-saver
1）安装依赖包
npm install file-saver --save
2）创建一个文件file.js，封装下载文件的方法文章来源：https://www.toymoban.com/news/detail-491388.html
import request from '@/common/js/request'// 封装后的axios请求
import {saveAs} from 'file-saver'// saveAs --下载文件的API
export const downloadExcel = (query, fileName) => {
request({
url: '/general/downloadFile',
method: 'get',
params: query,
responseType: "blob"
}).then(fileStream => {
const blob = new Blob([fileStream],{ type: 'application/vnd.ms-excel' });
saveAs(blob, fileName + '.xlsx'); //注意：文件名需要携带后缀
})
}
3）使用文章来源地址https://www.toymoban.com/news/detail-491388.html
<!-- html -->
<div
v-for="(item, i) in dialogForm.reportUrl"
:key="'file-item' + i"
@click="downloadDoc(item)"
class="file-item"
>
{{ item.name }}
</div>
// js
downloadDoc(item) {
downloadExcel ({ id: item.id },item.name).then(() => {});
}
到了这里，关于前端实现下载文件的方法汇总的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
