插件怎么挂载到全局,全局通过 "this.+封装的插件名" 调用插件,上一调博客有详细教程介绍
使用背景
后端给一个接口返回的是二进制文件,封装一个全局方法,在vue文件中直接通过一行代码下载excel文件
教程
第一步:确保src下的plugins文件夹已经挂载到全局
第二步:在plugins下创建一个js文件
第三步/:代码如下:
import axios from 'axios'
import { getToken } from '@/utils/auth'//该方法为获取token的方法,可根据自己项目中获取token的方法来引入正确的方法
const baseURL = process.env.VUE_APP_BASE_API
export default {
//传一个url
name(url){ //该方法名可以自定义
axios({
url: baseURL + url,
method: "GET",
responseType: "blob",
headers: { Authorization: "Bearer " + getToken() },
})
.then((response) => {
const filename = this.getFilenameFromContentDisposition(
response.headers["content-disposition"]
);
const blob = new Blob([response.data], {
type: response.headers["content-type"],
});
const link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = decodeURI(filename) || "yourfile.xls";//后端返回的有名字用后端的,没名字默认自定的名字
link.click();
})
.catch((error) => {
console.error("Error downloading file:", error);
});
},
// 从 Content-Disposition 中提取文件名的辅助函数
getFilenameFromContentDisposition(contentDisposition) {
const match = contentDisposition.match(/filename="(.*)"/);
return match ? match[1] : null;
}
}
第四步:plugins的index.js文件中引入刚才写的js文件,示例如下图:
使用示例
假设我创建的js名称为download则可以在全文通过以下一段代码直接下载后端返回的excel
this.$download.name("url") //url为后端给的下载excel二进制文件的接口