Vue项目中使用xlsx实现批量导入导出功能
2024-06-11 06:59:50
Vue项目之—使用xlsx实现批量导入导出功能
安装 xlsx
npm i xlsx
导入
封装导入组件
改造 vue-element-admin（点击复制UploadExcel组件代码）
注册全局导入组件
// src/component/index.js
import UploadExcel from './UploadExcel'
export default {install(Vue) {Vue.component('UploadExcel', UploadExcel) // 注册导入excel组件}
}// main.js
import Component from '@/component'
Vue.use(Component)
利用element-ui修改样式和布局
<template><div class="upload-excel"><div class="btn-upload"><el-button :loading="loading" size="mini" type="primary" @click="handleUpload">点击上传</el-button></div><input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick"><div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover"><i class="el-icon-upload" /><span>将文件拖到此处</span></div></div>
</template>
<style scoped lang="scss">
.upload-excel {display: flex;justify-content: center;margin-top: 100px;.excel-upload-input{display: none;z-index: -9999;}.btn-upload , .drop{border: 1px dashed #bbb;width: 350px;height: 160px;text-align: center;line-height: 160px;}.drop{line-height: 80px;color: #bbb;i {font-size: 60px;display: block;}}
}
</style>
实现导入excel的功能：
创建 import 组件
views/import/index.vue建立公共导入的页面路由
{path: '/import',component: Layout,hidden: true, // 隐藏在左侧菜单中children: [{path: '', // 二级路由path什么都不写 表示二级默认路由component: () => import('@/views/import')}]},封装导入数据的api接口
实现excel导入
- 在
import组件中获取导入的excel数据，导入 excel接口success({result})
- 为了让这个页面可以服务更多的导入功能，我们可以在页面中用参数来判断，是否是导入员工
@click="$router.push('/import?type=order')"(使用)type: this.$route.query.type
- 中英文对照
Object.keys(userRelations)
实现代码：
// views/import/index.vueasync success({ results }) {const arr = results.map(item => this.zhToEn(item, this.type))await importOrder(arr)this.$message.success('导入数据成功！')this.$router.back() // 回到上一页 },zhToEn(zhs, type) {const orderInfo = {}if (type === 'order') {const orderRelations = {订单量: 'orderVol',订单号: 'orderNum',名称: 'orderName',签订日期: 'signTime',...}Object.keys(zhs).map(item => {console.log(item)const value = orderRelations[item]if (value === 'signTime' || value === 'xxTime') {console.log(1111)// 因为 Excel 存储的日期是从 1900 年 1 月 1 日开始按天数来计算的，也就是说 1900 年 1 月 1 日在 Excel 中是 1。// 因此我们需要对时间进行格式化orderInfo[value] = this.formatExcelDate(zhs[item])} else {orderInfo[value] = zhs[item]}})return orderInfo} },formatExcelDate(num, format = '-') {if (!/^\d+$/.test(num)) returnnum = parseInt(num)let millisecond = 0 // 转化后的毫秒数if (num > 60) {// 对大于 60 的日期进行减 1 处理millisecond = (num - 25568 - 1) * 3600 * 24 * 1000} else {millisecond = (num - 25568) * 3600 * 24 * 1000}const date = new Date(millisecond) // 根据转化后的毫秒数获取对应的时间const yy = date.getFullYear()const m = date.getMonth() + 1const mm = m >= 10 ? m : '0' + mconst d = date.getDate()const dd = d >= 10 ? d : '0' + dreturn yy + format + mm + format + dd // 返回格式化后的日期 }- 在
导出
安装excel所需依赖
npm install xlsx file-saver -S npm install script-loader -S -D基本数据
- 因为数据中的key是英文，想要导出的表头是中文的话，需要将中文和英文做对应
const headers = {'手机号'：'mobile',...}const { rows } = await getEmployeeList({ page: 1, size: this.page.total })
- 因为数据中的key是英文，想要导出的表头是中文的话，需要将中文和英文做对应
书写按需格式化函数
formatJson(headers, rows)- 该方法负责将数组转化成二维数组
- 映射中英文
formatDate- 格式化时间
import { formatDate } from '@/filters/index'
excel导出基本的结构
import('@/vendor/Export2Excel').then(excel => {excel.export_json_to_excel({header: Object.keys(headers), //表头 必填 Arraydata, //具体数据 必填 Arrayfilename: 'excel-list', //导出文件名 非必填autoWidth: true, //单元格是否要自适应宽度非必填bookType: 'xlsx' //导出文件类型 非必填}) })复杂表头的导出
实现代码：
exportFn() {const headers = {订单量: 'orderVol',订单号: 'orderNum',名称: 'orderName',签订日期: 'signTime',}// 导出 excelimport('@/vendor/Export2Excel').then(async excel => {// excel 是引入文件的导出对象// 导出 header 从哪里来// data 从哪里来// 现在没有一个接口获取所有的数据// 获取订单的接口 页码 每页条数 100 1 10000const { rows } = await getOrderList({ page: 1, size: this.page.total })const data = this.formatJson(headers, rows) // 返回的 data 就是 要导出的结构const multiHeader = [['订单量', '订单号', '', '', '', '', '名称']]const merges = ['A1:A2', 'B1:F1', 'G1:G2']excel.export_json_to_excel({header: Object.keys(headers),data,filename: '订单资料表',multiHeader, // 复杂表头merges // 合并选项})})
},
// 将表头数据和数据进行对应
// [{}] => [[]]
formatJson(headers, rows) {return rows.map(item => {// item 是一个对象 { orderName: 132111,ordername: '小米手机' }// ["订单号", "订单量", "名称" 。。]return Object.keys(headers).map(key => {// 需要判断 字段if (headers[key] === 'signTime' || headers[key] === 'xxTime') {// 格式化日期return formatDate(item[headers[key]])} return item[headers[key]]})// ["132", '张三’， ‘’，‘’，‘’d]})// return rows.map(item => Object.keys(headers).map(key => item[headers[key]]))// 需要处理时间格式问题
},
❗难点：
难点是导出的时候，需要把请求到的数据转换为xlsx要求的格式才能导出成功；实现批量导入功能的时候，也需要把通过xlsx插件解析好的Excel表格数据转换为接口需要的数据格式
✨比如：批量导入数据时，因为获取到的Excel表格数据字段都是中文名的，但是后端接口需要的是英文名，因此我们把数据通过接口传递给后端之前需要先把数据转换为后端规定的格式，我们的做法是先准备好一个中英文字段对照字典表，然后再根据字典表把Excel表格的中文字段名替换成英文字段名，从而实现数据转换。
Vue项目中使用xlsx实现批量导入导出功能相关推荐
- SpringBoot中使用Easyexcel实现Excel导入导出功能（三）
导出的数据包含有图片 导出excel表格的数据包含有图片,这种场景比较少.通Easyexcel实现这样的需求,我认为最简便的方法就是使用前面提到的自定义转换器(com.alibaba.excel.co ...
- SpringBoot中使用Easyexcel实现Excel导入导出功能（一）
目录 前言 1.常规导入 2.读取到指定的列 3.读取全部的sheet页 4.日期.数字及其他自定义格式的转换 5.表头有多行的表格读取 6.表头数据的读取 7.单元格内的备注内容读取 前言 exce ...
- Vue项目中指定区域的表格数据导出为Excel文件
vue项目中导出excel时有是会需要指定导出的区域如下图 操作部分我们不需要导出只导出表格部分 简记录下实现过程赋代码 一. 安装三个依赖项 npm install -S file-saver np ...
- [Django]网页中利用ajax实现批量导入数据功能
url.py代码: url(r'^workimport/$', 'keywork.views.import_keywork', name='import_keywork') view.py代码: fr ...
- vue项目中引入.xlsx文件
安装3个依赖包 $ npm install -S file-saver $ npm install -S xlsx $ npm install -D script-loader template部分 ...
- C#winform中操作Excel数据，导入导出功能
命名空间 using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; using NPOI.XSSF.UserModel; using System; us ...
- vue项目中更换tinymce版本踩坑
项目需求: vue项目中实现多图片批量上传功能 问题: tinymce富文本编辑器的多图片批量上传插件 支持版本:5.0.4+ 项目中现有的富文本编辑器版本:4.9.4 为实现这一功能选择更换tiny ...
- 在Vue项目中使用Gojs
文章目录 前言 1. Gojs的安装 2. 在vue项目中的引用 3. js导入 4. 画布初始化 画布基础配置 主画布layout配置 右侧画布配置 5. 连接线的配置 6. 节点的配置 7. 节点 ...
- 如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- 【vue】如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
最新文章
- SQL优化常用方法24
- goto在c语言中的作用,关键字goto在C语言中的使用
- sed教程入门与实例练习(三)
- 从入门到入土：基于C语言实现并发Web服务器|父进程子进程|代码展示
- android的环境搭建与配置
- 福禄克FLUKE OFP2-100-Q CH与OFP2-Q-ADD技术规格
- Windows上必备的7个国产小众软件，每一个都是良心推荐，建议常备使用哦。
- 年终奖买啥最合适？马上安排降噪耳机界的扛把子，索尼WF-1000XM4
- 华为机试真题 Python 实现【分月饼】
- OA系统的功能和作用是什么（OA系统百科）
- 转载一些关于QQ空间的文章
- 东芝存储器株式会社计划搬迁总部
- 分布式系统中间件整理
- 程序员常见英文缩写及其意义
- 瑞萨L4级自动驾驶方案---基于R-Car V3H SoC的自动驾驶
- 数据告诉你：中国足球还有理论性出线的可能吗？
- Shell脚本之网络流量监控
- java.awt包_java.awt包 简介
- 小tips：解决burp光标定位不准确
- spring定时任务@Scheduled注解详解