快捷導(dǎo)航

Vue使用xlsx插件導(dǎo)出excel文件的詳細(xì)指南

更新時(shí)間：2025年04月04日 09:08:00 作者：zoahxmy0929

第三方庫xlsx提供了強(qiáng)大的功能來處理Excel文件,它可以簡化導(dǎo)出Excel文件這個(gè)過程,下面小編就來為大家詳細(xì)講講Vue如何通過xlsx導(dǎo)出excel,需要的小伙伴可以了解下

安裝與引入

安裝

npm install xlsx
npm install file-saver
# 或者
yarn add xlsx
yarn add file-saver

引入

import * as XLSX from 'xlsx';
import FileSaver from 'file-saver'

基本功能

讀取 Excel 文件

// 讀取文件內(nèi)容
const workbook = XLSX.readFile('path/to/file.xlsx');

// 獲取第一個(gè)工作表
const firstSheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[firstSheetName];

// 將工作表轉(zhuǎn)換為 JSON 格式
const data = XLSX.utils.sheet_to_json(worksheet);
console.log(data);

寫入 Excel 文件

// 創(chuàng)建工作簿
const workbook = XLSX.utils.book_new();

// 創(chuàng)建工作表
const data = [
  ['Name', 'Age', 'Email'],
  ['Alice', 25, 'alice@example.com'],
  ['Bob', 30, 'bob@example.com']
];
const worksheet = XLSX.utils.aoa_to_sheet(data);

// 將工作表添加到工作簿
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

// 導(dǎo)出文件
XLSX.writeFile(workbook, 'output.xlsx');

高級功能

自定義樣式

// 創(chuàng)建樣式
const ws = XLSX.utils.aoa_to_sheet(data);
const wscols = [
  { wch: 15 },
  { wch: 10 },
  { wch: 30 }
];
ws['!cols'] = wscols;

// 添加樣式
const cell = ws['A1'];
cell.s = {
  font: { bold: true },
  fill: { fgColor: { rgb: 'FF0000' } }
};

合并單元格

// 合并單元格
ws['!merges'] = [
  { s: { r: 0, c: 0 }, e: { r: 0, c: 2 } } // 合并 A1:C1
];

添加水印

// 添加水印
XLSX.utils.sheet_add_aoa(ws, [['Watermark']], { origin: -1 });

使用示例

導(dǎo)出數(shù)據(jù)到 Excel 方法

import * as XLSX from 'xlsx';
import FileSaver from 'file-saver';

export function exportJsonToExcel(options) {
  // 默認(rèn)配置
  const defaultOptions = {
    sheetName: 'Sheet1',
    autoWidth: true,
    watermark: ''
  };
  const { header, data, filename, sheetName, autoWidth, watermark } = {
    ...defaultOptions,
    ...options
  };

  // 1. 創(chuàng)建工作簿
  const wb = XLSX.utils.book_new();

  // 2. 處理數(shù)據(jù)（添加表頭）
  const exportData = [header, ...data];

  // 3. 創(chuàng)建工作表
  const ws = XLSX.utils.aoa_to_sheet(exportData);

  // 4. 自動(dòng)設(shè)置列寬
  if (autoWidth) {
    const colWidths = header.map((_, colIndex) => {
      return {
        wch: Math.max(
          ...exportData.map(row => {
            const cellValue = row[colIndex];
            if (cellValue == null) return 10;
            return String(cellValue).replace(/[^\x00-\xff]/g, 'aa').length * 8 + 2;
          })
        )
      };
    });
    ws['!cols'] = colWidths;
  }

  // 5. 添加水印
  if (watermark) {
    if (!ws['!merges']) ws['!merges'] = [];
    ws['!merges'].push({
      s: { r: exportData.length + 1, c: 0 },
      e: { r: exportData.length + 1, c: header.length - 1 }
    });
    XLSX.utils.sheet_add_aoa(ws, [[watermark]], { origin: -1 });
  }

  // 6. 將工作表添加到工作簿
  XLSX.utils.book_append_sheet(wb, ws, sheetName);

  // 7. 導(dǎo)出文件
  const excelBuffer = XLSX.write(wb, {
    bookType: 'xlsx',
    type: 'array'
  });
  const blob = new Blob([excelBuffer], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  });
  FileSaver.saveAs(blob, `${filename}.xlsx`);
}

參數(shù)說明

header： 表頭數(shù)組，包含列名。

data： 數(shù)據(jù)數(shù)組，包含要導(dǎo)出的數(shù)據(jù)。

filename： 導(dǎo)出的 Excel 文件名。

sheetName： 工作表名稱，默認(rèn)為 Sheet1。

autoWidth： 是否自動(dòng)調(diào)整列寬，默認(rèn)為 true。

watermark： 水印文本，默認(rèn)為空字符串。

使用

import { exportJsonToExcel } from "@/utils/index";

// 導(dǎo)出Excel
const exportExcel = () => {
  const header = [
    "時(shí)間",
    "類型",
    "地址",
    "ID",
  ];
  const data = tableData.value.map((item) => [
    item.time,
    item.type,
    item.address,
    item.id,
  ]);

  exportJsonToExcel({
    header,
    data,
    filename: "excel名",
  });
};

到此這篇關(guān)于Vue使用xlsx插件導(dǎo)出excel文件的詳細(xì)指南的文章就介紹到這了,更多相關(guān)Vue xlsx導(dǎo)出excel內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: