js html table转excel文件&& js获取(复制 / 粘贴板)的内容&&js复制table粘贴到excel中

已于 2023-04-10 10:05:19 修改
阅读量1.4k 收藏 4
点赞数
分类专栏： javascript 文章标签： javascript html excel
于 2021-07-06 17:34:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HeMister/article/details/118525528
版权

js html table转excel文件

参考资料：

70行代码实现vue+sheetJs导出excel功能
sheetJs的git项目代码

代码太长建议直接粘贴复制

<!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>
    <style>
        td,th,p {
            background-color:#ffffff;
        }
        p{
            width: 560px;
            padding: 20px;
        }
        body {
            background-color: rgb(172, 172, 172);
        }
    </style>
    <script type="text/javascript" language="javascript">
        var idTmr;
        function getExplorer() {
            var explorer = window.navigator.userAgent;
            //ie
            if (explorer.indexOf("MSIE") >= 0) {
                return 'ie';
            }
            //firefox
            else if (explorer.indexOf("Firefox") >= 0) {
                return 'Firefox';
            }
            //Chrome
            else if (explorer.indexOf("Chrome") >= 0) {
                return 'Chrome';
            }
            //Opera
            else if (explorer.indexOf("Opera") >= 0) {
                return 'Opera';
            }
            //Safari
            else if (explorer.indexOf("Safari") >= 0) {
                return 'Safari';
            }
        }
        function table2excel(tableid,ExcelName) { //整个表格拷贝到EXCEL中
            if (getExplorer() == 'ie') {
                var curTbl = document.getElementById(tableid);
                var oXL = new ActiveXObject("Excel.Application");

                //创建AX对象excel
                var oWB = oXL.Workbooks.Add();
                //获取workbook对象
                var xlsheet = oWB.Worksheets(1);
                //激活当前sheet
                var sel = document.body.createTextRange();
                sel.moveToElementText(curTbl);
                //把表格中的内容移到TextRange中
                sel.select();
                //全选TextRange中内容
                sel.execCommand("Copy");
                //复制TextRange中内容
                xlsheet.Paste();
                //粘贴到活动的EXCEL中
                oXL.Visible = true;
                //设置excel可见属性

                try {
                    var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
                }
                catch (e) {
                    print("Nested catch caught " + e);
                }
                finally {
                    oWB.SaveAs(fname);
                    oWB.Close(savechanges = false);
                    //xls.visible = false;
                    oXL.Quit();
                    oXL = null;
                    //结束excel进程，退出完成
                    //window.setInterval("Cleanup();",1);
                    idTmr = window.setInterval("Cleanup();", 1);

                }

            }
            else {
                tableToExcel(tableid,ExcelName)
            }
        }
        function Cleanup() {
            window.clearInterval(idTmr);
            CollectGarbage();
        }
        var tableToExcel = (function () {
            var uri = 'data:text/xls;charset=utf-8,\ufeff,',
                template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
                base64 = function (s) {
                    return window.btoa(encodeURIComponent(s))
                },
                format = function (s, c) {
                    return s.replace(/{(\w+)}/g,
                        function (m, p) {
                            return c[p];
                        }
                    )
                }
            return function (table, excelName,name) {
                if (!table.nodeType)
                    table = document.getElementById(table)
                var ctx =
                {
                    worksheet: name || 'Worksheet',
                    table: table.innerHTML
                }
                //window.location.href = uri + base64(format(template, ctx))

                var downloadLink = document.createElement("a");
                downloadLink.href = uri + format(template, ctx);
                downloadLink.download = excelName +'.xls';
                document.body.appendChild(downloadLink);
                downloadLink.click();
                document.body.removeChild(downloadLink);
            }
        }
        )()
    </script>
</head>


