前端导出xlsx文件

是大刚啊

已于 2024-02-21 16:20:07 修改

阅读量280

点赞数 3

分类专栏：前端工具函数文章标签：前端 javascript

于 2024-02-21 14:17:59 首次发布

本文链接：https://blog.csdn.net/qq_45797421/article/details/136209728

版权

前端工具函数专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了如何使用XLSX库将二维数组数据转换为Excel表格，并通过JavaScript函数`outXlsxFile`实现导出功能，包括设置列名、行高和列宽等参数。

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

显示效果

安装 XLSX,命令 npm install xlsx ,我的版本如下

"xlsx": "^0.18.5"

数据格式介绍

// 数组是一个二维得数组
// arr[0]是列名
// arr[1]-arr[n] 是每一列得数据
const arr = [
  ["姓名", "年龄", "性别", "成绩"],
  ["张三", "20", "男", "100"],
  ["王五", "22", "男", "99"],
  ["李逵", "25", "男", "100"],
];

实现方法

import * as XLSX from "xlsx";

/**
 * 实现方法
 * @param {array} arr 要导出得数据,格式要按着上方提供得格式来
 * @param {string} fileName 文件名,自己随便起文件名就行
 */
export function outXlsxFile(arr, fileName) {
  var wb = XLSX.utils.book_new();
  var ws_name = "SheetJS";
  var ws_data = arr;
  var ws = XLSX.utils.aoa_to_sheet(ws_data);
  let row = [];
  let cols = [];
  let loop_row_cols = arr[0].length;
  if (loop_row_cols < arr.length) {
    loop_row_cols = arr.length;
  }

  for (let k = 0; k < loop_row_cols; k++) {
    // 行高
    row.push({
      hpt: 40,
    });
    // 列宽
    cols.push({
      wpx: 150,
    });
  }
  ws["!rows"] = row;
  ws["!cols"] = cols;
  XLSX.utils.book_append_sheet(wb, ws, ws_name);
  const exportStatus = XLSX.writeFile(wb, `${fileName}.xlsx`);
  if (exportStatus) {
    console.log("导出成功！");
  } else {
    console.log("导出失败! ");
  }
}