js 保存excel文件怎么打开

JS 保存Excel文件怎么打开

在JavaScript中，保存并打开Excel文件是一项常见的任务，尤其是在处理数据导出时。通过使用FileSaver.js、XLSX.js、Blob对象、文件下载链接等方式，可以实现这一功能。下面我们将详细介绍如何通过这些方法来保存和打开Excel文件。

一、使用FileSaver.js保存Excel文件

FileSaver.js是一个简单而强大的库，用于在客户端保存文件。它可以生成一个文件并触发浏览器的下载功能。首先，我们需要引入FileSaver.js库。

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>

1.1、创建并保存Excel文件

我们可以通过Blob对象创建Excel文件，然后使用FileSaver.js来保存它。

function saveExcelFile(data, filename) {
    var blob = new Blob([data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
    saveAs(blob, filename);
}

1.2、导出表格数据为Excel文件

假设我们有一个HTML表格，并想导出其数据为Excel文件，可以通过以下代码实现：

function exportTableToExcel(tableID, filename = '') {
    var downloadLink;
    var dataType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
    var tableSelect = document.getElementById(tableID);
    var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
    // Specify file name
    filename = filename ? filename + '.xlsx' : 'excel_data.xlsx';
    // Create download link element
    downloadLink = document.createElement("a");
    document.body.appendChild(downloadLink);
    if (navigator.msSaveOrOpenBlob) {
        var blob = new Blob(['ufeff', tableHTML], { type: dataType });
        navigator.msSaveOrOpenBlob(blob, filename);
    } else {
        downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
        // Setting the file name
        downloadLink.download = filename;
        //triggering the function
        downloadLink.click();
    }
}

二、使用XLSX.js读取和保存Excel文件

XLSX.js是一个用于解析和写入Excel文件的库。它支持多种格式的Excel文件，使用起来非常方便。首先，我们需要引入XLSX.js库。

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>

2.1、读取Excel文件

读取Excel文件时，可以使用FileReader对象将文件读取为ArrayBuffer，然后通过XLSX.js解析。

function readExcelFile(file, callback) {
    var reader = new FileReader();
    reader.onload = function(e) {
        var data = new Uint8Array(e.target.result);
        var workbook = XLSX.read(data, { type: 'array' });
        callback(workbook);
    };
    reader.readAsArrayBuffer(file);
}

2.2、创建并保存Excel文件

使用XLSX.js创建一个新的Excel文件，并通过FileSaver.js保存它。

function saveWorkbookAsExcel(workbook, filename) {
    var wopts = { bookType: 'xlsx', bookSST: false, type: 'binary' };
    var wbout = XLSX.write(workbook, wopts);
    var blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
    saveAs(blob, filename);
}
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对象和文件下载链接

如果不想依赖外部库，也可以使用原生的Blob对象和文件下载链接来保存Excel文件。

3.1、创建Blob对象

function createExcelBlob(data) {
    return new Blob([data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
}

3.2、创建下载链接并触发下载

function downloadExcel(blob, filename) {
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

四、结合FileSaver.js和XLSX.js实现完整示例

通过结合FileSaver.js和XLSX.js，可以实现一个完整的读取、创建、保存Excel文件的示例。

4.1、HTML部分

<input type="file" id="upload" />
<button onclick="exportData()">导出数据</button>

4.2、JavaScript部分

document.getElementById('upload').addEventListener('change', function(e) {
    var file = e.target.files[0];
    readExcelFile(file, function(workbook) {
        console.log(workbook);
    });
});
function exportData() {
    var data = [
        ["Name", "Age", "Gender"],
        ["John", 30, "Male"],
        ["Jane", 25, "Female"]
    ];
    var worksheet = XLSX.utils.aoa_to_sheet(data);
    var workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
    saveWorkbookAsExcel(workbook, 'exported_data.xlsx');
}

五、总结

通过上述方法，您可以方便地使用JavaScript保存并打开Excel文件。FileSaver.js、XLSX.js、Blob对象、文件下载链接等工具可以帮助您轻松实现这一功能。希望这篇文章能够为您提供有用的指导，助力您的开发工作。