js怎么使用json导出excel

JavaScript如何使用JSON数据导出Excel文件详解

在Web开发中,将JSON数据导出为Excel文件是一个常见需求，本文将详细介绍几种在JavaScript中实现JSON导出Excel的方法，包括使用纯JavaScript方案和第三方库方案，帮助开发者根据项目需求选择最合适的实现方式。

纯JavaScript方案实现JSON导出Excel

纯JavaScript方案不需要额外依赖,适合简单场景的Excel导出需求。

1 使用Blob和URL.createObjectURL

function exportJsonToExcel(jsonData, fileName) {
  // 将JSON数据转换为CSV格式
  const csvContent = convertJsonToCsv(jsonData);
  // 创建Blob对象
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  // 创建下载链接
  const link = document.createElement('a');
  const url = URL.createObjectURL(blob);
  link.setAttribute('href', url);
  link.setAttribute('download', fileName || 'data.csv');
  link.style.visibility = 'hidden';
  // 触发下载
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}
// JSON转CSV辅助函数
function convertJsonToCsv(jsonData) {
  if (!jsonData || !jsonData.length) return '';
  // 提取表头
  const headers = Object.keys(jsonData[0]);
  // 创建CSV内容
  const csvRows = [
    headers.join(','), // 表头
    ...jsonData.map(row => 
      headers.map(header => {
        // 处理包含逗号或引号的值
        const value = row[header] === undefined ? '' : String(row[header]);
        return value.includes(',') || value.includes('"') 
          ? `"${value.replace(/"/g, '""')}"` 
          : value;
      }).join(',')
    )
  ];
  return '\ufeff' + csvRows.join('\n'); // 添加BOM以支持中文
}
// 使用示例
const data = [
  { name: '张三', age: 25, city: '北京' },
  { name: '李四', age: 30, city: '上海' }
];
exportJsonToExcel(data, '用户信息.csv');

2 优缺点分析

优点：

无需额外依赖,轻量级
适合简单数据导出
支持所有现代浏览器

缺点：

功能有限,无法设置Excel样式
导出的是CSV格式,非真正的Excel文件
复杂数据处理能力较弱

使用第三方库实现JSON导出Excel

对于更复杂的Excel导出需求,使用专门的库是更好的选择。

1 使用SheetJS (xlsx)

SheetJS是一个功能强大的Excel处理库,支持多种格式。

安装

npm install xlsx
# 或
yarn add xlsx

使用示例

import * as XLSX from 'xlsx';
function exportJsonToExcelWithSheetJS(jsonData, fileName) {
  // 创建工作簿
  const wb = XLSX.utils.book_new();
  // 将JSON数据转换为工作表
  const ws = XLSX.utils.json_to_sheet(jsonData);
  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
  // 生成Excel文件并下载
  XLSX.writeFile(wb, fileName || 'data.xlsx');
}
// 使用示例
const data = [
  { 姓名: '张三', 年龄: 25, 城市: '北京',入职日期: new Date('2020-01-15') },
  { 姓名: '李四', 年龄: 30, 城市: '上海',入职日期: new Date('2019-05-20') }
];
exportJsonToExcelWithSheetJS(data, '员工信息.xlsx');

高级用法：设置单元格样式

function exportWithStyles(jsonData, fileName) {
  const wb = XLSX.utils.book_new();
  const ws = XLSX.utils.json_to_sheet(jsonData);
  // 设置列宽
  ws['!cols'] = [
    { wch: 15 }, // 第一列宽度
    { wch: 10 }, // 第二列宽度
    { wch: 15 }  // 第三列宽度
  ];
  // 添加表头样式
  const range = XLSX.utils.decode_range(ws['!ref']);
  for (let C = range.s.c; C <= range.e.c; ++C) {
    const headerCell = XLSX.utils.encode_cell({ r: 0, c: C });
    if (!ws[headerCell]) continue;
    ws[headerCell].s = {
      font: { bold: true },
      fill: { fgColor: { rgb: 'FFFFAA00' } },
      alignment: { horizontal: 'center' }
    };
  }
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
  XLSX.writeFile(wb, fileName || 'styled_data.xlsx');
}

2 使用FileSaver.js + SheetJS组合

FileSaver.js可以更好地处理文件保存过程。

import { saveAs } from 'file-saver';
import * as XLSX from 'xlsx';
function exportWithFileSaver(jsonData, fileName) {
  const wb = XLSX.utils.book_new();
  const ws = XLSX.utils.json_to_sheet(jsonData);
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
  // 生成Excel文件的二进制数据
  const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
  // 使用FileSaver保存
  saveAs(new Blob([excelBuffer], { type: 'application/octet-stream' }), fileName || 'data.xlsx');
}

3 其他库选择

xlsx-populate：适合处理大型Excel文件，支持模板
exceljs：Node.js环境下的强大Excel处理库
table2excel：轻量级，适合简单表格导出

前端框架中的JSON导出Excel实现

1 React中的实现

import React from 'react';
import * as XLSX from 'xlsx';
const JsonToExcelExporter = ({ jsonData, fileName }) => {
  const handleExport = () => {
    const wb = XLSX.utils.book_new();
    const ws = XLSX.utils.json_to_sheet(jsonData);
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
    XLSX.writeFile(wb, fileName || 'data.xlsx');
  };
  return (
    <button onClick={handleExport}>
      导出Excel
    </button>
  );
};
// 使用示例
const App = () => {
  const data = [
    { name: 'Item 1', value: 100 },
    { name: 'Item 2', value: 200 }
  ];
  return (
    <div>
      <JsonToExcelExporter jsonData={data} fileName="react_export.xlsx" />
    </div>
  );
};

2 Vue中的实现

<template>
  <button @click="exportToExcel">导出Excel</button>
</template>
<script>
import * as XLSX from 'xlsx';
export default {
  props: {
    jsonData: {
      type: Array,
      required: true
    },
    fileName: {
      type: String,
      default: 'data.xlsx'
    }
  },
  methods: {
    exportToExcel() {
      const wb = XLSX.utils.book_new();
      const ws = XLSX.utils.json_to_sheet(this.jsonData);
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
      XLSX.writeFile(wb, this.fileName);
    }
  }
};
</script>

处理大数据量时的优化建议

当处理大量数据时,Excel导出可能会遇到性能问题，以下是几种优化方法：

分块处理：将大数据分成多个小批次处理
Web Worker：将Excel生成逻辑放到Web Worker中，避免阻塞UI
流式处理：使用流式API逐步生成Excel文件

// 使用Web Worker的示例
function exportLargeData(jsonData, fileName) {
  const worker = new Worker('excelExportWorker.js');
  worker.postMessage({
    action: 'export',
    data: jsonData,
    fileName: fileName
  });
  worker.onmessage = (e) => {
    if (e.data.action === 'download') {
      const link = document.createElement('a');
      link.href = e.data.url;
      link.download = e.data.fileName;
      link.click();
    }
  };
}
// excelExportWorker.js
self.onmessage = function(e) {
  if (e.data.action === 'export') {
    const { data, fileName } = e.data;
    const wb = XLSX.utils.book_new();
    const ws = XLSX.utils.json_to_sheet(data);
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
    const excelBuffer

企鹅直播企鹅直播足球直播爱奇艺直播爱奇艺足球直播足球直播足球直播