(vue)文件流导出表格

最新推荐文章于 2024-07-03 18:05:25 发布

nyf_unknown

最新推荐文章于 2024-07-03 18:05:25 发布

阅读量135

点赞数

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44754635/article/details/130620629

版权

VUE 专栏收录该内容

189 篇文章 2 订阅

订阅专栏

文章介绍了在Vue项目中，如何使用axios处理后台返回的文件流来导出表格，包括通过设置responseType为blob，创建Blob对象，以及利用a标签实现文件下载的方法。提供了post和get两种请求方式的示例代码。

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

(vue)文件流导出表格

后台返回

在这里插入图片描述

效果
在这里插入图片描述

前端代码

写法一

api.js

// 导出
export function exportPublicityList(data) {
  return request({
    url: '/.../exportPublicityList',
    method: 'post',
    data,
    responseType: 'blob'
  })
}
//若是get方法的话 
export function exportPublicityList(data) {
  return request({
    url: '/.../exportPublicityList',
    method: 'get',
    params: data,//参数放在params中
    responseType: 'blob'
  })
}

// 导出
exportList() {
	const data = this.promulgateForm; 
	exportPublicityList(data).then((res) => {
	  const data = res;
	  // 创建一个新的url，此url指向新建的Blob对象
	  const url = window.URL.createObjectURL(new Blob([data]));
	  // 创建a标签，并隐藏a标签
	  const link = document.createElement("a");
	  link.style.display = "none";
	  // a标签的href属性指定下载链接
	  link.href = url;
	  // setAttribute() 方法添加指定的属性，并为其赋指定的值
	  // 后缀格式.csv/.xsls要和需要和后端返回格式相同，这里以.csv为例
	  link.setAttribute(
	    "download",
	    this.promulgateForm.declareBatch + "公示名单" + ".xlsx"
	  );
	  document.body.appendChild(link);
	  link.click();
	});
}

写法二

// 导出
exportList() {
	const data = this.promulgateForm; 
    axios({
      method: "post",
      url: "/api/.../exportPublicityList",
      data, // Object 导出接口所需要的参数对象
      headers: { Content: "application/json " },
      responseType: "blob",
    })
      .then((res) => {
        const blob = new Blob([res.data], {
          type: "application/vnd.ms-excel",
        });
        const fileName = this.promulgateForm.declareBatch + "公示名单.xlsx";
        const linkNode = document.createElement("a");

        linkNode.download = fileName; // a标签的download属性规定下载文件的名称
        linkNode.style.display = "none";
        linkNode.href = URL.createObjectURL(blob); // 生成一个Blob URL
        document.body.appendChild(linkNode);
        linkNode.click(); // 模拟在按钮上的一次鼠标单击

        URL.revokeObjectURL(linkNode.href); // 释放URL 对象
        document.body.removeChild(linkNode);
      })
      .catch((e) => {
        console.log("导出失败");
      });
}

写法三

// 导出
exportList() {
	const data = this.promulgateForm; 
      axios({
        url: `/api/.../exportPublicityList`,
        // method: "get",
        // params: data,
        method: "post",
        data: data,
        // dataType: "json",
        // headers: { "Content-type": "application/json;" }, //它声明了请求体中的数据将会以json字符串的形式发送到后端
        headers: { Content: "application/json " },
        responseType: "blob", //判断是下载成功返回了二进制流还是失败返回了对象（比如服务端拒绝，返回对象，前端如果依然按二进制流处理会导致下载undefined文件），还可以是
      }).then((res) => {
        console.log(res);
        const xlsx = "application/vnd.ms-excel";
        const blob = new Blob([res.data], { type: xlsx }); //转换数据类型
        const a = document.createElement("a"); // 转换完成，创建一个a标签用于下载
        a.download = this.promulgateForm.declareBatch + "公示名单.xlsx";
        a.href = window.URL.createObjectURL(blob);
        a.click();
        a.remove();
      });
}