当前位置: 首页 > 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.dtcms.com/a/317238.html

相关文章:

  • 【普通地质学】地球的物质组成
  • 什么是OAuth2.0协议?有哪几种认证方式?什么是JWT令牌?和普通令牌有什么区别?
  • 【JS-7-ajax】AJAX技术:现代Web开发的异步通信核心
  • 数据赋能(381)——数据挖掘——支持异类数据库
  • Springboot 默认注入方式和@Primary
  • 高职5G移动网络运维实验(训)室解决方案
  • Wireshark协助捕获信号波形
  • 【STL源码剖析】从源码看 vector:底层扩容逻辑与内存复用机制
  • 常见类型在内存中的存储
  • 百度华为硬件笔试机试题-卷4
  • 5G毫米波射频前端测试:OTA暗室与波束成形性能验证
  • WinForm之ListView 组件
  • bat脚本实现获取非微软官方服务列表
  • Minio 高性能分布式对象存储
  • LiveQing视频RTMP推流视频点播服务功能-云端录像支持按时间段下载录像时间段下载视频mp4
  • eclipse2023创建工作集
  • 西门子PLC基础指令6:读取时钟指令、设置时钟指令、使能含义与注意
  • 比特币量化模型高级因子筛选与信号生成报告
  • 视图 vs 直接使用复杂SQL:深入比较
  • 场外期权的卖方是什么策略?
  • 未给任务“Fody.WeavingTask”的必需参数“IntermediateDir”赋值。 WpfTreeView
  • WPF的C1FlexGrid的单元格回车换行输入
  • 自学嵌入式 day45 ARM体系架构
  • Android Studio 利用工具检查未被使用的字符串
  • 排序算法(二)
  • vasp计算弹性常数
  • GISBox中OSGB数据转3DTiles格式指南
  • DDoS防护中的流量清洗与智能调度:构建网络安全坚实屏障
  • 《动手学深度学习》读书笔记—9.6编码器-解码器架构
  • 秋招笔记-8.6