<body>
    <p>
        第二个列表是可以直接下载，但是第一个列表下载后内容为空，因为第一个列表有style属性设置的样式造成Excel转换失败显示内容为空</p>
    <table id="copyTable" style="border-collapse: collapse; margin-top: 1em; margin-bottom: 1em;">
        <thead>
            <tr>
                <td colspan="4" style="text-align: left;">
                    <div align="center" style="color:#000;font-weight:600;font-size:18px; padding: 8px 8px 8px"> 俄文为
                    </div>
                </td>
            </tr>
            <tr>
                <th
                    style="color: #112055; border-bottom: 1px solid #000; border-top: 2px solid #000; text-align: center;">
                    变量</th>
                <th
                    style="color: #112055; border-bottom: 1px solid #000; border-top: 2px solid #000; text-align: center;">
                    俄文我</th>
                <th
                    style="color: #112055; border-bottom: 1px solid #000; border-top: 2px solid #000; text-align: center;">
                    俄文我</th>
                <th
                    style="color: #112055; border-bottom: 1px solid #000; border-top: 2px solid #000; text-align: center;">
                    看i额外为i俄u我</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="4" style="padding: 5px 50px 5px; color: #000; font-weight: 900; text-align: left;">诶诶我
                </td>
            </tr>
            <tr>
                <td style="padding: 5px 50px 5px; color: #000; text-align: center;">1</td>
                <td style="padding: 5px 50px 5px; color: #000; text-align: center;">626</td>
                <td style="padding: 5px 50px 5px; color: #000; text-align: center;">7622234</td>
                <td style="padding: 5px 50px 5px; color: #000; text-align: center;">762234</td>
            </tr>
            
        </tbody>
    </table>
    <table id="copyTable1" width="600px">
        <thead>
            <tr>
                <td colspan="4">
                    <div align="center"> 萨科睡觉啊哭
                    </div>
                </td>
            </tr>
            <tr>
                <th>变量</th>
                <th>变量</th>
                <th>变量</th>
                <th>变量</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="4">阿舒拉节暗示
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>626</td>
                <td>7634</td>
                <td>7634</td>
            </tr>
            <tr>
                <td>2</td>
                <td>174</td>
                <td>2122</td>
                <td>976</td>
            </tr>
        </tbody>
    </table>
    </br>
    <input id="Button1" type="button" value="导出EXCEL-有style样式的" onclick="javascript:table2excel('copyTable','有style样式的')" />
    <input id="Button1" type="button" value="导出EXCEL-没有style样式的" onclick="javascript:table2excel('copyTable1','没有style样式的')" />
</body>
</html>

复制table粘贴到excel中

clipboardJS实现（推荐）
<!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>
    <style>
        td,
        th,
        p {
            background-color:#ffffff;
        }
        p{
            width: 560px;
            padding: 20px;
        }
        body {
            background-color: rgb(172, 172, 172);
        }
    </style>
    <!-- clipboardJS下载地址 https://github.com/zenorocha/clipboard.js/archive/master.zip -->
    <script src="./clipboard.min.js"></script> 
    <script type="text/javascript" language="javascript">
    function copy() {
        debugger
      let clipboardInstance = new ClipboardJS('.btn', {
        target: function (trigger) {
            debugger
          return trigger.nextElementSibling || document.getElementById('copyTable')
        }
      })

      clipboardInstance.on('success', e => {
        console.log('复制成功') //这里你如果引入了elementui的提示就可以用，没有就注释即可
        // 释放内存
        clipboardInstance.destroy()
      })
      clipboardInstance.on('error', e => {
        // 不支持复制
        console.log('该浏览器不支持自动复制')
        // 释放内存
        clipboardInstance.destroy()
      })
    }
    </script>
</head>


