1. PingCode智库首页
  2. 百科

js 存excel文件怎么打开

Edit2 • • 百科

js 存excel文件怎么打开

想要在JavaScript中存储和打开Excel文件，可以通过以下几种方式：使用JavaScript库如SheetJS、通过后端服务生成Excel文件、利用HTML5的File API。 这些方法各有优劣，本文将详细讨论每种方法的实现步骤和适用场景。

一、使用JavaScript库如SheetJS

SheetJS（又称xlsx.js）是一个强大的JavaScript库，能让你在前端创建、读取和操作Excel文件。

1.1 安装和引入SheetJS

首先，你需要安装并引入SheetJS库。可以通过npm安装：

npm install xlsx

在你的HTML文件中引入：

<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>

1.2 创建和下载Excel文件

使用SheetJS创建一个Excel文件并下载：

function createExcelFile() {


    const workbook = XLSX.utils.book_new();


    const worksheetData = [


        ["Name", "Age", "City"],


        ["John Doe", 28, "New York"],


        ["Jane Smith", 32, "San Francisco"]


    ];


    const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);


    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");


    XLSX.writeFile(workbook, 'example.xlsx');


}


createExcelFile();

1.3 读取Excel文件

读取Excel文件并解析数据：

function handleFile(event) {


    const file = event.target.files[0];


    const reader = new FileReader();


    reader.onload = function (e) {


        const data = new Uint8Array(e.target.result);


        const workbook = XLSX.read(data, { type: 'array' });


        const sheetName = workbook.SheetNames[0];


        const worksheet = workbook.Sheets[sheetName];


        const jsonData = XLSX.utils.sheet_to_json(worksheet);


        console.log(jsonData);


    };


    reader.readAsArrayBuffer(file);


}


document.getElementById('upload').addEventListener('change', handleFile, false);

二、通过后端服务生成Excel文件

如果数据量大或者需要复杂的操作，可以通过后端服务生成Excel文件，然后在前端下载。

2.1 创建后端服务

以Node.js为例，通过express和exceljs库生成Excel文件：

const express = require('express');


const ExcelJS = require('exceljs');


const app = express();


app.get('/download', async (req, res) => {


    const workbook = new ExcelJS.Workbook();


    const worksheet = workbook.addWorksheet('Sheet1');


    worksheet.columns = [


        { header: 'Name', key: 'name' },


        { header: 'Age', key: 'age' },


        { header: 'City', key: 'city' }


    ];


    worksheet.addRows([


        { name: 'John Doe', age: 28, city: 'New York' },


        { name: 'Jane Smith', age: 32, city: 'San Francisco' }


    ]);


    res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');


    res.setHeader('Content-Disposition', 'attachment; filename=example.xlsx');


    await workbook.xlsx.write(res);


    res.end();


});


app.listen(3000, () => console.log('Server running on port 3000'));

2.2 前端请求下载Excel文件

在前端，通过发起HTTP请求下载Excel文件：

function downloadExcelFile() {


    fetch('/download')


        .then(response => response.blob())


        .then(blob => {


            const url = window.URL.createObjectURL(blob);


            const a = document.createElement('a');


            a.href = url;


            a.download = 'example.xlsx';


            document.body.appendChild(a);


            a.click();


            a.remove();


        });


}


downloadExcelFile();

三、利用HTML5的File API

HTML5的File API让你可以在前端处理文件输入和输出，但其功能较为有限，适合简单的文件操作。

3.1 读取Excel文件

HTML5的File API可以用来读取Excel文件，然后使用SheetJS解析：

<input type="file" id="fileInput">


<script>


    document.getElementById('fileInput').addEventListener('change', function (event) {


        const file = event.target.files[0];


        const reader = new FileReader();


        reader.onload = function (e) {


            const data = new Uint8Array(e.target.result);


            const workbook = XLSX.read(data, { type: 'array' });


            const sheetName = workbook.SheetNames[0];


            const worksheet = workbook.Sheets[sheetName];


            const jsonData = XLSX.utils.sheet_to_json(worksheet);


            console.log(jsonData);


        };


        reader.readAsArrayBuffer(file);


    });


</script>

3.2 下载Excel文件

你可以使用Blob和URL.createObjectURL生成一个文件下载链接：

