excel复制内容及样式到网页

最新推荐文章于 2023-09-11 14:58:09 发布
最新推荐文章于 2023-09-11 14:58:09 发布
阅读量560 收藏
点赞数
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46126127/article/details/124668880
版权

在做前端的类excel表格组件的时候遇到一个需求，要可以在网页和excel中可以互相复制文本及样式

excel表格

网页

 

刚开始从剪切板获取数据的时候是这么写的

显示的结果是这样的

通过 百度解析到两个blob对象

 

用FileReader对象去读取出来的结果分别是

文字

html字符串

 

正常情况下html解析出来的正是我们所需要的，但是却缺少了我所需要的样式。

我找了好久也没有相关案例直到我看见了这个 

浏览器的粘贴事件............

不知道有这个时间，所以之前一直使用的是键盘事件   苦涩ing

得到的结果是这个样子

 

可以看到我们朝思暮想的样式就在style标签里

但首先需要把字符串解析为document对象

刚开始找到的解析字符串的方法是这个

let doc = new DOMParser().parseFromString(html, "text/html");

 

 但发现只能获取到行内样式，不知道怎么获取内部样式，百度了一下还是没有相关案例，没办法只能另寻他法

html字符串拿去生成一个页面是没问题的，我就想到了iframe，虽然有点取巧但起码解决了问题

如果有更好的方法希望指点一下我这个萌新   苦涩ing

 

 