<body>
    <p>列表可是使用简单的复制粘贴，粘贴到excel文件中.
        <br/>
        需要注意的是excel文件只是别 十六进制颜色 “#222222”，不识别rgb和英文描述的颜色 "rgb(1,255,244)", "red".
        <br/>
        如果是rgb或者英文描述的颜色，复制出来的样式会丢失。
        </p>
    <table id="copyTable" style="border-collapse: collapse; margin-top: 1em; margin-bottom: 1em;">
        <thead>
            <tr>
                <td colspan="4" style="text-align: left;">
                    <div align="center" style="color:#000;font-weight:600;font-size:18px; padding: 8px 8px 8px"> 俄文为
                    </div>
                </td>
            </tr>
            <tr>
                <th
                    style="color: #112055; border-bottom: 1px solid #000; border-top: 2px solid #000; text-align: center;">
                    变量</th>
                <th
                    style="color: #112055; border-bottom: 1px solid #000; border-top: 2px solid #000; text-align: center;">
                    俄文我</th>
                <th
                    style="color: #112055; border-bottom: 1px solid #000; border-top: 2px solid #000; text-align: center;">
                    俄文我</th>
                <th
                    style="color: #112055; border-bottom: 1px solid #000; border-top: 2px solid #000; text-align: center;">
                    看i额外为i俄u我</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="4" style="padding: 5px 50px 5px; color: #000; font-weight: 900; text-align: left;">诶诶我
                </td>
            </tr>
            <tr>
                <td style="padding: 5px 50px 5px; color: #000; text-align: center;">1</td>
                <td style="padding: 5px 50px 5px; color: #000; text-align: center;">626</td>
                <td style="padding: 5px 50px 5px; color: #000; text-align: center;">7622234</td>
                <td style="padding: 5px 50px 5px; color: #000; text-align: center;">762234</td>
            </tr>
        </tbody>
    </table>
    </br>
    <button class="btn" data-clipboard-target="#copyTable" onclick="copy()">copy table</button>
</body>

</html>
clipboardJS参考文档

clipboardJS复制demo
clipboard.js实现将某tr下所有td的数据复制到系统粘贴板

execCommand复制(不推荐)
待更新。。。。。。
execCommand 参考文档

execCommand复制demo
execCommand不推荐的原因

js获取复制的内容

document.getSelection().toString()

https://www.cnblogs.com/zimengxiyu/p/11158934.html

js获取粘贴板的内容

https://jingyan.baidu.com/article/425e69e6875d03fe15fc1686.html

vue 推荐 vue-clipboard2

https://blog.csdn.net/Li8L9xF/article/details/123194877

