JS 复制后修改复制内容

浏览器支持程度不同,不过主流浏览器基本都OK

场景

因内部元素的问题,复制后粘贴的文本总是会被换行,需要做优化处理
代码:

//此处仅进行全局的操作,如果想监听特定区域的应获取Element对象绑定事件
document.oncopy = () => {// 监听浏览器复制事件
        event.preventDefault();//阻止默认事件,防止复制真实发生
        let content = window.getSelection().toString();//获取复制的文本值
        event.clipboardData.setData("text", content.replace(/[\n\r]/g,' '));//使用replace替换掉换行符,同时用\n\r是为了防止不同系统的不同换行符
    };

clipboard对象操作方法非常丰富,详见ES6语法
Clipboard API 的操作是异步的,是对传统document.execCommand()的升级,使用 Promise 对象,不会造成页面卡顿

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用 `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、付费专栏及课程。

余额充值