vue使用xlsx和xlsx-style导出excel文件

原创已于 2024-12-31 10:17:15 修改 · 864 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #excel

于 2024-09-21 18:29:46 首次发布

1、引入

npm install xlsx

npm install xlsx-style

这俩库同时导入一起使用会报错

2. 解决报错

打开node_ modules报找到xlsx，复制xlsx.full.min.js文件

引入到html文件中

然后解决xlsx-style的报错问题
打开项目根目录的vue.config.js文件，写入以下代码


module.exports = {
    chainWebpack(config) {
    config.externals({ './cptable': 'var cptable' })
    }
}

3. 导出数据

封装函数

import XLSXStyle from "xlsx-style"; // 使用 XLSXStyle 引入

// 通用 Excel 导出工具函数
export function exportToExcel(data, columnWidths, filename) {
  if (!data || !Array.isArray(data) || data.length === 0) {
    console.warn("数据不能为空");
    return;
  }

  // 将数据转换为 Excel 的 sheet
  const sheet = XLSX.utils.aoa_to_sheet(data);

  // 设置单元格样式：水平居中、垂直居中、边框
  const borderAll = {
    top: { style: "thin" },
    bottom: { style: "thin" },
    left: { style: "thin" },
    right: { style: "thin" },
  };

  // 遍历所有单元格，应用样式
  for (const key in sheet) {
    if (sheet.hasOwnProperty(key) && key[0] !== '!') {
      sheet[key].s = {
        alignment: {
          horizontal: "center",  // 水平居中
          vertical: "center",    // 垂直居中
        },
        font: {
          name: "Arial",  // 字体
          sz: 12,         // 字体大小
        },
        border: borderAll,  // 边框
      };
    }
  }

  // 设置列宽
  sheet['!cols'] = columnWidths.map(width => ({ wpx: width }));

  // 调用下载函数
  openDownloadDialog(sheet2blob(sheet), `${filename}.xlsx`);
}

/**
 * 打开下载对话框的方法
 * @param {Blob} url Blob 对象
 * @param {String} saveName 文件名
 */
function openDownloadDialog(url, saveName) {
  const aLink = document.createElement("a");
  const blob = url instanceof Blob ? URL.createObjectURL(url) : url;
  aLink.href = blob;
  aLink.download = saveName || "download.xlsx";
  aLink.click();
}

/**
 * 将sheet对象转换为blob对象
 * @param {Object} sheet sheet对象
 * @param {String} sheetName sheet名称，默认 "Sheet1"
 * @returns {Blob}
 */
function sheet2blob(sheet, sheetName = "Sheet1") {
  const workbook = {
    SheetNames: [sheetName],
    Sheets: { [sheetName]: sheet },
  };

  const wopts = {
    bookType: 'xlsx',
    bookSST: false,
    type: 'binary'
  };

  const wbout = XLSXStyle.write(workbook, wopts);

  // 将输出的文件内容转换为 Blob 对象
  function s2ab(s) {
    const buf = new ArrayBuffer(s.length);
    const view = new Uint8Array(buf);
    for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;
  }

  return new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
}

vue组件中使用

<template>
  <div class="page">
    <el-button type="primary" @click="exportExcel">下载Excel</el-button>
  </div>
</template>

<script>
import { exportToExcel } from '@/utils/excel.js' //写直接的路径

export default {
  methods: {
    // 下载excel
    exportExcel() {
      const data = [
        ['年份', '省份/城市', '数量', '增长率'],
        ['2021', '北京', 100, '20%'],
        ['2021', '上海', 200, '15%'],
        ['2022', '广州', 150, '10%']
      ];

      const columnWidths = [100, 200, 100, 100];  // 每列的宽度
      const filename = 'data.xlsx';

      exportToExcel(data, columnWidths, filename);
    },

  }
};
</script>