function downloadExcel() {


    const data = [


        ["Name", "Age", "City"],


        ["John Doe", 28, "New York"],


        ["Jane Smith", 32, "San Francisco"]


    ];


    const worksheet = XLSX.utils.aoa_to_sheet(data);


    const workbook = XLSX.utils.book_new();


    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");


    const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });


    const blob = new Blob([wbout], { type: 'application/octet-stream' });


    const url = URL.createObjectURL(blob);


    const a = document.createElement('a');


    a.href = url;


    a.download = 'example.xlsx';


    document.body.appendChild(a);


    a.click();


    URL.revokeObjectURL(url);


}


downloadExcel();

四、综合实例

为了更好地理解这些方法，我们将创建一个综合实例，展示如何在JavaScript中存储和打开Excel文件。

4.1 项目结构

首先，创建一个项目结构：

project/


├── index.html


├── script.js


└── server.js

4.2 index.html

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Excel File Operations</title>


</head>


<body>


    <h1>Excel File Operations</h1>


    <button onclick="createExcelFile()">Create and Download Excel</button>


    <input type="file" id="fileInput" />


    <button onclick="downloadExcelFile()">Download Excel from Server</button>


    <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>


    <script src="script.js"></script>


</body>


</html>

4.3 script.js

function createExcelFile() {


    const workbook = XLSX.utils.book_new();


    const worksheetData = [


        ["Name", "Age", "City"],


        ["John Doe", 28, "New York"],


        ["Jane Smith", 32, "San Francisco"]


    ];


    const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);


    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");


    XLSX.writeFile(workbook, 'example.xlsx');


}


document.getElementById('fileInput').addEventListener('change', function (event) {


    const file = event.target.files[0];


    const reader = new FileReader();


    reader.onload = function (e) {


        const data = new Uint8Array(e.target.result);


        const workbook = XLSX.read(data, { type: 'array' });


        const sheetName = workbook.SheetNames[0];


        const worksheet = workbook.Sheets[sheetName];


        const jsonData = XLSX.utils.sheet_to_json(worksheet);


        console.log(jsonData);


    };


    reader.readAsArrayBuffer(file);


});


function downloadExcelFile() {


    fetch('/download')


        .then(response => response.blob())


        .then(blob => {


            const url = window.URL.createObjectURL(blob);


            const a = document.createElement('a');


            a.href = url;


            a.download = 'example.xlsx';


            document.body.appendChild(a);


            a.click();


            a.remove();


        });


}

4.4 server.js

const express = require('express');


const ExcelJS = require('exceljs');


const app = express();


app.get('/download', async (req, res) => {


    const workbook = new ExcelJS.Workbook();


    const worksheet = workbook.addWorksheet('Sheet1');


    worksheet.columns = [


        { header: 'Name', key: 'name' },


        { header: 'Age', key: 'age' },


        { header: 'City', key: 'city' }


    ];


    worksheet.addRows([


        { name: 'John Doe', age: 28, city: 'New York' },


        { name: 'Jane Smith', age: 32, city: 'San Francisco' }


    ]);


    res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');


    res.setHeader('Content-Disposition', 'attachment; filename=example.xlsx');


    await workbook.xlsx.write(res);


    res.end();


});


app.listen(3000, () => console.log('Server running on port 3000'));

总结

通过本文的讲解，你可以使用JavaScript库如SheetJS、通过后端服务生成Excel文件、利用HTML5的File API 来存储和打开Excel文件。每种方法都有其适用场景和优劣，根据具体需求选择合适的方法能显著提高开发效率。希望本文对你有所帮助，能让你在JavaScript项目中更好地处理Excel文件。

相关问答FAQs：

1. 如何在JavaScript中将数据保存为Excel文件？

  • 使用JavaScript库（如SheetJS）来将数据保存为Excel文件。
  • 首先，将数据转换为Excel可接受的格式，例如CSV或JSON。
  • 然后，使用库提供的函数将数据保存为Excel文件。
  • 最后，将生成的Excel文件下载到用户的设备。

2. 我该如何在浏览器中打开JavaScript生成的Excel文件？

3. 我使用JavaScript生成了一个Excel文件，但在打开时遇到了问题，该怎么办？

  • 如果您在打开由JavaScript生成的Excel文件时遇到问题，请尝试以下解决方案：
    • 检查生成的Excel文件的格式是否正确，确保它符合Excel文件的规范。
    • 确保您的浏览器支持打开Excel文件，并且已经安装了Excel软件。
    • 如果您的Excel文件包含复杂的功能或宏，可能需要在Excel软件中打开。
    • 如果问题仍然存在，尝试使用不同的浏览器或Excel软件来打开文件，以确定是否是特定软件或浏览器的问题。

文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/4577621

赞 (0)
Edit2Edit2
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部