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

目录

摘要

对于前端来说，下载文件是一个特别常见的需求。但是前端要根据后端返回的内容，来选择下载文件的具体方法。通常情况下，后端要么给你

返回文件的网络地址

，要么

返回文件流

。返回地址一般用在静态文件上，比如图片和音视频资源等；返回文件流一般用在动态文件上，前端传入参数，后端返回不同的excel统计表等。

一、后端返回文件地址

1. a标签

<ahref="http://xxx.docx">下载文件</a>

通过download属性可以修改文件名（前提：href指定的地址必须是同源路径，否则无效）

<ahref="xxx"download="自定义文件名.doc">下载文件</a>

2. 指定location的href属性

<!-- html --><div@click="downloadFile">下载文件</div>

// jsfunctiondownloadFile(){
    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 =newBlob([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.jsexportfunctiondownloadFile(query){returnrequest({url:'/general/general/downloadFile',method:'get',params: query,responseType:"blob"})}

3）使用

<!-- html --><div@click="downloadDoc(item)">下载</div>

// jsdownloadDoc(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 --下载文件的APIexportconstdownloadExcel=(query, fileName)=>{request({url:'/general/downloadFile',method:'get',params: query,responseType:"blob"}).then(fileStream=>{const blob =newBlob([fileStream],{type:'application/vnd.ms-excel'});saveAs(blob, fileName +'.xlsx');//注意：文件名需要携带后缀})}

3）使用

<!-- html --><divv-for="(item, i) in dialogForm.reportUrl":key="'file-item' + i"@click="downloadDoc(item)"class="file-item">
  {{ item.name }}
</div>

// jsdownloadDoc(item){downloadExcel({id: item.id },item.name).then(()=>{});}