Copy 复制数据功能 clipboard

copy 复制数据功能

使用了 clipboard 

1、给copy按钮绑定clipboard

<el-button
       ref="dataCopy"
       data-clipboard-action="copy"
       :data-clipboard-text="copyText"
       @click="copyLink"
       class="copyBtn"
       >COPY</el-button
        >


let clipboard = new Clipboard(".copyBtn");

 

2、定义copy函数，拼header 和 数据

export function copyClipboardSetting(header: [], content: any) {
  // Copy Clipboard Setting
  let text = "";
  // ヘッダー
  for (let i = 0; i < header.length; i++) {
    const headerStr = header[i];
    if (i == 0) {
      text = text + headerStr;
    } else {
      text = text + '\t' + headerStr;
    }
  }
  text = text + '\n';
  // データ
  text += content
  return text
}

3、在使用的vue页面定义好当前的表头，以及拼接成带\n 换行数据

const tableHeaders = [
      "表头1",
      "表头2",
      "表头3",
      "表头4",
      "Amount",
      "単価",
      "SP",
    ];


// 调用接口得到数据dataList后

 // copy data 
       content = dataList.value
            .map(
              (item) =>
                `${item.param1}\t${item.param2}\t${item.param3}\t${item.param4}\t${item.param5}\t${item.param6}\t${item.amount}\t${item.unit}\t${item.sp}`
          )
        .join("\n");
  // 调用copy方法，把数据和表头作为参数传递过去 
       copyText.value = copyClipboardSetting(tableHeaders, content);

4、定义copy方法

 // コピー
    const copyLink = () => {
      clipboard.on("success", function () {
        ElMessage.success("コピー成功");
        clipboard.destroy();
        clipboard = new Clipboard(".copyBtn");
      });
      clipboard.on("error", function () {
        ElMessage.error("コピー失敗");
        clipboard.destroy();
        clipboard = new Clipboard(".copyBtn");
      });
    };

5、使用完毕之后，切换其他页面，要把其销毁，否则会影响到其他页面

onBeforeUnmount(() => {
      clipboard.destroy();
    });