封装下载excel全局插件

插件怎么挂载到全局,全局通过  "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二进制文件的接口