前端实现下载文件的方法汇总

---

摘要

对于前端来说，下载文件是一个特别常见的需求。但是前端要根据后端返回的内容，来选择下载文件的具体方法。通常情况下，后端要么给你返回文件的网络地址，要么返回文件流。返回地址一般用在静态文件上，比如图片和音视频资源等；返回文件流一般用在动态文件上，前端传入参数，后端返回不同的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，封装下载文件的方法

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）使用

<!-- 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(() => {});
}