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

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;//ieif (explorer.indexOf("MSIE") >= 0) {return 'ie';}//firefoxelse if (explorer.indexOf("Firefox") >= 0) {return 'Firefox';}//Chromeelse if (explorer.indexOf("Chrome") >= 0) {return 'Chrome';}//Operaelse if (explorer.indexOf("Opera") >= 0) {return 'Opera';}//Safarielse 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对象excelvar oWB = oXL.Workbooks.Add();//获取workbook对象var xlsheet = oWB.Worksheets(1);//激活当前sheetvar 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><thstyle="color: #112055; border-bottom: 1px solid #000; border-top: 2px solid #000; text-align: center;">变量</th><thstyle="color: #112055; border-bottom: 1px solid #000; border-top: 2px solid #000; text-align: center;">俄文我</th><thstyle="color: #112055; border-bottom: 1px solid #000; border-top: 2px solid #000; text-align: center;">俄文我</th><thstyle="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() {debuggerlet clipboardInstance = new ClipboardJS('.btn', {target: function (trigger) {debuggerreturn 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><thstyle="color: #112055; border-bottom: 1px solid #000; border-top: 2px solid #000; text-align: center;">变量</th><thstyle="color: #112055; border-bottom: 1px solid #000; border-top: 2px solid #000; text-align: center;">俄文我</th><thstyle="color: #112055; border-bottom: 1px solid #000; border-top: 2px solid #000; text-align: center;">俄文我</th><thstyle="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

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

关于Excel操作编写的一个软件设计构思案例[连载] --如何打开Excel文件，获取需要列的数据显示到表格内做修改
如何打开Excel文件,获取需要列的数据显示到表格内做修改? DataSet 读取表格数据 = new DataSet(); Thread 读取, 更新; int 计数 = 0, 定位 = 0, 原条 ...
dropzone.js应用java_拖拽文件上传（Java篇）dropzone.js的简单使用
java实习生一枚,前端知识薄弱,最近因为工作需要,做了一个拖拽文件上传的功能,发现dropzone.js挺不错的,特地做个笔记. dropzonejs 的官网是:http://www.dropzon ...
ios下js复制到粘贴板_h5实现一键复制到粘贴板兼容ios
实现原理采用document.execCommand('copy') 来实现复制到粘贴板功能复制必须是选中input框的文字内容,然后执行document.execCommand('copy') ...
Java利用jxl.jar操作Excel文件的方法——把两列相同的数据扫描输出到新的Excel文件中...
为什么80%的码农都做不了架构师?>>> 最近公司在做数据库方面的改造,其中有两个核心库,可以把它们分别命名成A侧库和B侧库,改造的目的是把AB的库整合成一个库,其中表名相同的 ...
python上传excel文件_flask上传excel文件，无须存储，直接读取内容
运行环境python3.6import xlrd from flask import Flask, request app = Flask(__name__) @app.route("/&q ...
flask上传excel文件，无须存储，直接读取内容
运行环境python3.6 import xlrd from flask import Flask, requestapp = Flask(__name__)@app.route("/&qu ...
mysql用代码导入excel文件在哪里_麻烦大侠们、高手们帮我解决excel表导入mysql数据库中，这是我的代码和映射文件，不知道错在哪...
excel表见图(表名:excel)我的数据库:graduates,数据表:mynews,字段:title,author,acontent新建myBean包新建db.java连接加载数据库packag ...
ios下js复制到粘贴板_EXCEL被你忽视的粘贴板-11
这一节我们来聊聊粘贴板的用途,什么?你居然没用过粘贴板?平时只是ctrl+c,然后ctrl+v,好吧,那我们看看粘贴板到底能干些啥. 1.提取区域内的内容有时我们选择一块区域发给同事,但当他需要编辑 ...
excel文件操作、多线程
总结 # 首先导入openpyxl import openpyxl openpyxl.load_workbook(地址) - 打开现有的excel文件 openpyxl.Workbook() - 新建 ...