微笑边缘的金元宝
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
通过JS实现点击复制页面表格到Excel
柒月
02-05 6194
本文基于react项目实现。 起因 接了一个需求，要求实现点击页面上的一个按钮，复制某个表格数据，然后ctrl+V到Excel表格中。 思考 其实我觉着这个功能用导出Excel的方式实现不就好了么。不过本着好奇的心思，还是试着做做看吧。 首先，点击按钮的时候要拿到要复制的数据。最初是想通过获取DOM元素的方式来取得表格，可是这样的话，得到的就是含有html标签的一堆字符串。那么只能自己来拼装数据了。我把表格部分的数据通过复制、黏贴到编辑器看下他是什么，结果如下图： 而页面上的表格是这样的： 对比来看：跟
HTML用JS导出Excel的五种方法
热门推荐
悲了伤的老王的博客
12-23 14万+
这五种方法前四种方法只支持IE浏览器，最后一个方法支持当前主流的浏览器（火狐，IE，Chrome，Opera，Safari） html 表格导出道 //第一种方法 function method1(tableid) { var curTbl = document.getElementById(ta
通过JavaScript脚本复制网页上的一个表格
溺水的鱼 - Later equals never.
09-30 1263
测试 测试表格 测试表格 测试表格 测试表格文字function CopyTable(){ CopyHtmlElement(oTable)} function CopyHtmlElement(obj){ editor.document.designMode = On; // 将iframe变成可编辑模式
网站开发进阶(二十五)js如何将html表格导出为excel文件_js如何把html文件改为excel文件流格式
最新发布
2401_84418948的博客
05-04 769
open() 方法可打开一个新文档，并擦除当前文档的内容。参数描述mimetype可选。规定正在写的文档的类型。默认值是 “text/html”。replace 可选。当此参数设置后，可引起新文档从父文档继承历史条目。说明该方法将擦除当前 HTML 文档的内容，开始一个新的文档，新文档用 write() 方法或 writeln() 方法编写。提示和注释。
获取复制excel表格数据
weixin_45930427的博客
04-23 127
)i++){})},
excel复制数据，粘贴到页面表格插件.zip
07-08
2. **JavaScript事件处理**：为了实现从Excel复制数据到网页表格的功能，我们需要监听用户的复制和粘贴行为。在JavaScript中，这通常通过`document.addEventListener('paste', event)`来实现。当用户执行粘贴操作时...
Grafana表格配置以及Panel/Dashboard复制粘贴
01-20
3. **导入Dashboard**：修改后的JSON文件可以再导入到Grafana中，生成一个新的Dashboard，这样就可以快速创建出与原Dashboard类似但具有不同数据条件的新仪表板。 此外，Grafana还支持权限管理、团队协作和定时邮件...
使用clipboard.js实现页面内容复制到剪贴板
11-20
总结，Clipboard.js是实现页面内容复制到剪贴板的一个高效工具，它简化了原本复杂的过程，让开发者能够快速地为网页添加复制功能。只需几步简单的配置，就能使用户体验得到显著提升。在实际项目中，可以根据具体需求...
基于js粘贴事件paste简单解析以及遇到的坑
12-12
在JavaScript中，`paste`事件允许开发者在用户执行粘贴操作时捕获并处理剪贴板的内容。本文将深入探讨如何在Chrome浏览器中利用此事件，并解决与Safari浏览器兼容性的问题。 首先，`paste`事件可以通过JavaScript给...
去除烦人的WORD及EXCEL冗余代码(Javascript).doc
06-11
在处理Microsoft Word和Excel文档时，常常会遇到一个问题：这些应用程序在复制粘贴内容到其他地方，如网页或文本编辑器时，会携带大量冗余的格式化代码。这些代码通常包括HTML标签，如`<SPAN>`、`<TABLE>`等，以及与...
js 实现 克隆表格
03-30
js 实现 克隆表格! 值得下载看看!资源免费,大家分享!!
复制excel内容粘贴到html表格中的输入框里
12-23
实现将复制的excel的内容粘贴到html 表格的输入框中的功能
用JS做复制网页表格内容和输入框内容功能
qq_34828100的博客
12-27 1238
最近要求要做一个复制表格内容的功能，效果如下： 点击复制按钮，会出现下面的效果： 网上一些都是复制 input 框里的内容，这次做的是复制表格内容，记录一下做的功能，思路是把表格内要复制的内容拼接成一个字符串，再把这个字符串赋值给 input 框里的值，再就跟 input 框一样操作复制功能了，最后是隐藏复制的内容。 &lt;div&gt; &lt;table id="table...
关于html表格复制到excel
huangyuanmu的专栏
09-09 662
刚才一个朋友问我这个事情，我拍脑袋想了一下，给他答复不可能，因为html是文本，而excel是二进制，两者没有关联关系，怎么能直接复制呢。于是就想到了写jxls模板，查询数据库导出这种方法。事后，不太确信自己的结论，所以问了下google大神，果然有简单的解决方案。   要解决html中的表格内容直接复制到excel，有个简单的办法，那就是在html表格的td标签加上vnd.ms-excel....
js实现页面表格内容的复制粘贴填充，实现快速填写
东方郭的博客
11-02 1万+
JS如下： /*选择开始复制位置*/ $(document).ready(function(){ $("table").on("click","td[scode]",function(){ $("table td[scode]").attr("class",""); $(this).attr("class","inputred"); }); }); function cellke
js用克隆(clone)的方法动态添加表格行
czl_danny的专栏
12-24 9316
<br />在js中用克隆(clone)的方法动态添加表格(table)行(tr):<br />用javascript的克隆方法添加表格的行要比用innerHTML方法代码简洁的多,主要使用Obj.cloneNode(true);方法进行克隆.<br />看下面的代码:<br /><select onchange="add_row(parseInt(this.options[this.selectedIndex].text,10),document.getElementById(’cloneTR’))"><
html table 粘贴excel
10-11
1. 将 Excel 中的表格复制到剪贴板。可以通过选择表格并使用快捷键 Ctrl+C (Windows) 或 Command+C (Mac) 来实现。 2. 在 HTML 编辑器中打开或创建一个 HTML 文件。 3. 在需要插入表格的位置，使用以下代码插入一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值