JavaScript导入导出excel

在JavaScript的浏览器环境下导入和导出Excel文件,主要可以通过一些库来帮助我们简化操作,比如SheetJS(也称为xlsx库)和FileSaver.js。以下是如何使用这些库来实现Excel的导入和导出的基本步骤:

导入Excel

导入Excel文件通常涉及到HTML的元素,以及使用FileReader来读取用户选择的文件,然后使用SheetJS解析这个文件。

  1. HTML 部分

     

    html复制代码

  2. JavaScript 部分

    javascript复制代码

    document.getElementById('file-input').addEventListener('change', function(e) {
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
    var data = new Uint8Array(e.target.result);
    var workbook = XLSX.read(data, {type: 'array'});
    // 假设我们处理第一个工作表
    var firstSheetName = workbook.SheetNames[0];
    var worksheet = workbook.Sheets[firstSheetName];
    var json = XLSX.utils.sheet_to_json(worksheet, {header: 1});
    console.log(json); // 这里json变量包含了Excel数据
    };
    reader.readAsArrayBuffer(file);
    });

导出Excel

导出Excel文件通常涉及到使用SheetJS来创建或修改一个工作簿(workbook),然后使用FileSaver.js库来触发下载。

  1. HTML 部分(假设你已经有一个按钮用于触发导出)

    html复制代码

  2. JavaScript 部分

    javascript复制代码

    document.getElementById('export-button').addEventListener('click', function() {
    // 创建一个新的工作簿
    var wb = XLSX.utils.book_new();
    // 假设我们有以下数据
    var data = [
    ["姓名", "年龄", "城市"],
    ["张三", 28, "北京"],
    ["李四", 22, "上海"]
    ];
    // 将数据添加到工作簿中
    var ws = XLSX.utils.aoa_to_sheet(data);
    XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
    // 导出工作簿
    XLSX.writeFile(wb, "example.xlsx");
    });

注意:在导出Excel时,SheetJSFileSaver.js一起工作,在客户端直接生成并下载Excel文件。这不需要服务器端的支持,但请注意,由于浏览器的安全限制,某些配置(如HTTPS环境)可能需要特别注意。

你可能感兴趣的:(javascript,excel)