前端如何使用js去更改复制网页内容的格式（如复制的是表格，我们只想拿到他的内容文本）

#在我看到这个需求的时候，我是不理解的，为什么电脑浏览器复制粘贴我可以去影响，可能这就是作为一个初级开发者的苦恼吧，起初是项目里显示的表格，产品想让复制完再粘贴到别的地方是另外一种格式，于是我找了各种方法，融合到一起，实现了复制下来的表格粘贴后只拿到内容的效果，话不多说，一起来看一下吧！#

一、首先我们看到的是表格，如果不主动影响浏览器的复制粘贴事件，粘贴下来的依旧会是表格的形式；

未影响复制粘贴事件前的粘贴结果如下图：

二、解决办法：

其实思路很简单，监听copy事件，拿到复制后的内容，再一步一步转化为自己想要的结果。

//连续选择多个文字复制后，粘贴时字符拼接连续成一段字符且不分段
export function copyStick() {
  console.log('-=-=-=-=-=-=-');
  document.addEventListener('copy', function (e) {
    // 事件处理逻辑
    if (window.getSelection().toString()) {
      // 阻止默认的复制行为
      e.preventDefault();
      // 获取被复制的内容
      var copiedHTML = window.getSelection().toString();
      console.log(copiedHTML,'copiedHTML');
      var rows = copiedHTML.replace(/\s+/g, ',').split(',');
      // var result = rows.filter(function (str) {
      //   return str.trim() !== "" && str.trim() !== '⠀';
      //   // return str && str.replace(/\s+/g, "").replace('⠀', '');
      // });
      var charRule = rows.join(''); // 去除每行末尾的换行符
      // 检查浏览器是否支持Clipboard API
      if (!navigator.clipboard) {
        console.error("浏览器不支持Clipboard API");
        return;
      }
      // 复制文本到剪贴板
      navigator.clipboard.writeText(charRule).then(function () {
        console.log("文本已成功复制到剪贴板",charRule);
      }, function () {
        console.error("复制文本到剪贴板失败");
      });
    }
  });
  // 格式化表格内容为纯文本形式
  function formatTableAsPlainText(html) {
    var tempDiv = document.createElement('div');
    tempDiv.innerHTML = html;
    // 移除表格中的样式和标签，只保留表格内容
    tempDiv.querySelectorAll('table').forEach(function (table) {
      table.removeAttribute('style');
      table.removeAttribute('class');
      table.removeAttribute('border');
      table.outerHTML = table.innerHTML;
    });
    return tempDiv.textContent;
  }
}

三、引入格式过的方法
最后只需要在自己想使用的文件里引入就可以啦！

import {copyStick,} from "../utils/index.js";
 

created() {
copyStick();
},