关于前端table的Excel打印

最新推荐文章于 2024-06-13 21:10:45 发布
最新推荐文章于 2024-06-13 21:10:45 发布
阅读量318 收藏
点赞数 1
分类专栏： 笔记 文章标签： dom javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AN27xy/article/details/108605117
版权

小功能说明：
直播带货每个品所讲解时间的打点记录以及形成的表格能Excel打印输出

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LiveTimeTable</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #liveTimeBox {
            width: 1000px;
            margin: 30px auto 0;
        }

        #liveTimeBox table {
            width: 100%;
            border-spacing: 0;
            font-size: 16px;
        }

        #liveTimeBox h1 {
            text-align: center;
        }

        #liveTimeBox table th {
            border: 1px solid rgba(0, 0, 0, 0.6);
            text-align: center;
            background-color: skyblue;
        }

        #liveTimeBox table td {
            border: 1px solid rgba(0, 0, 0, 0.6);
            border-top: none;
            text-align: center;
        }

        #liveTimeBox div {
            margin-top: 5px;
            width: 100%;
        }

        #liveTimeBox div button {
            outline: none;
            width: 92px;
            border: none;
            font-weight: bold;
            border-radius: 3px;
            cursor: pointer;
        }

        #liveTimeBox td button {
            font-weight: bold;
            outline: none;
            width: 40%;
            border: none;
            margin-bottom: 2px;
            border-radius: 3px;
            margin-left: 5px;
            cursor: pointer;
        }

        #liveTimeBox div button.add {
            float: right;
            cursor: pointer;

        }

        #liveTimeBox div button.start {
            float: left;
            cursor: pointer;
        }

        #liveTimeBox div button.print {
            margin-left: 5px;
            float: left;
            cursor: pointer;

        }

        #liveTimeBox td button:hover {
            background-color: skyblue;
            color: #fff;
        }

        #liveTimeBox div button:hover {
            background-color: skyblue;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="liveTimeBox">
        <h1>直播时间打点</h1>
        <form action="javascript:">
            <table id="table">
                <tr>
                    <th>产品名称</th>
                    <th>时间段</th>
                    <th>时长/秒</th>
                    <th>操作</th>
                </tr>
            </table>
        </form>
        <div>
            <button class="start">开始打点</button>
            <button class="print">打印</button>
            <button class="add">添加</button>
        </div>
    </div>
    <script type="text/javascript">
        function addEvent(elem, type, fn) {
            if (elem.addEventListener) {
                elem.addEventListener(type, fn, false);
            }
            else if (elem.attachEvent) {
                elem.attachEvent("on" + type, function () {
                    fn.call(elem);
                })
            }
            else {
                elem["on" + type] = fn;
            }
        }

        // 开始打点
        var startBtn = document.getElementsByClassName("start")[0];
        var time1 = "";//初始化时间段
        var time3 = 0;//初始化时长
        startBtn.onclick = function () {
            var thisTime = new Date();
            var timeS = thisTime.getTime();
            time3 = timeS;
            var timeH = thisTime.getHours();
            var timeM;
            if (thisTime.getMinutes() >= 10) {
                timeM = thisTime.getMinutes();
            }
            else {
                timeM = '0' + thisTime.getMinutes();
            }
            time1 = timeH + ":" + timeM;
            this.innerText = "已开始";
            this.style = "background-color:rgba(193, 43, 43, 0.5);"
        }

        // 添加
        var tableBoxChildren = document.getElementById("table").children;
        var addBtn = document.getElementsByClassName("add")[0];
        addEvent(addBtn, "click", addBtnFn);
        function addBtnFn() {
            if (startBtn.innerText == "已开始") {
                var divBox = document.createElement("div");
                divBox.style = "width: 100%;height: 100%;background-color: rgba(000, 000, 000, 0.5);position: fixed;top: 0;left: 0;";
                var formBox = document.createElement("form");
                formBox.style = "width: 500px; height: 300px;left: 0px;position: fixed;right: 0px;top: 0px;bottom: 0px;margin: auto auto;background-color:#fff;border-radius: 5px;";
                formBox.action = "javascript:";
                var h2 = document.createElement("h2");
                h2.style = "width: 100%;text-align: center;height: 100px;line-height: 100px;position: relative;top: 20px;";
                h2.innerText = "产品名称"
                var divBoxTwo = document.createElement("div");
                divBoxTwo.style = "height: 100px;text-align: center;";
                var inputBox = document.createElement("input");
                inputBox.style = "width: 400px;height: 30px;font-size: 20px;outline: none;text-indent: 5px;position: relative;top: 30px;background-color:rgba(128, 203, 233,0.5);";
                var divBoxThree = document.createElement("div");
                divBoxThree.style = "height: 100px;text-align: center;";
                var buttonFalse = document.createElement("button");
                buttonFalse.style = "height: 30px;width: 60px;font-weight: bold;outline: none;position: relative;top: 10px;float: left;margin-left: 80px;line-height: 30px;";
                buttonFalse.innerText = "取消";
                buttonFalse.onclick = function () {
                    document.body.removeChild(divBox);
                }
                var buttonTrue = document.createElement("button");
                buttonTrue.style = "height: 30px;width: 60px;font-weight: bold;outline: none;position: relative;top: 10px;float: right;margin-right: 80px;line-height: 30px;";
                buttonTrue.innerText = "确定";
                buttonTrue.onclick = function () {
                    var trBox = document.createElement("tr");

                    var tdBoxArray = [];
                    for (var i = 0; i < 4; i++) {
                        tdBoxArray[i] = document.createElement("td");
                    }
                    tdBoxArray[0].innerText = inputBox.value;
                    var thisTime = new Date();
                    var time4 = thisTime.getTime();
                    var timeH = thisTime.getHours();
                    var timeM;
                    if (thisTime.getMinutes() >= 10) {
                        timeM = thisTime.getMinutes();
                    }
                    else {
                        timeM = '0' + thisTime.getMinutes();
                    }
                    var time2 = timeH + ":" + timeM;
                    tdBoxArray[1].innerText = time1 + "-" + time2;
                    time1 = time2;
                    tdBoxArray[2].innerText = Math.round((time4 - time3) / 1000);
                    time3 = time4;
                    var tdBtn1 = document.createElement("button");
                    //修改
                    tdBtn1.innerText = "修改";
                    addEvent(tdBtn1, "click", tdBtn1Fn);
                    function tdBtn1Fn(e) {
                        var event = e || window.event;
                        var target = event.target || event.srcElement;
                        var divBox = document.createElement("div");
                        divBox.style = "width: 100%;height: 100%;background-color: rgba(000, 000, 000, 0.5);position: fixed;top: 0;left: 0;";
                        var divB = document.createElement("div");
                        divB.style = "background-color: #fff;width: 800px;margin: 0 auto 0;border: 1px solid rgba(0, 0, 0, 0.6);"
                        var table = document.createElement("table");
                        table.style = "width: 100%;border-spacing: 0;font-size: 16px;";
                        var tr = [];
                        for (var a = 0; a < 2; a++) {
                            tr[a] = document.createElement("tr");
                        }
                        var th = [];
                        var td = [];
                        var input = [];
                        for (var c = 0; c < 3; c++) {
                            td[c] = document.createElement("td");
                            td[c].style = "border: 1px solid rgba(0, 0, 0, 0.6);border-top: none;text-align: center;";
                            input[c] = document.createElement("input");
                            input[c].style = "width: 100%;outline: none;border: none;text-align: center;";
                            th[c] = document.createElement("th");
                            th[c].style = "border: 1px solid rgba(0, 0, 0, 0.6);text-align: center;";
                            input[c].value = target.parentElement.parentElement.children[c].innerText;
                        }
                        th[0].innerText = "产品名称";
                        th[1].innerText = "时间段";
                        th[2].innerText = "时长/秒";
                        var divC = document.createElement("div");
                        var button1 = document.createElement("button");
                        button1.style = "font-weight: bold;outline: none;width: 20%;margin-bottom: 2px;border-radius: 3px;float: left;background-color: skyblue;";
                        button1.innerText = "取消";
                        button1.onclick = function () {
                            document.body.removeChild(divBox);
                        }
                        var button2 = document.createElement("button");
                        button2.style = "font-weight: bold;outline: none;width: 20%;margin-bottom: 2px;border-radius: 3px;float: right;background-color: skyblue;";
                        button2.innerText = "确定";
                        button2.onclick = function () {
                            for (var i = 0; i < 3; i++) {
                                target.parentElement.parentElement.children[i].innerText = input[i].value;
                            }
                            document.body.removeChild(divBox);
                        }
                        for (var i = 0; i < 3; i++) {
                            td[i].appendChild(input[i]);
                        }
                        for (var j = 0; j < 3; j++) {
                            tr[0].appendChild(th[j]);
                            tr[1].appendChild(td[j]);
                        }
                        divC.appendChild(button1);
                        divC.appendChild(button2);
                        for (var b = 0; b < 2; b++) {
                            table.appendChild(tr[b]);
                        }
                        divB.appendChild(table);
                        divB.appendChild(divC);
                        divBox.appendChild(divB);
                        var script = document.getElementsByTagName("script")[0];
                        document.body.insertBefore(divBox, script);
                    }
                    //删除
                    var tdBtn2 = document.createElement("button");
                    tdBtn2.innerText = "删除";
                    tdBtn2.onclick = function () {
                        this.parentElement.parentElement.parentElement.removeChild(this.parentElement.parentElement);
                    }
                    tdBoxArray[3].appendChild(tdBtn1);
                    tdBoxArray[3].appendChild(tdBtn2);
                    for (var j = 0; j < 4; j++) {
                        trBox.appendChild(tdBoxArray[j])
                    }
                    var table = document.getElementsByTagName("table")[0];
                    table.appendChild(trBox);
                    for (var z = 0; z < tableBoxChildren.length; z++) {
                        if (z % 2 == 1) {
                            tableBoxChildren[z].style = "background-color: rgba(135, 171, 238, 0.1);"
                        }
                        else {
                            tableBoxChildren[z].style = "background-color: rgba(210, 100, 122, 0.1);"
                        }
                    }
                    document.body.removeChild(divBox);
                }
                divBoxTwo.appendChild(inputBox);
                divBoxThree.appendChild(buttonFalse);
                divBoxThree.appendChild(buttonTrue);
                formBox.appendChild(h2);
                formBox.appendChild(divBoxTwo);
                formBox.appendChild(divBoxThree);
                divBox.appendChild(formBox);
                var script = document.getElementsByTagName("script")[0];
                document.body.insertBefore(divBox, script);
            }
            else {
                alert("请点击'开始打点'");
            }
        }

        // 打印表格
        var tablesToExcel = (function () {
            var uri = 'data:application/vnd.ms-excel;base64,',
                bookXML = '<?xml version="1.0"?><?mso-application progid="Excel.Sheet"?><Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">' + '<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office"><Author>Axel Richter</Author><Created>{created}</Created></DocumentProperties>' + '<Styles>' + '<Style ss:ID="Currency"><NumberFormat ss:Format="Currency"></NumberFormat></Style>' + '<Style ss:ID="Date"><NumberFormat ss:Format="Medium Date"></NumberFormat></Style>' + '</Styles>' + '{worksheets}</Workbook>',
                sheetXML = '<Worksheet ss:Name="{nameWS}"><Table>{rows}</Table></Worksheet>',
                cellXML = '<Cell{attributeStyleID}{attributeFormula}><Data ss:Type="{nameType}">{data}</Data></Cell>',
                base64 = function (s) {
                    return window.btoa(unescape(encodeURIComponent(s)))
                },
                format = function (s, c) {
                    return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; })
                }
            return function (tables, wsnames, wbname, appname) {
                var ctx = "";
                var workbookXML = "";
                var worksheetsXML = "";
                var rowsXML = "";

                for (var i = 0; i < tables.length; i++) {
                    if (!tables[i].nodeType) tables[i] = document.getElementById(tables[i]);
                    //导出的行数
                    for (var j = 0; j < tables[i].rows.length; j++) {
                        rowsXML += '<Row>';
                        //导出的列数（减去后面“操作”）
                        for (var k = 0; k < tables[i].rows[j].cells.length - 1; k++) {
                            var dataType = tables[i].rows[j].cells[k].getAttribute("data-type");
                            var dataStyle = tables[i].rows[j].cells[k].getAttribute("data-style");
                            var dataValue = tables[i].rows[j].cells[k].getAttribute("data-value");
                            dataValue = (dataValue) ? dataValue : tables[i].rows[j].cells[k].innerHTML;
                            var dataFormula = tables[i].rows[j].cells[k].getAttribute("data-formula");
                            dataFormula = (dataFormula) ? dataFormula : (appname == 'Calc' && dataType == 'DateTime') ? dataValue : null;
                            ctx = {
                                attributeStyleID: (dataStyle == 'Currency' || dataStyle == 'Date') ? ' ss:StyleID="' + dataStyle + '"' : '',
                                nameType: (dataType == 'Number' || dataType == 'DateTime' || dataType == 'Boolean' || dataType == 'Error') ? dataType : 'String',
                                data: (dataFormula) ? '' : dataValue,
                                attributeFormula: (dataFormula) ? ' ss:Formula="' + dataFormula + '"' : ''
                            };
                            rowsXML += format(cellXML, ctx);//
                        }
                        rowsXML += '</Row>';
                    }
                    ctx = {
                        rows: rowsXML,
                        nameWS: wsnames[i] || 'Sheet' + i
                    };
                    worksheetsXML += format(sheetXML, ctx);
                    rowsXML = "";
                }
                ctx = {
                    created: (new Date()).getTime(),
                    worksheets: worksheetsXML
                };
                workbookXML = format(bookXML, ctx);
                //查看后台的打印输出
                var link = document.createElement("A");
                link.href = uri + base64(workbookXML);
                link.download = wbname || 'Workbook.xls';
                link.target = '_blank';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        })();
        var print = document.getElementsByClassName("print")[0];
        print.onclick = function () {
            if (startBtn.innerText == "已开始") {
                tablesToExcel(['table'], ['ProductDay1'], 'LiveTimeTable.xls', 'Excel')
            }
            else {
                alert("请点击'开始打点'");
            }
        }

    </script>
