使用vue3框架vue-next-admin导出表格excel（带图片）

想要使用vue3导出表格内容并且图片显示在表格中（如图）： 

步骤如下：
下载安装插件：
    安装命令：npm install js-table2excel
引入插件：

1.         import table2excel from 'js-table2excel'

复制代码

使用插件     
        直接上代码：
        onBatchExport方法中数据的key值要与data中保持一致，否则数据无法获取到，打印出的效果就回为undefined。
我写了两种导出：
一种是全部导出；另一种是选中导出。
选中导出需要联合列表中的复选框，给复选框绑定onchange事件，声明变量，把选中的数据存到到变量中，然后给导出的数据换成变量，就可以只导出选中的列表。

下面是全部导出： 

1. <template>
2. <div>
3.      <el-button size="big" type="primary" @click="open">导出</el-button>
5. </div>
6. </template>
7. <script>
8. import table2excel from "js-table2excel";
9. // 账号列表总数据
10. const datum = ref([]);
11. // 导出框显示
12. // 导出全部数据的函数
13. const exportBtn = () => {
14.   const column = [
15.     {
16.       title: "序号",
17.       key: "id",
18.       type: "text",
19.     },
20.     {
21.       title: "店长名称",
22.       key: "name",
23.       type: "text",
24.     },
25.     {
26.       title: "商家门头照",
27.       key: "img",
28.       type: "image",
29.       width: 120,
30.       height: 150,
31.     },
32.     {
33.       title: "公司名称",
34.       key: "title",
35.       type: "text",
36.     },
37.     {
38.       title: "订单号",
39.       key: "order_num",
40.       type: "text",
41.     },
42.     {
43.       title: "应付",
44.       key: "money",
45.       type: "text",
46.     },
47.     {
48.       title: "实际支付",
49.       key: "fact_money",
50.       type: "text",
51.     },
52.     {
53.       title: "类型",
54.       key: "type",
55.       type: "text",
56.       formatter: (row) => {
57.         const typeMap = {
58.           1: "微信",
59.           2: "支付宝",
60.           3: "抖音",
61.         };
62.         return typeMap[row.type] || "未知";
63.       },
64.     },
65.     {
66.       title: "平台订单号",
67.       key: "terrace_order_num",
68.       type: "text",
69.       width: 500, // 自动调整宽度
70.       numberFormat: "text",
71.     },
72.     {
73.       title: "创建时间",
74.       key: "create_time",
75.       type: "text",
76.     },
77.     {
78.       title: "下单时间",
79.       key: "pay_time",
80.       type: "text",
81.     },
82.   ];
84.   // 深拷贝数据
85.   const tableDatas = JSON.parse(JSON.stringify(datum.value));
86.   // 处理数据，将 type 字段的值转换为对应的文字
87.   const processedDatas = tableDatas.map((item) => {
88.     const typeMap = {
89.       1: "微信",
90.       2: "支付宝",
91.       3: "抖音",
92.     };
93.     return {
94.       ...item,
95.       type: typeMap[item.type] || "未知", // 转换 type 字段
96.       terrace_order_num: item.terrace_order_num + "&nbsp;",
97.     };
98.   });
99.   // 获取当前日期并格式化
100.   const currentDate = new Date();
101.   const year = currentDate.getFullYear();
102.   const month = String(currentDate.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
103.   const day = String(currentDate.getDate()).padStart(2, "0");
104.   const formattedDate = `${year}-${month}-${day}`;
105.   // 将日期添加到文件名中
106.   const fileName = `订单列表导出_${formattedDate}`;
107.   // 导出处理后的数据
108.   table2excel(column, processedDatas, fileName);
109. };
110. </script>

复制代码

全部导出：我还获取了当前的日期，导出时是名字＋导出的日期。
并且：当列表中的某一行内容只有数字时，导出的表格会默认转成缩写格式。
可以把数据处理一下然后给后面加上一个HTML的空格，也就是&nbsb，这样就不会给数字默认转化为科学计数法。

选中导出：

1. // 声明选中的行
2. const selectedRows = ref([]);
3. // 处理选中项变化
4. const handleSelectionChange = (selection) => {
5.   selectedRows.value = selection;
6.   console.log("当前选中的数据：", selectedRows.value); // 打印选中的数据
7. };
8. // 导出选中数据的函数
9. const exportPick = () => {
10.   console.log("导出选中的数据：", selectedRows.value);
11.   if (selectedRows.value.length === 0) {
12.     ElMessage.warning("请选择要导出的数据！");
13.     return;
14.   }
15.   // 获取导出数据
16.   const column = [
17.     {
18.       title: "序号",
19.       key: "id",
20.       type: "text",
21.     },
22.     {
23.       title: "店长名称",
24.       key: "name",
25.       type: "text",
26.     },
27.     {
28.       title: "商家门头照",
29.       key: "img",
30.       type: "image",
31.       width: 150,
32.       height: 100,
33.     },
34.     {
35.       title: "公司名称",
36.       key: "title",
37.       type: "text",
38.     },
39.     {
40.       title: "订单号",
41.       key: "order_num",
42.       type: "text",
43.     },
44.     {
45.       title: "价格",
46.       key: "money",
47.       type: "text",
48.     },
49.     {
50.       title: "类型",
51.       key: "type",
52.       type: "text",
53.       formatter: (row) => {
54.         const typeMap = {
55.           1: "微信",
56.           2: "支付宝",
57.           3: "抖音",
58.         };
59.         return typeMap[row.type] || "未知";
60.       },
61.     },
62.     {
63.       title: "平台订单号",
64.       key: "terrace_order_num",
65.       type: "text",
66.     },
68.     {
69.       title: "创建时间",
70.       key: "create_time",
71.       type: "text",
72.     },
73.     {
74.       title: "下单时间",
75.       key: "pay_time",
76.       type: "text",
77.     },
78.   ];
79.   const tableDatas = JSON.parse(JSON.stringify(selectedRows.value)); //这里面填写你接口的数据\
80.   // 处理数据，将 type 字段的值转换为对应的文字
81.   const processedDatas = tableDatas.map((item) => {
82.     const typeMap = {
83.       1: "微信",
84.       2: "支付宝",
85.       3: "抖音",
86.     };
87.     return {
88.       ...item,
89.       type: typeMap[item.type] || "未知", // 转换 type 字段
90.     };
91.   });
92.   // 获取当前日期并格式化
93.   const currentDate = new Date();
94.   const year = currentDate.getFullYear();
95.   const month = String(currentDate.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
96.   const day = String(currentDate.getDate()).padStart(2, "0");
97.   const formattedDate = `${year}-${month}-${day}`;
98.   // 将日期添加到文件名中
99.   const fileName = `订单列表选中导出_${formattedDate}`;
100.   table2excel(column, processedDatas, fileName);
101. };
103. // 打开导出确认对话框
104. const open = () => {
105.   ElMessageBox.confirm("请选择要导出的数据", "导出", {
106.     confirmButtonText: "导出全部",
107.     cancelButtonText: "导出选中",
108.     center: true,
109.   })
110.     .then(() => {
111.       // 点击“导出全部”按钮
112.       exportBtn();
113.     })
114.     .catch(() => {
115.       // 点击“导出选中”按钮
116.       exportPick();
117.     });
118. };

复制代码

 


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。