qq_46126127
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS-XLS/X读取和解析Excel表格文件(xls/xlsx)的JavaScript插件
weixin_30758821的博客
05-09 1428
最近有一个要求，我的一个项目中解析Excel文件（与xls/xlsx扩展）在浏览器（使用JavaScript当然）。所以我在网上看了一下，发现了这2个有用的库： js-xls js-xlsx 让我们看看他们是如何工作的。 兼容性 支持读取文件格式 Excel 2007+ XML Formats (XLSX/XLSM) Excel 2007+ Binary Format (...
直接将EXCEl数据黏贴到网页表格
07-28
采用js函数，不必设置table或td或input的id直接将excel的表格数据黏贴到html的table
如何复制excel内容至web页面中
03-16
NULL 博文链接：https://gznofeng.iteye.com/blog/341519
[免费-原创] 网页中模拟Excel CSS样式
03-18
利用CSS可以制作出出众的效果，不信你来看看这张网页。 用纯CSS模拟的Excel表格，没有是用任何图片。 [colin3dmax]为大家提供更多免费资源
【一种使用浏览器读取本地excel、josn等数据文件的方法】Python+JavaScript+HTML实现
最新发布
神奇代码在哪里
09-11 1460
一般来说，为了网络访问安全，浏览器是不能直接加载本地文件的，IE内核的浏览器提供了AX控件实现本地文件的读取，Chrome 86 版本后也提供了相应的API，但都存在使用限制和兼容性问题。有时开发者只是想利用浏览器编制一些简单的脚本完成一些任务，不想学习C、C++、Python生成exe这么大动作，例如使用JavaScript脚本读取本地一个excel文件进行统计分析。但由于浏览器无法使用本地文件这个限制，只好放弃。本文讨论研究一种非IE内核浏览器读取本地excel数据的方法，绕开这个限制。
【JavaScript】实现将从Excel中复制的数据粘贴到WEB页面Grid中
u014712365的博客
07-27 143
WEB项目中，我们有时会碰到这样的情况，需要将从Excel中复制的数据粘贴到WEB页面Grid中(当然复制的数据格式与Grid中数据显示格式是一致的)，用JS实现起来并不难，重要的是如何准确得到从Excel中复制的数据。下面代码主要针对这个问题进行实现： 1 var content = clipboardData.getData("Text"); 2 if (content!=null...
vue实现复制excel内容黏贴到网页，进而插入到el-table中
欢迎小伙伴们的评论和私信，工作日基本都会上来看看的哈
11-02 4182
先上一波效果图 以下是做这个功能的由来（觉得无聊的直接去看代码，捂脸） 老大让我做一个从excel复制选中的内容，然后在el-table里面黏贴，从而实现数据的批量导入到后台管理系统中，这样就不用一个一个输入了，我刚开始想，这怎么可能嘛，一个是excel表格，一个是代码，这 俩咋看也不沾边啊，然后老大给我说，这种功能是有的，你去网上随便一搜，很多教程的，那个clipboard插件好像就可以，然后我去搜了，发现不是那样，草（是一种植物），那个clipboard的复制，说到底也是给要复制的地方加个事件触发，然
excel样式转html,『excel样式转html』如何将HTML给转换成Excel格式了给转换成Excel格式...
weixin_28769407的博客
06-29 282
如何将html转换成excel一：Html转为Excel1我开网络上的一个包含表容的页面，点击菜-文件-另存为。2弹出窗口选择保存路径保存类型选为“htm 或Html格式”。3在计算机上新建一个Excel文件并打开，点击菜单栏-数据-导入外部数据-导入数据。4找到刚才保存的“Html”单击打开，再单击“导入”。5在弹出的“导入数据”窗口中你可以选择“现有工作表”或者“新建工作表”，然后单击确定。E...
复制excel数据到网页表格上
aadnf的博客
10-20 1329
在前端开发过程中，有的时候我们会希望可以直接将excel上的数据复制粘贴到页面上的表格中，所以也就有了这一篇博客。
excel内容粘贴至页面
w_t_y_y的博客
06-15 399
1、直接粘贴： <!-- @format --> <template> <div class="body"> <textarea @paste="onPaste" style="height:200px;width:200px"></textarea> </div> </template> <script> export default { name: 'Default', dat
Excel VBA技巧实例手册
07-28
技巧100将文档保存为网页 技巧101查看工作簿的信息 技巧102查看工作簿的内置属性 技巧103设置工作簿密码 技巧104查看用户状态信息 技巧105设置工作簿的数字精度 技巧106激活工作簿 技巧107保护工作簿 技巧108设置...
Excel VBA实用技巧大全 附书源码
10-08
04189复制单元格（复制全部内容） 04190复制单元格的值（PasteSpecial方法） 04191复制单元格的值（Value属性） 04192复制单元格的数据和公式（去掉前缀字符） 04193复制单元格的数据和公式（保留前缀字符） 04194...
EXCEL集成工具箱V6.0
09-11
【新建工作表】 批量新建或者复制工作表，依指定存储格内容可以瞬间建立/复制1到255个。还可以在新建或复制时全自动命名。分为自动新增方式与依指定存储格内容两种方式。 【插入批注背景】 可以选定任意一幅图片为...
一篇文章介绍前端导入Excel文件解析为Json
superherooooss的博客
02-06 2852
点击浏览器页面中的选择文件按钮上传该Excel文件，在控制器中查看输出结果。准备需要导入的EXCEL文件。
参考和引用Excel表格数据，浏览器简单在线获取页面Excel文件
speedpdf的博客
02-19 262
大数据时代，看似平平常常的生活场景，其实离不开这些海量数据。如所接触到的文件、照片、视频，都有大量的数据信息蕴含其中。人人都能从中获益，既为我们节省了时间，也为对方省去了不少繁琐之事。 现在几乎每天网上都会繁衍出无数的数据，它成了不可或缺的生产因素。其实大数据本身是没有价值的，怎么看待这个说法需要看使用者。如果认为这份数据对分析某件事情有极大帮助，就会存在价值。而如果我们不会去利用这些数据作参考和引用，那数据也只是一堆数字和文字推集成的文件。 我在speedceo直接搜到了一些Excel文件。当然这些文件都
用JAVA实现将execl表格中多行数据复制粘贴到现有页面上（js控制）
mischen520的博客
04-15 3042
1.下面是js实现的主要代码： //这个方法只适合IE，用于将excel表格多行数据复制粘贴到现有text或者textarea文本中， function copy(){ var clipboardData = window.clipboardData; //for IE if (!clipboardData) { // for chrome
java实现将excle数据导入到web页面
weixin_42932323的博客
09-07 2928
1.Service实现类 @Override public List&lt;ListExcle&gt; loadScoreInfo(String xlsPath) throws IOException { List&lt;ListExcle&gt; temp = new ArrayList&lt;ListExcle&gt;(); FileInputStre...
Vue实现复制excel表格内容粘贴至网页
rush_peng的博客
03-30 2663
文章目录一.实现效果二。原理 一.实现效果 二。原理 因为现在的谷歌等浏览器从安全等角度考虑，禁止直接读取剪切板上的东西。所以要手动的实现粘贴的这一步，通过粘贴到text文档上，然后，使用for遍历，根据 \n 把每一行分开，然后再根据 CopyExcelToTable(demo, data, source, clear) { if (clear) { // 清空原有元素 data.splice(0, data.length
js 实现复制excel内容到网页
05-28
您可以使用 `js-xlsx` 库，该库可以解析 Excel 文件，并将其转换为 JavaScript 对象。然后，您可以使用 JavaScript 动态创建 HTML 表格，并将 Excel 数据填充到表格中。最后，您可以使用 `document.execCommand('copy')` 将表格内容复制到剪贴板中。 以下是一个示例代码，可以将 Excel 数据复制到网页中： ```html <!-- HTML 结构 --> <div> <button id="copy-btn">复制表格</button> <table id="excel-table"></table> </div> <!-- 导入 js-xlsx 库 --> <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script> <script> // 从 Excel 文件读取数据 const file = document.querySelector('#excel-file').files[0]; const reader = new FileReader(); reader.onload = function(event) { const data = new Uint8Array(event.target.result); const workbook = XLSX.read(data, { type: 'array' }); const sheetName = workbook.SheetNames[0]; const sheetData = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]); // 创建 HTML 表格，并填充数据 const table = document.querySelector('#excel-table'); const headerRow = document.createElement('tr'); Object.keys(sheetData[0]).forEach(key => { const th = document.createElement('th'); th.textContent = key; headerRow.appendChild(th); }); table.appendChild(headerRow); sheetData.forEach(rowData => { const row = document.createElement('tr'); Object.values(rowData).forEach(value => { const cell = document.createElement('td'); cell.textContent = value; row.appendChild(cell); }); table.appendChild(row); }); }; reader.readAsArrayBuffer(file); // 复制表格内容到剪贴板 const copyBtn = document.querySelector('#copy-btn'); copyBtn.addEventListener('click', function() { const range = document.createRange(); range.selectNode(document.querySelector('#excel-table')); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); document.execCommand('copy'); window.getSelection().removeAllRanges(); }); </script> ``` 注意：上述代码仅供参考，具体实现可能需要根据您的具体情况进行修改。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值