今天制作后台管理系统，有一个二维码管理页面，要求把表格内的数据全部导出为Excel表格。
表格内有二维码图片，也要导出，制作的第一版是直接将图片的链接导出，但是要求导出能直接看的图片，所以就有了第二版。
第一版：
第二版是将图片链接转换成图片的形式
接下来我就带大家来看看这两版的实现：
第一版
安装xlsx插件
npm install xlsx --save
在项目中引入
import * as XLSX from "xlsx";
const data = XLSX.utils.json_to_sheet(tableData.value)//此处tableData.value为表格的数据 const wb = XLSX.utils.book_new() XLSX.utils.book_append_sheet(wb, data, 'test-data')//test-data为自定义的sheet表名 XLSX.writeFile(wb,'test.xlsx')//test.xlsx为自定义的文件名
以上就是第一版的实现过程，接下来是第二版。
第二版
下载安装插件：
npm install js-table2excel
引入插件：
import table2excel from 'js-table2excel'
onBatchExport方法中数据的key值要与data中保持一致，否则数据无法获取到，打印出的结果就是undefined。
<template> <div> <el-button @click="onBatchExport">导出</el-button> </div> </template> <script setup lang="ts"> import table2excel from 'js-table2excel' // 导出表格 按钮点击后触发事件 const onBatchExport = () => { const column = [ { title: '二维码id', key: 'id', type: 'text', }, { title: '景区名称', key: 'sciencename', type: 'text', }, { title: '二维码', key: 'code', type: 'image', width: 150, height: 150, }, { title: '创建时间', key: 'time', type: 'text', }, ] const tableDatas = JSON.parse(JSON.stringify(tableData.value))//这里面填写你接口的数据 const datas = tableDatas table2excel(column, datas, '二维码') } </script>
以上就是本章的全部内容了，感谢您的阅读
