第一步：
安装插件：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>
