【前端】前端插件/后台数据的导出文件

登陆木星

已于 2023-05-12 22:10:48 修改

阅读量100

点赞数

分类专栏：前端学习文章标签：前端 javascript 开发语言

于 2023-05-11 14:14:29 首次发布

本文链接：https://blog.csdn.net/weixin_51508961/article/details/130620273

版权

前端学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章介绍了两种在前端实现文件导出的方法。一种是通过调用后台接口，设置响应类型为Blob，然后创建下载链接进行文件下载。另一种使用PapaParse库，将前端数据转换为CSV格式并直接触发下载。这两种方式都涉及到文件内容的处理和URL对象的管理。

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

文章目录

- 1. 拥有后台数据
- 2. 前台导出文件

1. 拥有后台数据

// 导出为excel
export function exportList() {
  return request({
    url: api + "后台接口",
    method: "get",
    // 设置为blob格式
    responseType: "blob",
  });
}

点击按钮触发事件

    handleExport() {
      exportList().then((res) => {
        console.log(res); // 后台会返回一个串乱码
        this.$message.success("正在下载中!");
        let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
        let url = URL.createObjectURL(blob);
        let a = document.createElement("a");
        a.href = url;
        a.download = "分类表格";
        a.click();
        // 释放这个临时的对象url
        window.URL.revokeObjectURL(url);
      });
    },

2. 前台导出文件

导出文件 papaparse

npm install papaparse

import Papa from “papaparse”;

点击按钮触发事件

    // 导出excel表
    exportExcel() {
      var csv = Papa.unparse(this.data); //data数据 这个数据是el-table中的数据
      //定义文件内容，类型必须为Blob 否则createObjectURL会报错
      let content = new Blob([csv]);//后缀
      //生成url对象
      let urlObject = window.URL || window.webkitURL || window;
      let url = urlObject.createObjectURL(content);
      //生成<a></a>DOM元素
      let el = document.createElement("a");
      //链接赋值
      el.href = url;
      el.download = "文件导出.csv";//后缀
      //必须点击否则不会下载
      el.click();
      //移除链接释放资源
      urlObject.revokeObjectURL(url);
    },