js 如何保存excel文件怎么打开

在JavaScript中，保存和打开Excel文件的几种方法包括：使用第三方库如SheetJS、Blob对象和FileSaver.js、以及结合后端服务。这些方法可以让开发者方便地创建、保存和管理Excel文件。下面将详细介绍使用SheetJS库的具体步骤。

SheetJS（XLSX）是一个强大的JavaScript库，能够解析、操作和生成多种电子表格文件格式。使用该库，可以轻松地在浏览器中生成并下载Excel文件。

一、使用第三方库SheetJS

1、安装和引入SheetJS

首先需要安装SheetJS库，可以使用npm或直接引入CDN链接。

npm install xlsx

或在HTML文件中引入：

<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>

2、创建和导出Excel文件

使用SheetJS库，可以创建一个Excel文件并将其导出。以下是详细步骤：

创建工作簿和工作表

// 创建一个新的工作簿
var wb = XLSX.utils.book_new();
// 创建一些数据
var data = [
  ["Name", "Age", "Email"],
  ["John Doe", 28, "john.doe@example.com"],
  ["Jane Smith", 34, "jane.smith@example.com"]
];
// 将数据转换为Sheet
var ws = XLSX.utils.aoa_to_sheet(data);
// 将工作表添加到工作簿中
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

导出Excel文件

// 将工作簿转换为二进制字符串
var wbout = XLSX.write(wb, {bookType: 'xlsx', type: 'binary'});
// 将字符串转换为ArrayBuffer
function s2ab(s) {
  var buf = new ArrayBuffer(s.length);
  var view = new Uint8Array(buf);
  for (var i = 0; i < s.length; i++) {
    view[i] = s.charCodeAt(i) & 0xFF;
  }
  return buf;
}
// 创建Blob对象并触发下载
saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), 'example.xlsx');

在上述代码中，我们使用了FileSaver.js库的saveAs方法来触发文件下载。需要先安装或引入FileSaver.js：

npm install file-saver

或在HTML文件中引入：

<script src="https://cdn.jsdelivr.net/npm/file-saver/dist/FileSaver.min.js"></script>

二、Blob对象和FileSaver.js

除了SheetJS，使用原生的Blob对象和FileSaver.js也可以生成并下载Excel文件。

1、创建Excel文件的Blob对象

var data = [
  ["Name", "Age", "Email"],
  ["John Doe", 28, "john.doe@example.com"],
  ["Jane Smith", 34, "jane.smith@example.com"]
];
var csvContent = "data:text/csv;charset=utf-8,";
data.forEach(function(rowArray) {
  let row = rowArray.join(",");
  csvContent += row + "rn";
});
var blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });

2、使用FileSaver.js触发下载

saveAs(blob, 'example.csv');

三、结合后端服务

在某些情况下，可能需要将生成的Excel文件发送到服务器进行处理或存储，然后再从服务器下载。

1、将文件发送到服务器

var formData = new FormData();
formData.append('file', blob, 'example.xlsx');
fetch('/upload', {
  method: 'POST',
  body: formData
}).then(response => {
  // 处理响应
});

2、从服务器下载文件

服务器可以返回文件的下载链接，前端通过该链接下载文件。

fetch('/download/example.xlsx')
  .then(response => response.blob())
  .then(blob => {
    saveAs(blob, 'example.xlsx');
  });

四、文件解析和展示

除了生成和下载Excel文件，有时还需要解析用户上传的Excel文件并在页面上展示。

1、文件上传和读取

<input type="file" id="upload" accept=".xlsx, .xls">

document.getElementById('upload').addEventListener('change', handleFile, false);
function handleFile(e) {
  var files = e.target.files;
  var file = files[0];
  var reader = new FileReader();
  reader.onload = function(event) {
    var data = event.target.result;
    var workbook = XLSX.read(data, {type: 'binary'});
    // 获取第一个工作表
    var firstSheet = workbook.Sheets[workbook.SheetNames[0]];
    // 将Sheet转换为JSON
    var jsonData = XLSX.utils.sheet_to_json(firstSheet, {header: 1});
    console.log(jsonData);
  };
  reader.readAsBinaryString(file);
}

通过上述方法，开发者可以在JavaScript中方便地生成、保存、解析和展示Excel文件。这些技巧和工具让处理Excel文件变得更加高效和灵活。无论是生成报表、导出数据还是读取用户上传的文件，SheetJS、Blob对象和FileSaver.js都是非常实用的工具。