Html页面Table表格导出导入Excel文件 xlsx.full

已于 2025-04-17 09:48:07 修改
阅读量336 收藏
点赞数 1
文章标签： html excel 前端
于 2025-04-09 15:53:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KingCruel/article/details/147095646
版权

Html页面Table表格导出Excel文件
引用 xlsx.full.min.js 文件
导出

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>-->
    <script type="text/javascript">
        $(function () {
            $('#btnTableToExcel').click(function () {
                var wb = XLSX.utils.table_to_book(document.getElementById('gridTable'), { sheet: "Sheet1" });
                XLSX.writeFile(wb, 'Table表格数据.xlsx');
            });

            $('#btnJsonToExcel').click(function () {
                var test_data = [
                    {
                        "id": "1",
                        "name": "张三",
                    },
                    {
                        "id": "2",
                        "name": "李四",
                    }
                ]

                exportXlsx(test_data);
            });

            function exportXlsx(data) {
                const book = XLSX.utils.book_new();
                const sheet = XLSX.utils.json_to_sheet(data);
                XLSX.utils.book_append_sheet(book, sheet);
                XLSX.writeFile(book, 'Json表格数据.xlsx');
            }

            ///读取table内容
            $('#btnRead').click(function () {
                $('#gridTable tr').each(function (rowIndex) {
                    var data = {};
                    $(this).find('td').each(function (columnIndex) {
                        /*if (rowIndex > 0 && columnIndex == 2) {*/
                        if (rowIndex > 0 && columnIndex > 1) {
                            var inputValue = $('tr:eq(' + rowIndex + ') td:eq(' + columnIndex + ') input').val();
                            data['column' + columnIndex] = inputValue;
                        }
                        else {
                            data['column' + columnIndex] = $(this).text();
                        }
                    });
                    console.log(data);
                });
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btnTableToExcel" value="Table导出Excel" />
    <input type="button" id="btnJsonToExcel" value="Json导出Excel" />
    <input type="button" id="btnRead" value="读取" />
    <br />
    <table id="gridTable" border="1">
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>电话</td>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td><input type="text" value="10" /></td>
            <td><input type="text" value="13012345601" /></td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td><input type="text" value="11" /></td>
            <td><input type="text" value="13012345602" /></td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td><input type="text" value="12" /></td>
            <td><input type="text" value="13012345603" /></td>
        </tr>
    </table>
</body>
</html>

*、导入

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>-->
    <script type="text/javascript">
        $(function () {
            $('#fileInput').on('change', function (e) {
                var file = e.target.files[0]; // 获取选中的文件
                var reader = new FileReader();

                reader.onload = function (e) {
                    var data = new Uint8Array(e.target.result); // 读取文件内容为 Uint8Array
                    var workbook = XLSX.read(data, { type: 'array' }); // 解析文件内容

                    // 获取第一个工作表的名字
                    var firstSheetName = workbook.SheetNames[0];
                    var worksheet = workbook.Sheets[firstSheetName];

                     方式1：header: 1
                    //var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); // 转换为 二维数组 数据
                    //console.log(JSON.stringify(jsonData))
                     输出数据到页面
                    //$('#output').empty(); // 清空输出区域
                    //jsonData.forEach(function (row) {
                    //    $('#output').append('<p>' + row.join(', ') + '</p>'); // 将每行数据作为段落添加到页面中
                    //});

                    // 方式2：header: 2
                    var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 0 }); // 转换为 JSON 数据；0、2好像都是转换为 JSON 数据
                    console.log("Ln 34 Table:" + JSON.stringify(jsonData));
                    var rowCount = $('#gridTable').get(0).rows.length - 1;
                    console.log("Ln 36 Table:" + rowCount + ",Json:" + jsonData.length);
                    var msg = "数据不匹配，请重新下载上传数据";
                    var isContinue = true;
                    if (rowCount != jsonData.length) {
                        isContinue = false;
                        alert(msg);
                        return false;
                    }

                    var codes = [];
                    if (isContinue) {
                        console.log("Ln 192 table共 " + rowCount + " 数据,共 ：Excel共" + jsonData.length + " 数据");
                        const isRate = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
                        $(jsonData).each(function (index, item) {
                            var number = index + 1;

                            codes.push($.trim(item.险种组合编码));

                            var itemString = JSON.stringify(item)
                                .replace("手续费率%", "CounterRate")
                                .replace("劳务费率%", "ServiceRate")
                                .replace("政府补助费率%", "AgentRate")
                                .replace("服务费率%", "CoverRate")

                            console.log("Ln 209 " + itemString);
                            var newItem = jQuery.parseJSON(itemString);
                            console.log("Ln 211 " + newItem.CounterRate);
                            if (isRate.test(newItem.CounterRate) == false) {
                                isContinue = false;
                                alert("第 " + number + " 行，手续费率% 数据格式错误");
                                return false;
                            }
                            if (isRate.test(newItem.ServiceRate) == false) {
                                isContinue = false;
                                alert("第 " + number + " 行，劳务费率% 数据格式错误");
                                return false;
                            }
                            if (isRate.test(newItem.AgentRate) == false) {
                                isContinue = false;
                                alert("第 " + number + " 行，政府补助费率% 数据格式错误");
                                return false;
                            }
                            if (isRate.test(newItem.CoverRate) == false) {
                                isContinue = false;
                                alert("第 " + number + " 行，服务费率% 数据格式错误");
                                return false;
                            }
                        });
                        if (isContinue) {
                            //var codes = jsonData.map(function (x) {
                            //    return $.trim(x.险种组合编码)
                            //});
                            console.log("Ln 196 Excel 原始数据：" + codes);
                            var uniqueExcelCodes = codes.filter(function (item, index, self) {
                                return index === self.findIndex(function (t) {
                                    return t === $.trim(item);
                                });
                            });
                            console.log("Ln 202 Excel 去重后数据：" + uniqueExcelCodes);
                            uniqueExcelCodes.sort(function (a, b) {
                                return $.trim(a) - $.trim(b);
                            });
                            console.log("Ln 206 Excel 去重、排序后数据：" + codes);
                            var tableCodes = [];
                            $('#gridTable tr').each(function (rowIndex) {
                                if (rowIndex > 0) {
                                    var code = $('tr:eq(' + rowIndex + ') td:eq(2)').text();
                                    console.log("Ln 211：第 " + rowIndex + " 行，编码：" + code);
                                    tableCodes.push($.trim(code));
                                }
                            });
                            console.log("Ln 215 Table 原始数据：" + tableCodes);
                            var uniqueTableCodes = tableCodes.filter(function (item, index, self) {
                                return index === self.findIndex(function (t) {
                                    return t === $.trim(item);
                                });
                            });
                            console.log("Ln 221 Table 去重后数据：" + uniqueTableCodes);
                            uniqueTableCodes.sort(function (a, b) {
                                return $.trim(a) - $.trim(b);
                            });
                            console.log("Ln 225 Table 去重、排序后数据：" + tableCodes);

                            if (uniqueTableCodes.length != uniqueExcelCodes.length) {
                                isContinue = false;
                                alert(msg);
                                return false;
                            }
                            else {
                                for (var i = 0; i < uniqueTableCodes.length; i++) {
                                    if ($.trim(uniqueTableCodes[i]) !== $.trim(uniqueExcelCodes[i])) {
                                        var number = i + 1;
                                        isContinue = false;
                                        console.log("Ln 237 Table编码：" + uniqueTableCodes[i] + " Excel编码：" + uniqueExcelCodes[i]);
                                        alert("第 " + number + " 行，险种组合编码 " + uniqueExcelCodes[i] + " <br>" + msg);
                                        break;
                                    }
                                }
                            }
                            console.log("Ln 241 Table 验证完毕");
                            if (isContinue) {
                                console.log("Ln 243 Table 准备赋值");
                                $('#gridTable tr').each(function (rowIndex) {
                                    if (rowIndex > 0) {
                                        $(this).find('td').each(function (columnIndex) {
                                            if (rowIndex > 0 && columnIndex > 1 && columnIndex <= 7) {
                                                var columnName = "";
                                                if (rowIndex > 0 && columnIndex > 3 && columnIndex <= 7) {
                                                    var code = $('tr:eq(' + rowIndex + ') td:eq(2)').text();
                                                    console.log("Ln 251：第 " + rowIndex + " 行，编码：" + code);
                                                    var objItem = jsonData.filter(function (x) {
                                                        return x.险种组合编码 == code;
                                                    });
                                                    if (objItem == '' || objItem == undefined || objItem == null) {
                                                        alert(code + " " + msg);
                                                        return false;
                                                    }
                                                    var item = objItem[0];
                                                    var itemString = JSON.stringify(item)
                                                        .replace("手续费率%", "CounterRate")
                                                        .replace("劳务费率%", "ServiceRate")
                                                        .replace("政府补助费率%", "AgentRate")
                                                        .replace("服务费率%", "CoverRate")

                                                    item = jQuery.parseJSON(itemString);
                                                    console.log("Ln 267：" + JSON.stringify(item));
                                                    console.log(item);

                                                    if (columnIndex == 4) {
                                                        columnName = '手续费率%';
                                                        $('tr:eq(' + rowIndex + ') td:eq(4) input').val(item.CounterRate);
                                                    }
                                                    else if (columnIndex == 5) {
                                                        columnName = '劳务费率%';
                                                        $('tr:eq(' + rowIndex + ') td:eq(5) input').val(item.ServiceRate);
                                                    }
                                                    else if (columnIndex == 6) {
                                                        columnName = '政府补助费率%';
                                                        $('tr:eq(' + rowIndex + ') td:eq(6) input').val(item.AgentRate);
                                                    }
                                                    else if (columnIndex == 7) {
                                                        columnName = '服务费率%';
                                                        $('tr:eq(' + rowIndex + ') td:eq(7) input').val(item.CoverRate);
                                                    }
                                                }
                                            }
                                        });
                                    }
                                });
                            }
                        }
                    }
                };

                reader.readAsArrayBuffer(file); // 以 ArrayBuffer 形式读取文件内容
                $('#fileInput').prop("disabled", true);
                $('#fileInput').val(''); // 清空值
                $('#fileInput').prop('disabled', false);
            });
        });
        function importPolicy() {
            $('#fileInput').click();
        }
    </script>
</head>
<body>
    <input type="button" id="btnRead" value="导入Excel" onclick="importPolicy()" />
    <input type="file" id="fileInput" style="display:none;" />
    <br />
    <table id="gridTable" border="1">
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>编号</td>
            <td>电话</td>
            <td>手续费率%</td>
            <td>劳务费率%</td>
            <td>政府补助费率%</td>
            <td>服务费率%</td>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>2859</td>
            <td><input type="text" value="13012345601" /></td>
            <td><input type="text" value="13012345601" /></td>
            <td><input type="text" value="13012345601" /></td>
            <td><input type="text" value="13012345601" /></td>
            <td><input type="text" value="13012345601" /></td>
        </tr>
        <!--<tr>
            <td>2</td>
            <td>李四</td>
            <td>2858</td>
            <td><input type="text" value="13012345602" /></td>
            <td><input type="text" value="13012345601" /></td>
            <td><input type="text" value="13012345601" /></td>
            <td><input type="text" value="13012345601" /></td>
            <td><input type="text" value="13012345601" /></td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>2587</td>
            <td><input type="text" value="13012345603" /></td>
            <td><input type="text" value="13012345601" /></td>
            <td><input type="text" value="13012345601" /></td>
            <td><input type="text" value="13012345601" /></td>
            <td><input type="text" value="13012345601" /></td>
        </tr>-->
    </table>
</body>
</html>

*
*
*

KingCruel
关注
HTML Table导出EXCEL(支持大量数据，保留报表格式)
jasstool的博客
05-30 9442
最近项目上需要制作一张大数据量的报表，用润乾报表展示会非常慢，所以打算自己写html实现，但是网上大部分是保留格式但是有1.5M的大小限制，还有导出大量数据但是不保留格式的，所以在这里将两个结合一下，记录下来 首先是要导入相应的js，jQuery.js和在网上找到的FileSaver.js（原网址：https://github.com/kebingzao/fileSaver_excel/tree...
前端使用xlsx.js导入导出excel并展示
m0_62762847的博客
05-05 3317
因为项目中有需求要展示excel（内容只有一些简单的地址/地区等信息，没有复杂的样式，只是包含了一些合并的表格），所以利用XLSX的读写功能，对读取后的数据进行二次处理并展示。
前端HTML 表格导出到excel中（纯前端导出不经过后台）
Be a Man Keep fighting for destination
07-03 1926
<a id="dlink" style="display:none;"></a> <input type="button" onclick="tableToExcel('tables', 'name', 'myfile.xls')" value="Export to Excel"> <script type="text/javascript"...
HTML Table to Excel
高明的专栏
03-24 453
1.要导出的table <table> <tr> <td>姓名</td> <td>邮箱</td> <td>电话</td> </tr> <tr> <td>高sss</td> <td>xxx@xxx.com.cn</td> <td>xxxx</td> <
html table 表格导出到Excel
kongwei521的专栏
05-27 3595
最近在做统计功能，要求统计结果（表格）既能查看（BS系统，在浏览器查看），又能输出为excel文件。对于输出excel文件，在网上找到n种方案，因为还需查看，最终选择了统计结果输出为table，查看时直接显示table，输出excel时把table写进输出流，ContentType设置为application/vnd.ms-excel再输出，具体方法如下： 软件环境：VS2008，C#，IE，o
html table to excel 然后打印,html table to Excel(1)
weixin_33645583的博客
07-01 241
转载连接：http://www.fengfly.com/plus/view-197341-1.html最近做一个小的报表系统，功能本身没什么。最后客户要求一个打印功能，所谓打印，就是按照页面上报表的样子，一模一样的为其生成Excel文件。再也不想为了构造结构一样的Excel表格而再次考虑繁琐数据逻辑了！于是乎冒出了这样的一个想法：我要是能获得页面上的报表table，那么只要分析其结构，不就可以构造...
HTML Table导出Excel
PinkCoder
03-28 2078
HTML Table导出Excel
使用xlsx.full.min.js导出有复杂表头的excel（亲测有效）
07-28
使用xlsx.full.min.js导出有复杂表头的excel（亲测有效） > 今天项目用到了导出table表格，但表头有点特殊，多个合并的单元格。 > 搜索了半天，发现有博主使用 ``xlsx.full.min.js`` 做过此类功能，使用的是vue+...
前端导出excel，可以控制样式，单元格合并居中等
09-08
通过"xlsx.full.min.js"这个库，我们可以实现前端直接导出带有样式的Excel文件，包括单元格的合并和居中对齐等高级功能。下面将详细介绍这个过程及涉及到的技术要点。 一、xlsx.full.min.js库介绍 "xlsx.full.min....
JS导出复杂表头Excel：xlsx.full.min.js实用技巧
资源摘要信息:"在本篇文章中，作者详细介绍了如何使用xlsx.full.min.js库来实现导出包含复杂表头的Excel文件。这个过程在实际项目中非常实用，尤其当需要处理具有多个合并单元格的表头时。作者提到，尽管进行了长...
页面html Table表格导出Execl
08-20
将页面中的HtmlTable，导出为Execl 支持合并单位元、合并行等操作。续之前的优化了计算算法，升级了代码。
ReactHTMLTableToExcel:将HTML表格转换为Excel文件并下载
05-28
ReactHTMLTableToExcel 从HTML表格元素提供客户端生成的Excel（.xls）文件。 没有其他依赖 安装 npm install --save react-html-table-to-excel 特征 将HTML表格下载为.xls格式的Excel文件 没有服务器端代码 设置所需的.xls文件名和工作表 设置样式所需的类名和ID 支持的IE 11 选项 可用属性的列表可以在下面找到。 这些必须传递给包含的ReactHTMLTableToExcel组件。 财产 类型 描述 桌子 细绳 HTML表格元素的ID属性。 文件名 细绳 Excel文件名。 床单 细绳 Excel工作表的名称。 ID 细绳 按钮元素的ID属性。 班级名称 细绳 按钮元素的类属性。 buttonText 细绳 按钮文字。 例子 import React , { Compone
关于html table导出为csv，xls，TXT等js插件
03-11
bole.js,FileSaver.js,jquery.table2excel.js,tableExport.js,xlsx.core.min.js
jquery-table2excel:jQuery插件可将表格中HTML导出到Excel电子表格兼容文件
05-10
jQuery table2excel插件（ ） 核心表导出代码概念的#Credit转到insin（在#javascript中在Freenode上达到），而核心代码则受启发 第一的！！ 谢谢你的关注。 我一直无法维护它，并找到了下面的项目，它看起来比这个...
html table 转换excel,HTML中的table转为excel
weixin_36441329的博客
06-04 270
pageEncoding="UTF-8"%>Insert title herevar tableToExcel = (function() {var uri = 'data:application/vnd.ms-excel;base64,', template = '{table}', base64 = function(s) { return window.btoa(unescape(en...
other|html中table导出Excel
lolgigeo的博客
04-17 1876
有时候我们需要把网页中的数据导出excel格式来，那么我们用下面两种方法可以完成。 第一种.自写代码 <html> <head> <meta http-equiv="content-Type" content="text/html;charset=utf-8"/> <script type="text/javascript"> func...
HTML TABLE TO EXCEL
qq_33888187的博客
05-29 986
//EXCEL导出 方法一 function write_to_excel() { var dt = new Date(); var day = dt.getDate(); var month = dt.getMonth() + 1; var year = dt.getFullYear(); var hour = dt.getHours(); va...
HTmlTableTOExcel
weixin_34281477的博客
06-30 120
function TableTOExcel() { //第一种方法 //var url = 'data:application/vnd.ms-excel;base64,' + encodeURIComponent($('#data').html()) //console.info(url); //...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值