前端读取和生成excel文件

最新推荐文章于 2024-10-13 23:29:21 发布

有哥来袭

最新推荐文章于 2024-10-13 23:29:21 发布

阅读量397

点赞数

分类专栏： npm-libary-study 文章标签：前端 excel javascript

本文链接：https://blog.csdn.net/qq_33418013/article/details/127594747

版权

npm-libary-study 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

1. 基于 xlsx 的js库读取和生成excel文件

可以用于生成和读取 excel表格
前端和node端均可使用
支持单元格合并
支持数组数据和对象格式数据生成excel, html, csv 文件
参考博客: https://blog.csdn.net/lgd1917/article/details/122449774
npm 上有详细教程和相关api

2. 下载

cdn <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
es module yarn add xlsx
引入 import * as XLSX from 'xlsx'
node const XLSX = require('xlsx')

3. 读取excel 内容

上传excel文件,并读取内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" id="excel-file">
</body>
</html>
<script src="xlsx.core.min.js"></script>
<script>
    const excelDom = document.getElementById('excel-file')
    excelDom.onchange = function(e) {
            var files = e.target.files; // 文件对象
            var fileReader = new FileReader();
            fileReader.onload = function(ev) {
                try {
                    var data = ev.target.result// 文件内容
                     const   workbook = XLSX.read(data, {
                            type: 'binary'
                        }) // 以二进制流方式读取得到整份excel表格对象
                      console.log('111222333',workbook)

                } catch (e) {
                    console.log('文件类型不正确');
                    return;
                }

            };
            // 以二进制方式打开文件
            fileReader.readAsBinaryString(files[0]);
        };
</script>

4. 前端导出excel文件

点击按钮导出excel文件
支持数组数据和对象格式数据
合并单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="excelDownload()">点击下载</button>
</body>
</html>
<script src="xlsx.core.min.js"></script>
<script>

function excelDownload(){
    const arrData = [
        ['姓名','年龄','性别'],
        ['剌世勇','25','男'],
        ['王小明','36','女'],
        ['王小红','72','人妖']
    ]
    const jsonData = [
        { A:"表头1", B:"表头2", C:"表头3", D:"表头4", E:"表头5", F:"表头6", G:"表头7" },
        { A: 1,  B: 2,  C: 3,  D: 4,  E: 5,  F: 6,  G: 7  },
        { A: 2,  B: 3,  C: 4,  D: 5,  E: 6,  F: 7,  G: 8  }
    ]
    const jsonOptions = {
        skipHeader:true  // 默认会用object key作为表头,true 不输出表头
    }
    var workbook = XLSX.utils.book_new(); // 创建一个工作簿 // 可以比作一个excel文件
    var worksheet1 = XLSX.utils.aoa_to_sheet(arrData); // 添加数据到sheet表中 生成 sheet 表
    var worksheet2 = XLSX.utils.json_to_sheet(jsonData,jsonOptions);
       worksheet2['!merges'] = [
                // 设置A1-C1的单元格合并
               {
                s: {//s为开始
                    c: 0, //  开始列
                    r: 0  //  开始行
                },
                e: {//e结束
                    c: 2,  // 结束列
                    r: 0   // 结束行
                }
               }
            ];
    XLSX.utils.book_append_sheet(workbook, worksheet1, 'sheet_name_1');// 将sheet表添加到工作簿中,可以添加多个
    XLSX.utils.book_append_sheet(workbook, worksheet2, 'sheet_name_2');
    var wopts = {
            // 要生成的文件类型
            bookType: 'xlsx',
            bookSST: false,
            type: 'array'
        };
        var wbout = XLSX.write(workbook, wopts); // 将工作簿 以二进制写进内存中//生成文件数据
        const blob = new Blob([wbout]); // 生成 blob对象
        const url = URL.createObjectURL(blob);// 创建一个url 用于 a链接下载
        const aDom = document.createElement('a') // 创建a标签
        aDom.href = url; // 指向下载地址
        // 指定download属性为下载
        aDom.download="xx.xlsx" // 指定下载文件名称 // 指明文件后缀 否则会是txt文件
        // 自动触发点击事件
        aDom.click()
}
</script>

5. node端生成 execl文件

var XLSX = require("xlsx");
const path = require('path')
function excelDownload(){
    const arrData = [
        ['姓名','年龄','性别'],
        ['剌世勇','25','男'],
        ['王小明','36','女'],
        ['王小红','72','人妖']
    ]
    const jsonData = [
        { A:"表头1", B:"表头2", C:"表头3", D:"表头4", E:"表头5", F:"表头6", G:"表头7" },
        { A: 1,  B: 2,  C: 3,  D: 4,  E: 5,  F: 6,  G: 7  },
        { A: 2,  B: 3,  C: 4,  D: 5,  E: 6,  F: 7,  G: 8  }
    ]
    const jsonOptions = {
        skipHeader:true  // 默认会用object key作为表头,true 不输出表头
    }
    var workbook = XLSX.utils.book_new(); // 创建一个工作簿 // 可以比作一个excel文件
    var worksheet1 = XLSX.utils.aoa_to_sheet(arrData); // 添加数据到sheet表中 生成 sheet 表
    var worksheet2 = XLSX.utils.json_to_sheet(jsonData,jsonOptions);
       worksheet2['!merges'] = [
                // 设置A1-C1的单元格合并
               {
                s: {//s为开始
                    c: 0, //  开始列
                    r: 0  //  开始行
                },
                e: {//e结束
                    c: 2,  // 结束列
                    r: 0   // 结束行
                }
               }
            ];
    XLSX.utils.book_append_sheet(workbook, worksheet1, 'sheet_name_1');// 将sheet表添加到工作簿中,可以添加多个
    XLSX.utils.book_append_sheet(workbook, worksheet2, 'sheet_name_2');
    var wopts = {
            // 要生成的文件类型
            bookType: 'xlsx',
            bookSST: false,
            type: 'array'
        };
    const _path = path.resolve(__dirname,'xx.xlsx')
    // XLSX.writeFile(workbook, _path,wopts); //同步写入 将工作簿 以二进制写进文件中 
    XLSX.writeFileAsync(_path, workbook,wopts, (...arr) =>{// 异步写入文件
            console.log('112233',arr)
    })
}

excelDownload()