在web端的管理系统中常会用到的功能就是下载文件(包含excel、word、txt等),今天我就来说一说我是如何实现的。
下载有两种形式,一种是后台接口直接返回下载的路径,根据路径下载,另一种是后台接口返回流文件(一堆乱码,如下图所示),我们根据blob来下载。本篇文章主要介绍的是blob下载文件。下面就来具体说说是如何是现实:
1、下载blob文件需要知道文件对应格式的type,所以要明确下载文件格式(以word、excel、txt为例)
文件后缀 | blob对应的type |
.doc | application/msword |
.docx | application/vnd.openxmlformats-officedocument.wordprocessingml.document |
.xls | application/vnd.ms-excel |
.xlsx | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet |
.txt | text/plain |
2、知道了所需要下载的文件格式后,我们就可以写了,直接上代码
<template>
<div>
<el-button type="primary" @click="downloadFile" size="medium" plain icon="el-icon-download">下载</el-button>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'Test',
data() {
return {};
},
methods: {
downloadFile() {
let url_post = '接口地址';
//post方式,param为所需要传的参数,
// responseType: 'arraybuffer'一定要写,否则下载的文件会出现乱码
axios
.post(url_post, param, { responseType: 'arraybuffer' })
.then(res => {
let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }); //type为所需要下载的文件格式,以xls文件为例
//浏览器兼容,Google和火狐支持a标签的download,IE不支持
if (window.navigator && window.navigator.msSaveBlob) {
//IE浏览器、微软浏览器
/* 经过测试,微软浏览器Microsoft Edge下载文件时必须要重命名文件才可以打开,
IE可不重命名,以防万一,所以都写上比较好 */
window.navigator.msSaveBlob(blob, '文件.xls');
} else {
//其他浏览器
let link = document.createElement('a'); // 创建a标签
link.style.display = 'none';
let objectUrl = URL.createObjectURL(blob);
link.href = objectUrl;
link.click();
URL.revokeObjectURL(objectUrl);
}
})
.catch(err => {
this.$message.error(err.message);
});
}
}
};
</script>
好了,今天就分享到这里,see you。。。