前端数据导出为excel表的两种方式（纯前端和后端返回文件流）

最新推荐文章于 2025-05-14 17:01:22 发布

原创最新推荐文章于 2025-05-14 17:01:22 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue #前端

vue 专栏收录该内容

2 篇文章

订阅专栏

文章介绍了如何使用SheetJS库在前端实现点击按钮自动下载为Excel表格的功能。通过jsonToSheetXlsx函数将数据转换成工作簿，然后利用axios从后端获取文件流，创建下载链接，实现文件下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求说明：展示在页面上的表格点击导出按钮自动下载为excel表格

纯前端实现：

此方法用到是的一个数据处理库SheetJS Overview | SheetJS Community Edition

使用方法在此未作说明

1.给导出按钮绑定函数customHeader

function customHeader() {
  jsonToSheetXlsx({
    data: data.value,
    header: {
      returnDateTime: '应还车时间',
      orderNo: '订单编号',
      userName: '姓名',
      number: '手机号',
      carType: '车辆类型',
      licensePlate: '车牌号码',
      account: '账户金额',
    },
    filename: '订单到期数明细.xlsx',
  });
}

组件库里封装jsonToSheetXlsx函数

import * as xlsx from 'xlsx';
import type { WorkBook } from 'xlsx';
const { utils, writeFile } = xlsx;
import type { JsonToSheet } from './typing';
const DEF_FILE_NAME = 'excel-list.xlsx';
export function jsonToSheetXlsx<T = any>({
  data,
  header,
  filename = DEF_FILE_NAME,
  json2sheetOpts = {},
  write2excelOpts = { bookType: 'xlsx' },
}: JsonToSheet<T>) {
  const arrData = [...data];
  if (header) {
    arrData.unshift(header);
    json2sheetOpts.skipHeader = true;
  }

  const worksheet = utils.json_to_sheet(arrData, json2sheetOpts);

  /* add worksheet to workbook */
  const workbook: WorkBook = {
    SheetNames: [filename],
    Sheets: {
      [filename]: worksheet,
    },
  };
  /* output format determined by filename */
  writeFile(workbook, filename, write2excelOpts);
  /* at this point, out.xlsb will have been downloaded */
}

./typing 文件

import type { JSON2SheetOpts, WritingOptions} from 'xlsx';
export interface JsonToSheet<T = any> {
  data: T[];
  header?: T;
  filename?: string;
  json2sheetOpts?: JSON2SheetOpts;
  write2excelOpts?: WritingOptions;
}

后端返回文件流

给导出按钮绑定函数customHeader

function customHeader() {

  axios({
    url: '后端接口',
    headers: {
      'Content-Type': 'application/json',
      Authorization: Authorization.value//携带token
    },
    responseType: 'blob',
  }).then(res => {
    let a = document.createElement("a");
    let blob = new Blob([res.data], { type: ".xlsx" });
    let objectUrl = URL.createObjectURL(blob);
    a.setAttribute("href", objectUrl);
    a.setAttribute("download", "订单到期明细.xlsx");
    a.click();
  }).catch((error) => {
    console.log(error);
  })
}