Vue3 Table 复制数据到Excel，可指定列和行进行复制到Excel，指定表头列 复制全部表格数据到Excel粘贴

Vue3 Table 复制数据到Excel，可指定列和行进行复制到Excel，指定表头列 复制全部表格数据

vue2 使用 vue-clipboard3
vue3 使用 vue-clipboard3

我这里使用Vue3 所以用vue-clipboard3。
使用npm 如失败或报错则使用cnpm

npm install --save vue-clipboard3

引入

 import useClipboard from 'vue-clipboard3';
 const { toClipboard } = useClipboard();

html代码

<template>
  <div>
    <div class="gva-table-box">
      <div class="gva-btn-list">
        <el-button @click="copyListFun" type="primary" size="small"
          >复制</el-button>
        <el-button @click="copyListAll" type="primary" size="small"
          >指定列复制全部</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        tooltip-effect="dark"
        row-key="ID"
        @selection-change="handleSelectionChange">
        <el-table-column align="left" type="selection" width="55" />
        <el-table-column label="Date" width="120">
          <template #header>
            <el-checkbox v-model="checkboxList.date" label="Date"></el-checkbox>
          </template>
          <template #default="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column property="name" label="Name" width="120">
          <template #header>
            <el-checkbox
              v-model="checkboxList.name"
              label="Name">
              </el-checkbox>
             </template>
             </el-table-column>
        <el-table-column property="address" label="Address">
        <template #header>
            <el-checkbox
              v-model="checkboxList.address"
              label="Address">
              </el-checkbox> 
              </template
        ></el-table-column>
      </el-table>
   
    </div>
  </div>
</template>

script代码

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import useClipboard from "vue-clipboard3";
const { toClipboard } = useClipboard();

const tableData = ref([
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-08",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-06",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
]);


//  这个是表格表头列的字段  数据表格的字段
const checkboxList = ref({ date: true, name: false, address: false });

//复制
const copyListFun = async () => {
  let str = "";

  let checkboxSelected = Object.keys(checkboxList.value).filter(
    (item) => checkboxList.value[item] == true
  );
console.log("checkboxSelected",checkboxSelected)

  if (checkboxSelected.length == 0) {
    ElMessage({
      type: "error",
      message: "请选择表格表头的选择框",
    });
    return;
  }
  if (multipleSelection.value.length == 0) {
    ElMessage({
      type: "error",
      message: "请选择表格行数据",
    });
    return;
  }

  multipleSelection.value.forEach((item) => {
    // \t:跳到下一制表符位置   \n：换行
    for (let i = 0; i < checkboxSelected.length; i++) {
      if (i + 1 < checkboxSelected.length) {
        str += item[checkboxSelected[i]] + "\t";
      } else {
        str += item[checkboxSelected[i]] + "\n";
      }
    }
  });
  console.log(str);

  await toClipboard(str);
  ElMessage({
    type: "success",
    message: "复制成功",
  });
};

//复制
const copyListAll = async () => {
  let str = "";
  let checkboxSelected = Object.keys(checkboxList.value).filter(
    (item) => checkboxList.value[item] == true
  );
  if (checkboxSelected.length == 0) {
    ElMessage({
      type: "error",
      message: "请选择表格表头的选择框",
    });
    return;
  }

  tableData.value.forEach((item) => {
    // \t:跳到下一制表符位置   \n：换行
    for (let i = 0; i < checkboxSelected.length; i++) {
      if (i+1<checkboxSelected.length){
            str += item[checkboxSelected[i]]+'\t'
          }else{
            str += item[checkboxSelected[i]]+'\n'
          }
    }
  });
  console.log(str);

  await toClipboard(str);
  ElMessage({
    type: "success",
    message: "复制成功",
  });
};

const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};
</script>

style代码

<style lang="scss">
.table-expand {
  padding-left: 60px;
  font-size: 0;
  label {
    width: 90px;
    color: #99a9bf;
    .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
  }
}
.popover-box {
  background: #112435;
  color: #f08047;
  height: 600px;
  width: 420px;
  overflow: auto;
}
.popover-box::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
</style>