vue3 导出excel表格

第一步：

安装插件：npm install js-table2excel

 第二步：

引入插件：import table2excel from 'js-table2excel'

第三步：

导出的数据

const arr = ref([
  {
    id: 1,
    imgae:
      "https://www.ssfiction.com/wp-content/uploads/2020/08/20200805_5f2b1669e9a24.jpg",
  },
  {
    id: 2,
    imgae:
      "https://www.ssfiction.com/wp-content/uploads/2020/08/20200805_5f2b1669e9a24.jpg",
  },
  {
    id: 3,
    imgae:
      "https://www.ssfiction.com/wp-content/uploads/2020/08/20200805_5f2b1669e9a24.jpg",
  },
  {
    id: 4,
    imgae:
      "https://www.ssfiction.com/wp-content/uploads/2020/08/20200805_5f2b1669e9a24.jpg",
  },
]);

 第五步：

表格表头

const column = [
    {
      title: "id",
      key: "id",
      type: "text",
    },
    {
      title: "图片",
      key: "imgae",
      type: "image",
      width: 100,
      height: 100,
    },
];

 注意：

        title的意思就是你表格表头的名称

        key是你数据的属性名

        type是类型

第六步：

添加点击事件导出

HTML

<span @click="dian">导出</span>

JavaScript

const dian = () => {
  table2excel(column, arr.value, "excel表格");
};

结果：

 

完整代码

<template>
  <span @click="dian">导出</span>
</template>

<script setup>
import table2excel from "js-table2excel";
import { ref } from "vue";
const arr = ref([
  {
    id: 1,
    imgae:
      "https://www.ssfiction.com/wp-content/uploads/2020/08/20200805_5f2b1669e9a24.jpg",
  },
  {
    id: 2,
    imgae:
      "https://www.ssfiction.com/wp-content/uploads/2020/08/20200805_5f2b1669e9a24.jpg",
  },
  {
    id: 3,
    imgae:
      "https://www.ssfiction.com/wp-content/uploads/2020/08/20200805_5f2b1669e9a24.jpg",
  },
  {
    id: 4,
    imgae:
      "https://www.ssfiction.com/wp-content/uploads/2020/08/20200805_5f2b1669e9a24.jpg",
  },
]);
const column = [
  {
    title: "id",
    key: "id",
    type: "text",
  },
  {
    title: "图片",
    key: "imgae",
    type: "image",
    width: 100,
    height: 100,
  },
];
const dian = () => {
  table2excel(column, arr.value, "excel表格");
};
</script>