当前位置: 首页 > news >正文

Vue2中实现数据复制到 Excel

要实现点击"点我复制"按钮将 array 数据复制到剪贴板,以便可以粘贴到 Excel 文档中,可以使用以下方法:

首先安装 clipboard.js:

npm install clipboard --save

复制按钮:

copyText() {// 确保ksList不为空if (!this.ksList || this.ksList.length === 0) {this.$message.warning('没有数据可复制')return}// 创建中英文标题映射const headerMap = {title: '标题',url: '视频链接',author_name: '作者名称',author_id: '作者ID',author_url: '作者主页链接',play_count: '播放数',pubtime: '发布时间',like_count: '点赞数',comment_count: '评论数',cover_img: '封面图链接',platform_name: '平台名称',page: '页码',duration: '时长',user_custom_verify: '用户标签',user_custom_verify_info: '用户认证信息',}// 获取所有属性作为列标题// const headers = Object.keys(this.ksList[0])const headers = Object.keys(this.ksList[0]).filter((key) => key !== 'checked')// 构建CSV内容 - 使用中文标题let csvContent =headers.map((header) => headerMap[header] || header).join('\t') + '\n'// let csvContent = headers.join('\t') + '\n' // 标题行this.ksList.forEach((item) => {// 对每个属性值进行处理,确保字符串中的特殊字符不会破坏格式const row = headers.map((header) => {let value = item[header]// 处理可能包含换行符或制表符的文本if (typeof value === 'string') {value = value.replace(/[\n\r]/g, ' ') // 替换所有换行和回车为空格}return value})csvContent += row.join('\t') + '\n' // 数据行})// 创建一个临时元素用于复制const tempElement = document.createElement('textarea')tempElement.value = csvContentdocument.body.appendChild(tempElement)tempElement.select()try {// 直接使用execCommandconst successful = document.execCommand('copy')if (successful) {this.$message.success('数据已复制到剪贴板,可以粘贴到Excel中')} else {this.$message.error('复制失败,请手动复制')}} catch (err) {this.$message.error('复制失败,请手动复制')console.error('复制失败:', err)} finally {// 清理DOMdocument.body.removeChild(tempElement)}
},
http://www.lryc.cn/news/611901.html

相关文章:

  • OceanBase DBA实战营2期--自动分区分裂学习笔记
  • 虚幻GAS底层原理解剖四 (TAG)
  • 《爬虫实战指南:轻松获取店铺详情,开启数据挖掘之旅》
  • Adobe Analytics 数据分析平台|全渠道客户行为分析与体验优化
  • 时隔六年!OpenAI 首发 GPT-OSS 120B / 20B 开源模型:性能、安全与授权细节全解
  • 【WAIC 2025】AI安全的攻防前线:合合信息AI鉴伪检测技术
  • 算法训练营DAY55 第十一章:图论part05
  • 支持向量机(SVM)算法依赖的数学知识详解
  • 非机动车识别mAP↑28%!陌讯多模态融合算法在智慧交通的实战解析
  • Unity里的对象旋转数值跳转问题的原理与解决方案
  • Linux《进程间通信(上)》
  • Android 之 Kotlin中的符号
  • Linux---第二天---基础指令
  • 基于Python的超声波OFDM数字通信链路设计与实现
  • 2024年测绘程序设计比赛--空间探索性分析(数据为2025年第三次模拟数据)
  • 基于MCP提示构建工作流程自动化的实践指南
  • ipv6学习
  • ESP32:2.搭建UDP服务器
  • Wireshark协助捕获信号波形
  • 强化应急通信生命线:遨游三防平板、卫星电话破局极端灾害救援
  • OpenWebUI通过pipeline对接dify的workflow
  • 5G随身WiFi怎么选?实测延迟/网速/续航,中兴V50适合商务,格行MT700适合短租、户外党~避坑指南+适用场景全解析
  • 5G毫米波射频前端测试:OTA暗室与波束成形性能验证
  • 中宇联5G云宽带+4G路由器:解锁企业办公高效协同与门店体验升级
  • GPU 优化-用 tensor core实现5G Massive MIMO 64x64
  • Solidity:接口与实现的“契约”关系研究,以Uniswap V3为例
  • Lesson 31 Success story
  • 【动态规划 | 01背包】动态规划经典:01背包问题详解
  • 虚拟机磁盘扩容
  • 深度解读丨利用 DeepSeek 开放权重模型推动悦数 Graph RAG AI 开发平台创新