Vue2中实现数据复制到 Excel

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

首先安装 clipboard.js：

javascript 复制代码

npm install clipboard --save

复制按钮：

javascript 复制代码

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 = csvContent
  document.body.appendChild(tempElement)
  tempElement.select()

  try {
    // 直接使用execCommand
    const successful = document.execCommand('copy')
    if (successful) {
      this.$message.success('数据已复制到剪贴板，可以粘贴到Excel中')
    } else {
      this.$message.error('复制失败，请手动复制')
    }
  } catch (err) {
    this.$message.error('复制失败，请手动复制')
    console.error('复制失败:', err)
  } finally {
    // 清理DOM
    document.body.removeChild(tempElement)
  }
},