vue3实现纯前端表格数据的导出与导入

项目场景：

我期望告竣在纯前端环境下举行 excel 表格文件的下载操作，与此同时，对所下载的表格文件的样式加以调整与优化，使其出现出更符合需求的外观和格式结构，从而满意特定的展示与使用要求。

---

表格数据导出

1、安装 xlsx-js-style

提示：这里形貌项目中碰到的问题：
先安装库 xlsx-js-style

1. npm install xlsx-js-style

复制代码

---

2、自界说组件

   自界说组件，这里附全部代码，设置单元格格式代码也在其中

1. <script lang="ts" setup>
2. import { computed, nextTick, ref, watch } from "vue"
4. import * as XLSX from "xlsx-js-style"
6. interface Props {
7.   modelValue: boolean
8.   downloadList: any
9.   columnList: any
10. }
12. const props = withDefaults(defineProps<Props>(), {
13.   modelValue: false,
14.   downloadList: [],
15.   columnList: []
16. })
18. const downloadList = computed(() => props.downloadList)
20. const emit = defineEmits<{
21.   (e: "update:modelValue", value: boolean): boolean
22. }>()
24. const columnList = computed(() => props.columnList)
26. //#region 导出
27. const tableRef = ref<any>(null)
28. // 导出为 Excel
29. const exportToExcel = () => {
30.   // 获取 el-table 的引用
31.   tableRef.value = document.querySelector("#download-table")
33.   // 将 el-table 数据转换为二维数组
34.   const dataArray = []
35.   const headers: any = []
37.   tableRef.value.querySelectorAll(".el-table__header-wrapper th").forEach((th: any) => {
38.     headers.push(th.textContent.trim())
39.   })
40.   dataArray.push(headers)
42.   const rowsToExport = tableRef.value.querySelectorAll(".el-table__body-wrapper tbody tr")
43.   console.log(rowsToExport, "rowsToExport")
45.   rowsToExport.forEach((row: any) => {
46.     const rowData: any = []
47.     row.querySelectorAll("td").forEach((cell: any) => {
48.       rowData.push(cell.textContent.trim())
49.     })
50.     dataArray.push(rowData)
51.   })
53.   // 创建一个新的工作簿
54.   const workbook = XLSX.utils.book_new()
56.   // 创建一个新的工作表
57.   const worksheet = XLSX.utils.aoa_to_sheet(dataArray)
59.   console.log(dataArray, "dataArray")
61.   // 设置列宽
62.   const columnWidth = 20 // 列宽为20个字符
63.   const numColumns = dataArray[0].length // 获取列数
64.   worksheet["!cols"] = Array(numColumns).fill({ wch: columnWidth })
66.   // // 设置列高
67.   const rowHeight = 105 // 行高为110像素
68.   const numRows = dataArray.length // 获取行数
69.   worksheet["!rows"] = Array(numRows).fill({ hpx: rowHeight })
70.   worksheet["!rows"][0] = { hpx: 15 } // 单独设置第一行的行高
71.   // 设置单元格样式
72.   const cellStyle = {
73.     font: {
74.       name: "微软黑体", // 字体名称
75.       sz: 13, // 字体大小
76.       color: { rgb: "000000" }, // 字体颜色
77.       bold: false // 字体不加粗
78.     },
79.     border: {
80.       top: { style: "thin", color: { rgb: "000000" } },
81.       bottom: { style: "thin", color: { rgb: "000000" } },
82.       left: { style: "thin", color: { rgb: "000000" } },
83.       right: { style: "thin", color: { rgb: "000000" } }
84.     },
85.     alignment: {
86.       horizontal: "center",
87.       vertical: "center",
88.       wrapText: true // 设置文字自动换行
89.     }
90.   }
92.   // 遍历数据数组，为每个单元格应用样式
93.   dataArray.forEach((row, rowIndex) => {
94.     row.forEach((cell: any, columnIndex: any) => {
95.       const cellAddress = XLSX.utils.encode_cell({ c: columnIndex, r: rowIndex })
96.       worksheet[cellAddress].s = cellStyle
97.     })
98.   })
100.   // 表头颜色加粗
101.   if (dataArray[0]) {
102.     dataArray[0].forEach((cell: any, columnIndex: any) => {
103.       const cellAddress = XLSX.utils.encode_cell({ c: columnIndex, r: 0 })
104.       worksheet[cellAddress].s = { ...cellStyle, font: { ...cellStyle.font, bold: true } } // 确保表头字体加粗
105.     })
106.   }
108.   // 将工作表添加到工作簿
109.   XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1")
111.   // 将工作簿保存为 Excel 文件
113.   const timestamp = new Date().getTime()
114.   const fileName = `宝贝统计_${timestamp}.xlsx`
115.   XLSX.writeFile(workbook, fileName)
116.   emit("update:modelValue", false)
117. }
118. //#endregion
120. watch(
121.   () => props.modelValue,
122.   (value: any) => {
123.     if (value) {
124.       console.log(downloadList.value)
125.       nextTick(() => {
126.         exportToExcel()
127.       })
128.     }
129.   }
130. )
131. </script>
132. <template>
133.   <el-table style="display: none" :data="downloadList" id="download-table">
134.     <el-table-column
135.       v-for="(item, index) in columnList"
136.       :key="index"
137.       :prop="item.prop"
138.       :label="item.label"
139.       align="center"
140.     />
141.   </el-table>
142. </template>
143. <style lang="scss" scoped></style>

