vue中复制表格中数据到Excel，且表格可编辑

上需求：📄

需求如上图显示，复制后可以一键到Excel，并且表格可以修改。📊

识别的多个表格内容如上图。

修改后的数据还可以保存并复制。

好，了解了具体需求后，我们分析一下功能如下📝

1. OCR识别表格
2. 组装数据并拆分表格
3. 修改表格数据
4. 复制表格数据

大致的功能如上

上代码💻⌨🖱

// 表格复制
    tableToClipboard(index) {
      let table = document.getElementById(`tableData${index}`); 
      let range = document.createRange();
      range.selectNode(table);
      window.getSelection().removeAllRanges(); // 双击禁止选择文字
      window.getSelection().addRange(range); // 处于高亮选取状态
      document.execCommand('copy');
      window.getSelection().removeAllRanges();
      if(!this.showChat) return
      this.$emit('update:showChat',true)
    },
    // 保存表格数据
    tableToSave(index){
      this.activeEdit = ''
      // 由于input转换成table的识别需要一个时间，所以使用定时器
      setTimeout(()=>{
        this.tableToClipboard(index)
      },2000)
    },

📌注意:编辑后表格要是还能复制，必须加个定时器，要不然获取的内容是空。

// 获取复制的内容
document.addEventListener('copy', (e)=>{
    if (e.clipboardData || e.originalEvent) {
        let clipboardData = (e.clipboardData || e.originalEvent.clipboardData);
        let copiedText = window.getSelection().toString();
        window.copyData = copiedText

        clipboardData.setData('text/plain', copiedText);

        e.preventDefault()
    }
},false);

📌document.addEventListener需要放在methods外侧

okok，搞定✔