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)}
},