简单封装一个导出方法

最新推荐文章于 2024-06-28 14:33:15 发布

*圆子

最新推荐文章于 2024-06-28 14:33:15 发布

阅读量341

点赞数 4

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/y0040327/article/details/136742546

版权

本文介绍了如何在Vue项目中使用axios进行异步数据获取，封装导出函数，用于从/api/settlement/api/reconciliation/record/daily/export接口下载Excel文件，提供自定义文件名选项。

摘要由CSDN通过智能技术生成

import axios from "axios"
import { getToken } from "@/utils/auth"


/** 导出 */
export function exportData(url, query, filename) {
  axios({
    method: "get",
    url: process.env.VUE_APP_BASE_API + url,
    responseType: "blob",
    params: query || {},
    headers: {
      Authorization: getToken(),
    },
  }).then(res => {
    // console.log(res);
    // 创建一个下载链接
    const downloadLink = document.createElement("a");
    downloadLink.href = URL.createObjectURL(res.data);

    if (filename) {
      downloadLink.download = filename
    } else {
      // 设置下载的文件名为后台返回的文件名
      const contentDisposition = res.headers["content-disposition"];
      const filenameMatch = contentDisposition.match(/filename=(.+)$/);
      const file = filenameMatch ? filenameMatch[1] : "download.xlsx";
      downloadLink.download = decodeURIComponent(file);
    }

    // 触发下载
    downloadLink.click();

    // 清除创建的下载链接
    URL.revokeObjectURL(downloadLink.href);
  }).catch((error) => {
    console.error("下载 Excel 文件出错:", error);
  })
}

先创建一个utils.js文件，封装一段js导出代码；

 import { exportData } from "../utils";


/** 导出 */
    exportData() {
      // @TODO
      const filename = `差错明细${formatNow("YYYY-MM-DD")}.xlsx`;
      const query = {...this.payload}
      delete query.pageNum
      delete query.pageSize
      exportData(
        "/api/settlement/api/reconciliation/record/daily/export",
        query,
        filename
      );
    },

再向所用组件引用此方法即可，query代表需要单独传递的参数；