Vue3 Element Plus表格导出（带图片导出）、导入功能 |
您所在的位置：网站首页 › excel表格怎么批量导出图片 › Vue3 Element Plus表格导出（带图片导出）、导入功能 |
Vue3 Element Plus表格导出（带图片导出）、导入功能
|
一、前言
项目中遇到将table表格导出为excel和导入excel表格数据到table表格中的功能，自此记录下来。 二、依赖安装分别安装js-table2excel和xlsx npm install js-table2excel npm install xlsx这里我也用到了Element Plus Vue3 Element Plus表格导入导出示例 完整代码注释都在代码中了 表格导入 导出表格 {{ fieldChange(scope.row['age']) }} import { ElMessage, ElMessageBox, ElButton, ElLoading } from 'element-plus' import { reactive, toRefs, ref, onMounted, h } from 'vue' import table2Excel from 'js-table2excel' // 引入 js-table2excel import * as XLSX from "xlsx" // 引入 xlsx const state = reactive({ tableData: [ // 模拟请求数据 { date: '2022/11/12 10:16:56', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', age: 1 }, { date: '2022/11/12 10:16:56', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', age: 1 }, { date: '2022/11/12 10:16:56', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', age: 2 }, { date: '2022/11/12 10:16:56', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', age: 2 }, ], exportConfig: [ // 导出Excel表格配置 { title: '时间', key: 'date', type: 'text' }, { title: '姓名', key: 'name', type: 'text' }, { title: '地址', key: 'address', type: 'text' }, { title: '性别', key: 'age', type: 'text' }, /* { 导出图片这样配置，type为image title: '头像', key: 'avatar', type: 'image' }, */ ], formatColumns: [ // 导出特殊字段处理 { prop: 'age', option: { '1': '男', '2': '女' }, }, ] }) const { tableData, exportConfig, formatColumns } = toRefs(state) const tableRef = ref() // 表格导出 // h函数官网使用 https://cn.vuejs.org/api/render-function.html#h const userExport = () => { ElMessageBox({ title: '导出Excel表格', draggable: true, showCancelButton: true, showConfirmButton: false, message: h('div', null, [ // 这里用到了h函数 h(ElButton, { text: true, type: 'primary', innerHTML: '导出选中数据', onClick: assignExport }), h(ElButton, { text: true, type: 'success', innerHTML: '导出所有数据', onClick: allExport }) ]) }).then((res) => { }).catch((res) => { }) } // 选中数据导出 function assignExport() { // getSelectionRows Element Plus table表格组件方法，获取当前选中的数据 let arr = tableRef.value.getSelectionRows() if (!arr.length) { return ElMessage({ message: '请选择需要导出的数据', type: 'warning', }) } ElMessageBox.close() // 关闭弹出框 const loading = ElLoading.service({ // 打开遮罩层 lock: true, text: '请稍等...', background: 'rgba(255, 255, 255, 0.5)', }) let list = JSON.stringify(tableRef.value.getSelectionRows()) list = formatExportData(JSON.parse(list)) // table2Excel(state.exportConfig, list, '导出数据') state.exportConfig导出表格配置，list导出数据列表，“导出数据”：导出文件名称 console.log(list) table2Excel(state.exportConfig, list, '导出数据') loading.close() // 关闭遮罩层 } // 所有数据导出 async function allExport() { ElMessageBox.close() // 关闭弹出框 const loading = ElLoading.service({ // 打开遮罩层 lock: true, text: '请稍等...', background: 'rgba(255, 255, 255, 0.5)', }) /* const res = await userList() 这里是去调后台接口，拿到需要导出的所有数据 let list = formatExportData(res.data) res.data：就是接口返回的数据 */ let list = JSON.stringify(state.tableData) // 这里直接用定义好的数据了 list = formatExportData(JSON.parse(list)) table2Excel(state.exportConfig, list, '导出数据') loading.close() // 关闭遮罩层 } function formatExportData(list) { // 处理特殊字段 /* 比如：你请求的数据中的age返回的是1或者2，其1代表“男”2代表“女” 导出表格时，总不能以1和2的方式展示，此方法用于处理特殊字段 */ list.forEach((item) => { state.formatColumns.forEach((i) => { item[i.prop] = i.option[item[i.prop]] }) for (let key in item) { if (!item[key] && item[key] == null) { item[key] = "" } } }); return list } // 表格导入 function importBefore(file) { const reader = new FileReader(); reader.onload = (e) => { const data = e.target.result; const workbook = XLSX.read(data, { type: "array" }); const firstSheetName = workbook.SheetNames[0]; const worksheet = workbook.Sheets[firstSheetName]; const results = XLSX.utils.sheet_to_json(worksheet); importAdd(results) }; reader.readAsArrayBuffer(file); } function importAdd(list) { // 处理上传时excel中特殊字段 // 如：性别：男/女 不能以文字形式上传，此方法时将数据转为对应的值 list.forEach((item) => { state.exportConfig.forEach((i) => { item[i.key] = item[i.title] delete item[i.title] }) // 处理时间，在使用FileReader解析后的时间可能是这样的 44877.4284259259 就需要专为时间戳或者时间格式 for (let key in item) { if (key == "date") { // ExcelDateToJSDate(item[key]).getTime() // 返回时间戳 1668182400000 毫秒 // ExcelDateToJSDate(item[key]) 返回时间格式 Sat Nov 12 2022 10:17:39 GMT+0800 (中国标准时间) {} // 注意：这个方法在转换的时间存在误差，误差在一分钟之内 item[key] = ExcelDateToJSDate(item[key]) } } }) list = convertImportData(list) // list 返回上传的Excel文件，接下来掉后台接口批量添加就可以了。 console.log(list) } function ExcelDateToJSDate(serial) { var utc_days = Math.floor(serial - 25569); var utc_value = utc_days * 86400; var date_info = new Date(utc_value * 1000); var fractional_day = serial - Math.floor(serial) + 0.0000001; var total_seconds = Math.floor(86400 * fractional_day); var seconds = total_seconds % 60; total_seconds -= seconds; var hours = Math.floor(total_seconds / (60 * 60)); var minutes = Math.floor(total_seconds / 60) % 60; return new Date(date_info.getFullYear(), date_info.getMonth(), date_info.getDate(), hours, minutes, seconds); } function convertImportData(list) { list.forEach((item) => { state.formatColumns.forEach((i) => { for (let key in i.option) { if (item[i.prop] == i.option[key]) { item[i.prop] = key } } }) for (let key in item) { if (!item[key] && item[key] == undefined) { item[key] = "" } } }); return list } // 处理特殊表格字段展示 function fieldChange(row, option = { '1': '男', '2': '女' }) { if (option[row]) { return option[row] } } 弊端没有实现Excel表格中的图片导入 在导出为Excle表格时，时间是没问题的。 导入时，时间会存在秒数上的误差。 有大佬知道原因或者解决办法，可以评论留言。 |
【本文地址】
今日新闻 |
推荐新闻 |