复制代码

---

3、使用

   使用是时候是相当于在页面上设置个不可间=见的表格举行下载 将需要下载的数据传入即可，可以举行改进，表单项也传入，这样就可以随意下载任何数据了

1. import DownloadExcel from "@/components/DownloadExcel/index.vue"
2. const columnList = [
3.   {
4.     prop: "index",
5.     label: "序号"
6.   },
7.   {
8.     prop: "username",
9.     label: "用户名"
10.   },
11.   {
12.     prop: "roles",
13.     label: "角色"
14.   },
15.   {
16.     prop: "phone",
17.     label: "手机号"
18.   },
19.   {
20.     prop: "email",
21.     label: "邮箱"
22.   },
23.   {
24.     prop: "status",
25.     label: "状态"
26.   },
27.   {
28.     prop: "createTime",
29.     label: "创建时间"
30.   }
31. ]
32. const downloadList = ref<any[]>([])
33. const isDownload = ref<boolean>(false)
34. const exportToExcel = () => {
35.   if (multipleSelection.value.length == 0) {
36.     ElMessage.error("请选择要下载的宝贝")
37.     return
38.   }
39.   downloadList.value = multipleSelection.value.map((item: any, index: number) => {
40.     return {
41.       index: index, // 序号
42.       username: item.username, // 用户名
43.       roles: item.roles, // 角色
44.       phone: item.phone, // 手机号
45.       email: item.email, // 邮箱
46.       status: item.status ? "启用" : "禁用", // 状态
47.       createTime: item.createTime // 创建时间
48.     }
49.   })
50.   isDownload.value = true
51. }

复制代码

1. <download-excel v-model="isDownload" :downloadList="downloadList" :columnList="columnList" />
2. <div>
3.   <el-tooltip content="下载">
4.     <el-button type="primary" :icon="Download" circle @click="exportToExcel" />
5.   </el-tooltip>
6. </div>

复制代码

---

表格数据导入

1、安装 xlsx

1. npm install xlsx --save

复制代码

2、引入

1. import * as XLSX from "xlsx"

复制代码

3、使用

1. <el-upload
2.   class="upload-demo"
3.   ref="upload"
4.   action=""
5.   :auto-upload="false"
6.   accept=""
7.   :on-change="analysisExcel"
8.   multiple
9.   :show-file-list="false"
10. >
11.   <el-button type="primary" :icon="Link">导入文件列表</el-button>
12. </el-upload>

复制代码

1. import * as XLSX from "xlsx"
2. const loading = ref<boolean>(false)const tableData = ref<any[]>([])const analysisExcel = (file: any) => {  loading.value = true  console.log(file)  // 只能上传一个Excel，重复上传会覆盖之前的  file = file.raw  const reader = new FileReader()  reader.readAsArrayBuffer(file)  reader.onload = function () {    const buffer: any = reader.result    const bytes = new Uint8Array(buffer)    const length = bytes.byteLength    let binary = ""    for (let i = 0; i < length; i++) {      binary += String.fromCharCode(bytes[i])    }    const wb = XLSX.read(binary, {      type: "binary"    })    const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])    console.log(outdata)    let da = [...outdata]    // 这里是把表格里面的名称改成表格里面的字段    da = da.map((item: any) => {      const newItem = {        index: Number(item["序号"]), // 序号        username: item["用户名"], // 用户名        roles: item["脚色"], // 脚色        phone: item["手机号"], // 手机号        email: item["邮箱"], // 邮箱        status: item["状态"], // 状态        createTime: item["创建时间"] // 创建时间      }      return newItem    })    console.log(da)    tableData.value = da    loading.value = false  }}

复制代码

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