vue+element+admin模板通过接口下载文件功能

工作上的需求，需要在后台模板加上一个按钮，点击他触发接口，触发下载文件的功能。

由于第一次尝试这个模板写后台管理系统，所以引发了一些莫名其妙的问题。

所以在此解决，并记录，并给大家做参考

后台只给了一个接口，和需要传输过去的数据，并告知是一个get请求

我们通过axios来对接口发起请求

首先我们通过全局引入axios，在main.js文件中输入以下代码

import axios from 'axios'
Vue.prototype.$axios = axios

这样我们后面在发送axios相关的请求时，只需要在页面中输入this.$axios即可

随后我们在页面中对接口进行请求

以下时html中按钮的代码

<el-button type="success" class="el-btn" @click="btnExport">导出</el-button>

以下是js中对接口进行请求的代码

this.$axios({
url:'/api/v1/ImPortJieAnShenCha',
method:'get',
params:obj,
headers:{
'X-Requested-With':'XMLHttpRequest',
'Authorization' : 'Bearer ' + localStorage.getItem("token"),
},
responseType: 'blob'
}).then(response=>{
if(response && response.status === 200){
const data = response.data
const blob = new Blob([data], {
type: response.headers['content-type']
})
const objectUrl = URL.createObjectURL(blob);
const link = document.createElement('a');
const fileName = response.headers["content-disposition"].match(/filename=(S*).docx/)[1];
let formatString = escape(fileName)
let fname = decodeURI(formatString) + '.docx'
link.href = objectUrl;
link.setAttribute("download",fname);
document.body.appendChild(link)
link.click();
}
})

代码基本上就是上面的部分，但是我通过这些代码生成了下载链接是生成了，但是出现一个很大的问题，这个模板有用到mock.js，所以请求会被拦截，由我所写的XMLHttpRequest直接变成了mockXMLHttpRequest，所以我下载的文件一打开全是乱码

由于我还要用到mockjs模拟数据，所以我在main.js中把相关代码进行修改

改变的代码如下，之前的：

if (process.env.NODE_ENV === 'production') {
const { mockXHR } = require('../mock')
mockXHR()
}

修改为如下的

if (process.env.NODE_ENV === "production"||process.env.NODE_ENV === 'development') {
const { mockXHR } = require("../mock");
mockXHR();
}

经过上面的修改后我的文件内容就恢复正常了，希望可以帮助到大家吧

最后

以上就是眯眯眼枫叶为你收集整理的vue+element+admin模板通过接口下载文件功能的全部内容，希望文章能够帮你解决vue+element+admin模板通过接口下载文件功能所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。