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

JN-Lin

已于 2022-12-29 16:17:34 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2022-12-28 17:28:12 首次发布

本文链接：https://blog.youkuaiyun.com/jinann0/article/details/128471413

本文记录了在Vue+Element的后台管理模板中实现通过接口下载文件的解决方案。遇到的问题包括axios请求被Mock.js拦截导致文件下载乱码。通过在main.js中调整Mock.js设置，成功避免请求被拦截，使文件正常下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

后台只给了一个接口，和需要传输过去的数据，并告知是一个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();
}

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