数据导入导出之xlsx文件的解析和生成

2024-01-15 03:57:56

JavaScript 解析和生成 XLSX 文件的完整指南

在当今数据驱动的世界中，能够轻松地解析和生成 XLSX（Excel 电子表格）文件变得至关重要。JavaScript 是一门功能强大的编程语言，它使我们能够使用各种库和组件来实现这一目标。本文将深入探讨如何在 JavaScript 中使用 XLSX 库和 ElementUI 上传和下载组件解析和生成 XLSX 文件。

解析 XLSX 文件

1. 使用 ElementUI 上传组件

ElementUI 提供了一个功能强大的上传组件，可轻松实现文件上传。我们可以使用以下代码上传 XLSX 文件：

// 上传成功时的回调函数
handleUploadSuccess(response, file, fileList) {
  if (response.code === 200) {
    parseXLSXFile(response.data.url);
  } else {
    console.error("上传失败！");
  }
}

// 上传前的回调函数，可以对文件进行校验
beforeUpload(file) {
  const fileType = file.type;
  if (fileType !== "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
    console.error("文件格式错误，请选择 XLSX 文件！");
    return false;
  }
  const fileSize = file.size;
  if (fileSize > 2 * 1024 * 1024) {
    console.error("文件大小超过限制，请上传小于 2MB 的文件！");
    return false;
  }
  return true;
}

// 解析 XLSX 文件
parseXLSXFile(url) {
  XLSX.readFile(url, (err, data) => {
    if (err) {
      console.error("解析 XLSX 文件失败！");
      return;
    }
    const sheetData = data.Sheets[data.SheetNames[0]];
    const jsonData = XLSX.utils.sheet_to_json(sheetData);
    const jsonString = JSON.stringify(jsonData);
    localStorage.setItem("xlsxData", jsonString);
  });
}

2. 使用 XLSX 库解析 XLSX 文件

除了使用 ElementUI 上传组件，我们还可以直接使用 XLSX 库解析 XLSX 文件：

XLSX.readFile("path/to/file.xlsx", (err, data) => {
  if (err) {
    console.error(err);
    return;
  }
  const sheetData = data.Sheets[data.SheetNames[0]];
  const jsonData = XLSX.utils.sheet_to_json(sheetData);
  console.log(jsonData);
});

生成 XLSX 文件

1. 使用 XLSX 库生成 XLSX 文件

在将 XLSX 文件中的数据解析到 JavaScript 对象之后，我们可以使用 XLSX 库生成新的 XLSX 文件：

// 创建一个新的工作表
const worksheet = XLSX.utils.aoa_to_sheet([
  ["姓名", "年龄", "性别"],
  ["张三", 20, "男"],
  ["李四", 25, "女"],
]);

// 创建一个新的工作簿
const workbook = XLSX.utils.book_new();

// 将工作表添加到工作簿中
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

// 生成 XLSX 文件
XLSX.writeFile(workbook, "path/to/file.xlsx");

2. 使用 ElementUI 下载 XLSX 文件

在使用 XLSX 库生成 XLSX 文件之后，我们可以使用 ElementUI 的下载组件将 XLSX 文件下载到本地：

downloadXLSXFile() {
  const worksheet = XLSX.utils.aoa_to_sheet([
    ["姓名", "年龄", "性别"],
    ["张三", 20, "男"],
    ["李四", 25, "女"],
  ]);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
  const blob = new Blob([s2ab(XLSX.write(workbook, { bookType: "xlsx", type: "binary" })], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
  const fileName = "数据.xlsx";
  if (window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(blob, fileName);
  } else {
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = fileName;
    link.click();
  }
}

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;
}