运用SheetJS库实现Excel的导入导出

龙泉太阿

已于 2023-05-03 11:20:00 修改

阅读量2.1k

点赞数

分类专栏： javascript/jquery 框架文章标签： excel javascript SheetJS

于 2023-04-12 17:18:16 首次发布

本文链接：https://blog.csdn.net/menergy/article/details/130110453

版权

javascript/jquery 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

框架

1 篇文章 0 订阅

订阅专栏

1. 获取xlsx.full.min.js 依赖文件

项目地址：GitHub - SheetJS/sheetjs: 📗 SheetJS Spreadsheet Data Toolkit -- New home https://git.sheetjs.com/SheetJS/sheetjs

2. 实现导出Excel


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Excel to Table</title>
</head>
<body>
    <button onclick="exportExcelFile()">Export Data</button>

  <script src="js/xlsx.full.min.js"></script>
  <script>

    function openDownloadDialog(url, saveName) {
            if (typeof url == 'object' && url instanceof Blob) {
                url = URL.createObjectURL(url); // 创建blob地址
            }
            var aLink = document.createElement('a');
            aLink.href = url;
            aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
            var event;
            if (window.MouseEvent) event = new MouseEvent('click');
            else {
                event = document.createEvent('MouseEvents');
                event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0,
                    null);
            }
            aLink.dispatchEvent(event);
    }

        // 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
        function sheet2blob(sheet, sheetName) {
            sheetName = sheetName || 'sheet1';
            var workbook = {
                SheetNames: [sheetName],
                Sheets: {}
            };
            workbook.Sheets[sheetName] = sheet;
            // 生成excel的配置项
            var wopts = {
                bookType: 'xlsx', // 要生成的文件类型
                bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
                type: 'binary'
            };
            var wbout = XLSX.write(workbook, wopts);
            var blob = new Blob([s2ab(wbout)], {
                type: "application/octet-stream"
            });
            // 字符串转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;
            }
            return blob;
        }


    function exportExcelFile(){
        var aoa = [
                ['姓名', '性别', '年龄', '注册时间'],
                ['张三', '男', 18, new Date()],
                ['李四', '女', 22, new Date()]
            ];
            var sheet = XLSX.utils.aoa_to_sheet(aoa);
            openDownloadDialog(sheet2blob(sheet), '导出.xlsx');

    }

 
  </script>
</body>
</html>

测试：

导出的文件：

3. 实现导入Excel


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Excel to Table</title>
</head>
<body>
    <h2>Upload Excel File</h2>
    <input type="file" id="excelFileInput">
    <br><br>
    <button onclick="readExcelFile()">Display Data</button>
    <br><br>
    <table id="excelDataTable"></table>

  <script src="js/xlsx.full.min.js"></script>
  <script>

    function readExcelFile() {
        const excelFileInput = document.getElementById('excelFileInput');
        const excelDataTable = document.getElementById('excelDataTable');

        // Check if a file is selected
        if (excelFileInput.files.length === 0) {
            alert('Please select an Excel file!');
            return;
        }

        console.log("----------1==============: ");

        // Read the Excel file
        const file = excelFileInput.files[0];
        const reader = new FileReader();
        reader.readAsBinaryString(file);

        reader.onload = function(e) {
            // Parse Excel data
            const data = e.target.result;
            const workbook = XLSX.read(data, { type: 'binary' });
            const worksheet = workbook.Sheets[workbook.SheetNames[0]];
            //const sheetData = XLSX.utils.sheet_to_json(worksheet);
            const jsonData = XLSX.utils.sheet_to_json(worksheet, {header:1});
            
            console.log("----------2==============: ");           

            for (let i = 0; i < jsonData.length; i++) {
                for (let j = 0; j < jsonData[i].length; j++) {
                   console.log("--------row:" + i + " , col:" + j + " , value:" + jsonData[i][j]);
                }
            }

        }

    }

  </script>
</body>
</html>

测试：

控制台输出：

查看SheetJS官网文档，可以实现更多功能

4. 设置不同的数据格式

用SheetJS 第三方库导出数据到Excel，要求设置不同的数据格式，如日期、数字和字符串等。

// 创建一个包含数据的数组
var data = [
  ['Name', 'Age', 'Date of Birth', 'Score'],
  ['John', 25, new Date('1998-07-22'), 85.5],
  ['Alice', 30, new Date('1993-05-15'), 92.3],
  ['Bob', 28, new Date('1995-11-30'), 77.8],
  ['Eve', 22, new Date('1999-03-08'), 91.2]
];

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

// 将数据添加到工作簿中的一个新工作表
var ws = XLSX.utils.aoa_to_sheet(data);

// 设置数据格式
XLSX.utils.format_cell(ws['C2'], {numFmt: 'yyyy-mm-dd'}); // 设置日期格式
XLSX.utils.format_cell(ws['D2'], {numFmt: '0.00'}); // 设置数字格式

// 将工作表添加到工作簿中
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

// 导出工作簿为Excel文件
XLSX.writeFile(wb, 'data.xlsx');

在上面的代码中，我们使用了XLSX.utils.format_cell方法来设置单元格的数据格式。该方法接受两个参数：要设置格式的单元格和格式化选项对象。其中，格式化选项对象可以设置各种不同的格式，例如日期格式、数字格式、货币格式、百分比格式等等。在上面的示例代码中，我们分别设置了单元格C2的日期格式和单元格D2的数字格式。

需要注意的是，不同的Excel版本可能支持不同的格式，因此在设置格式时需要考虑目标用户所使用的Excel版本和语言设置。