</body>

</html>
AN27Xy
关注
专栏目录
【vue】纯前端实现excel表格的下载
weixin_41498246的博客
09-27 539
【vue】纯前端实现excel 的下载。
tableExport.js实现前端表格的导出功能(支持中文)及打印
11-17
该插件可以将Html的表格导出成为 JSON, XML, CSV, TSV, TXT, SQL, Word, Excel, PNG，PDF格式。在项目上遇到pdf导出中文乱码问题，经过一天的研究修改了一些js代码解决了pdf导出中文乱码问题，随便融入了一个html打印功能的js，有需要的可以下载来看看。
前端js实现打印excel表格
weixin_30348519的博客
12-17 71
产品原型： 图片.png 功能需求：点击导出考勤表格按钮，会自动下载成Excel格式 图片.png 图片.png jsp页面代码： <div class="tools"> <button type="button" class="btn green" id="excell" onclick="me...
前端js实现打印（导出）excel表格
weixin_30487317的博客
11-02 80
产品原型： 图片.png 功能需求：点击导出考勤表格按钮，会自动下载成Excel格式 图片.png 图片.png jsp页面代码： <div class="tools"> <button type="button" class="btn green" id="excell" ...
Vue前端实现excel的导入、导出、打印功能_前端打印excel
2401_84433974的博客
04-29 2898
/ 指定单元格样式fill: { //背景色// 列宽‘wch’: 25 //列宽return obj;})sheet[‘!//列宽// // 每列的列宽// sheet[“!// wpx: 70 //单元格列宽// }, {// wpx: 70// }, {// wpx: 70// }, {// wpx: 70// }, {// }, {// }];
打印excel html js,前端js打印（导出）excel表格的方法实例
weixin_29661213的博客
06-17 1372
本文主要和大家分享前端js打印(导出)excel表格的方法实例，希望能帮助到大家。产品原型：图片.png功能需求：点击导出考勤表格按钮，会自动下载成Excel格式图片.png图片.pngjsp页面代码：导出考勤表js代码//打印表格var idTmr;function getExplorer() {var explorer = window.navigator.userAgent ;//ieif...
js打印excel文档，打印table
01-08
在JavaScript（JS）中，有时候我们需要将HTML页面中的特定内容，比如一个表格（table），导出或打印为Excel文档。这个过程涉及到多个技术点，包括DOM操作、CSS样式控制以及第三方库的使用。本篇文章将深入探讨如何...
tableExport_html表格导出excel等多种格式
12-05
在IT行业中，数据的导入和导出是...总的来说，"tableExport_html表格导出excel等多种格式"是一个实用的前端工具，通过简单的集成，它可以极大地提升网页表格数据的交互性和实用性，使得数据的导出变得更加便捷和高效。
table组件，前端如何使用table组件，打印数组数据，后端传输的数据应该如何打印
最新发布
weixin_62411896的博客
06-13 1473
在HTML中，table是常用组件之一，主要用来打印数组信息。table标签。
Table:快速打印表格。 打印（表
03-12
欢迎来到餐桌 表格是打印表格的辅助功能。 您可以绕过任何数据来打印表格！ [例如1d array ， 2d array和dictionary ] 它受javascript console.table启发。 我敢肯定，如果您练习编码面试，对您有很大帮助。 您无需费心使用内置的打印功能来检查结果！ 用法 import Table // 1D Array of String with Header print ( table : [ " Good " , " Very Good " , " Happy " , " Cool! " ], header : [ " Wed " , " Thu " , " Fri " , " Sat " ]) // 1D Array of Int print ( table : [ 2 , 94231 , 241245125125 ]) // 1D Array
打印table表格数据
10-25
资源包含打印页面及两个所需的js文件，轻量级代码即可实现打印表格数据，方便快捷用于自学和嵌套自己页面中
js打印表格
07-04
document.write('')
PrintTable一个打印的例子
06-14
PrintTable一个打印的例子
Vue2.js：前端在浏览器中网页表格打印的实现方案：window.print、print-js、iframe
彭世瑜的博客
10-13 4656
最近有一个需求，是让用户通过浏览器可以打印表格内容表格本身是使用了vue2.js + element-ui的el-table实现的，浏览器显示的时候很正常，没有什么异常。创建vue2项目 表格数据 data.js 界面显示 直接 打印效果不是很好。于是，开始寻找解决方案，大致有以下几种思路js打印页面 vue代码 打印预览 发现，直接打印是不行的当使用ctrl+p 拉起打印的时候，发现总有一些小问题，比如该方案适用于页面简单，打印效果过要求不高的场景我们可以通过css媒体查询，将打印按钮隐藏使用css媒体
前端 js 实现 表单表格的 打印和保存功能
xiaoqin5的博客
04-23 1175
前端 js 实现 表单表格的 打印和保存功能
html table to excel 然后打印,html table to Excel(1)
weixin_33645583的博客
07-01 198
转载连接：http://www.fengfly.com/plus/view-197341-1.html最近做一个小的报表系统，功能本身没什么。最后客户要求一个打印功能，所谓打印，就是按照页面上报表的样子，一模一样的为其生成Excel文件。再也不想为了构造结构一样的Excel表格而再次考虑繁琐数据逻辑了！于是乎冒出了这样的一个想法：我要是能获得页面上的报表table，那么只要分析其结构，不就可以构造...
vue+antd——实现table表格的打印——分页换行，每页都有表头——基础积累
yehaocheng520的博客
09-08 3197
vue+antd——实现table表格的打印——分页换行，每页都有表头——基础积累
vue3+ts--实际开发之--table表格打印或者保存
05-09 1047
vue3实现指定区域打印（导出）功能-主要是解决分页内容分割问题
前端根据el-table导出excel
07-28
你可以使用`xlsx`库来实现前端导出Excel的功能。首先，你需要安装`xlsx`库，可以通过以下命令在你的项目中安装： ``` npm install xlsx ``` 然后，在你的前端代码中，你可以按照以下步骤导出Excel： 1. 导入`xlsx...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值