前端导出excel表格 blob

最新推荐文章于 2024-03-08 18:47:22 发布

liminla!

最新推荐文章于 2024-03-08 18:47:22 发布

阅读量324

点赞数 3

文章标签：前端 excel javascript

本文链接：https://blog.csdn.net/m0_45857808/article/details/136237300

版权

1、在utils/request中写入公共方法

import axios from "axios";
// 获取axios实例
const instance = axios.create({
    // 请求根路径(根据环境不同自动切换)
    // baseURL: process.env.VUE_APP_BASE_URL,
    // 请求超时时间
    timeout: 1000 * 60,
    // 请求头
    headers: {
      post: {
        "Content-Type": "application/json",
      },
    },
  });

  //自定义接口请求
export const sendDefReq = async (method, option) => {
    const defaultOption = {};
    // const res = await axios.request(
    //   Object.assign(defaultOption, option)
    // );
  
    const res = instance({ method: "post", ...option });
    return res;
  };

2、在fxtrData写公共接口

import { sendDefReq } from '@/utils/request'
export const exportExcel = (method, option) => sendDefReq(method, option)

使用

<script>
import {
  exportExcel,
} from "@/api/fxtrData";
export default {
  data() {
    return {
     
    };
  },
  methods: {
    handleExport() {
        exportExcel("post", {
          url: "/business/seSoilInfoStatistics/export/exportExcel",
          method: "post",
          headers: {
            Authorization: getStore(TOKEN_NAME),
            "Content-Type": "application/json",
          }, //设置请求头
          data: data,
          responseType: "blob",
        })
          .then((res) => {
            const blob = new Blob([res.data], { type: "text/plain" }); //处理文档流
            let filename = window.decodeURI(
              res.headers["content-disposition"].split("=")[1]
            );
            const elink = document.createElement("a");
            elink.download = filename;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          })
          .finally(() => {
          });
      },
  },
};
</script>