今天制作后台管理系统，有一个二维码管理页面，要求把表格内的数据全部导出为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>

以上就是本章的全部内容了，感谢您的阅读。