Vue + Element 实现导入导出Excel

1、首先搭建Vue 项目（具体可参考以前文章，不再详述：https://blog.csdn.net/qq_42540989/article/details/89853923）

2、引入Element（你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。）

//在main.js中引用import ElementUi from 'element-ui'import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUi)

3、在components 文件夹中新建一个Vue文件

// excal.vue<template><div class="hello"><h1>{{ msg }}</h1><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button>
</el-row></div>
</template><script>export default {data() {return {imageUrl: '',msg:'hello,Element'};},methods: {}}
</script>
<style scoped></style>

// index.jsimport Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import excal from '@/components/excal'
Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path: '/enter/',name: 'excal',component: excal}]
})

3、运行项目

// 运行npm run dev

4、访问 http://localhost:8080/#/enter 查看 element-ui 是否成功引入

5、导入导出 - - 开始引入工具库

//  file-saver      xlsx       script-loadercnpm install -S file-saver xlsxcnpm install -D script-loader

6、导入代码: https://github.com/MrBaiLiJie/importExcal

// https://github.com/MrBaiLiJie/importExcal<template><div class="hello"><h1>{{ msg }}</h1><!-- <el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button></el-row>--><el-uploadclass="upload-demo"action:on-change="handleChange":on-exceed="handleExceed":on-remove="handleRemove":before-remove="beforeRemove":file-list="fileListUpload":limit="limitUpload"accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel":auto-upload="false"><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只 能 上 传 xlsx / xls 文 件</div></el-upload></div>
</template><script>
export default {data() {return {imageUrl: "",msg: "hello,Element",limitUpload: 1,fileTemp: "",file:"",fileListUpload: []};},methods: {handleChange(file,fileList){// console.log(file)this.fileTemp = file.raw;if(this.fileTemp){// console.log(this.fileTemp.type)if(this.fileTemp.type == "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||this.fileTemp.type == "application/vnd.ms-excel"){this.importfxx(this.fileTemp)}else{this.$message({type:"warning",message:"附件格式错误，请删除后重新上传!"});}}},importfxx(obj) {console.log(obj)let _this = this;// 通过DOM取文件数据this.file = obj;var rABS = false; //是否将文件读取为二进制字符串var f = this.file;var reader = new FileReader();//if (!FileReader.prototype.readAsBinaryString) {FileReader.prototype.readAsBinaryString = function(f) {var binary = "";var rABS = false; //是否将文件读取为二进制字符串var pt = this;var wb; //读取完成的数据var outdata;var reader = new FileReader();reader.onload = function(e) {var bytes = new Uint8Array(reader.result);var length = bytes.byteLength;for (var i = 0; i < length; i++) {binary += String.fromCharCode(bytes[i]);}var XLSX = require("xlsx");if (rABS) {wb = XLSX.read(btoa(fixdata(binary)), {//手动转化type: "base64"});} else {wb = XLSX.read(binary, {type: "binary"});}outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的东西this.da = [...outdata];let arr = [];this.da.map(v => {let obj = {};obj.code = v["设备ID"];obj.type = v["设备型号"];arr.push(obj);});return arr;};reader.readAsArrayBuffer(f);};if (rABS) {reader.readAsArrayBuffer(f);} else {reader.readAsBinaryString(f);}},beforeRemove(file, fileList) {return this.$confirm(`确定移除 ${file.name}？`);},handleRemove(file, fileList) {// console.log(file)this.fileTemp = null;},handleExceed(files, fileList) {this.$message.warning(`当前限制选择1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);},}
};
</script>
<style scoped>
</style>

6、补充

xls 是一个特有的二进制格式，其核心结构是复合文档类型的结构，而 xlsx 的核心结构是 XML 类型的结构，采用的是基于 XML 的压缩方式，使其占用的空间更小。xlsx 中最后一个 x 的意义就在于此。

7、导出步骤

// 步骤1、引入js文件在src文件夹下新建excal文件夹，引入两个js文件     Blob.js    Export2Excel.js// js文件 已上传至github地址：https://github.com/MrBaiLiJie/importExcal/tree/master/src/excal2、在main.js引入import Blob from './excal/Blob.js'
import Export2Excel from './excal/Export2Excel.js'3、打开Export2Excel.jsrequire('script-loader!file-saver');
require('script-loader!./Blob');
require('script-loader!xlsx/dist/xlsx.core.min');这几个文件不支持import引入，所以需要script-loader来将他们挂载到全局环境下。

8、导出代码：https://github.com/MrBaiLiJie/importExcal

// https://github.com/MrBaiLiJie/importExcal<template><div class="hello"><h1>{{ msg }}</h1><!-- <el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button></el-row>--><!-- 导出 --><el-button @click="outExe">导出</el-button></div>
</template><script>
export default {data() {return {imageUrl: "",msg: "hello,Element",limitUpload: 1,fileTemp: "",file: "",fileListUpload: [],excelData:[],dataList:[{userId:1,name:'小白',age:'18',status:"上学"},{userId:2,name:'小黑',age:'22',status:"待业"},{userId:3,name:'小红',age:'28',status:"就业"}]};},methods: {// 导出outExe() {this.$confirm("此操作将导出excel文件, 是否继续?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(() => {this.excelData = this.dataList; //你要导出的数据list。this.export2Excel();}).catch(() => {});},export2Excel() {var that = this;require.ensure([], () => {const { export_json_to_excel } = require("../excal/Export2Excel"); //这里必须使用绝对路径，根据自己的命名和路径const tHeader = ["userId","name","age","status",]; // 导出的表头名const filterVal = ["userId","name","age","status",]; // 导出的表头字段名const list = that.excelData;// that.excelData为传入的数据const data = that.formatJson(filterVal, list);export_json_to_excel(tHeader, data, `测试导出excel`); // 导出的表格名称，根据需要自己命名// tHeader为导出Excel表头名称，`xxxxxx`即为导出Excel名称});},formatJson(filterVal, jsonData) {return jsonData.map(v => filterVal.map(j => v[j]));}}
};
</script>
<style scoped>
</style>

9、参考文献

element-ui官方文档：https://element.eleme.io/#/zh-CN/component/upload

https://segmentfault.com/a/1190000018993619#item-3-5

Vue + Element 实现导入导出Excel相关推荐

Vue+Element前端导入导出Excel
1 前言 1.1 业务场景由前台导入Excel表格,获取批量数据. 根据一个数组导出Excel表格. 2 实现原理 2.1 引入工具库 file-saver.xlsx.script-loader n ...
Vue2.x + element ui 导入导出excel
实现内容: 导入excel文件最终将其展现在页面table中将页面table中的表格转换为excel文件仓库地址: 完整代码在这里:https://github.com/Nigo-yyy/vue- ...
vue + element中el-table导出excel
第一步: 安装依赖: npm install --save xlsx file-saver 这里安装了两个依赖插件,感兴趣的读者可以去点开下面的链接,查看源码: https://github.com/ ...
vue 导入excel插件_Vue框架下实现导入导出Excel、导出PDF
项目需求:开发一套基于Vue框架的工程档案管理系统,用于工程项目资料的填写.编辑和归档,经调研需支持如下功能: Excel报表的导入.导出 PDF文件的导出打印表格经过技术选型,项目组一致决定通过 ...
vue导入导出excel组件封装
vue导入导出excel组件可直接使用参考以下博客,侵删参考的博客 ##一: 项目安装依赖 npm install --save xlsx 在项目中创建文件夹及文件如下图: excel-impo ...
npoi的mvc怎么ajax导出,asp.net mvc利用NPOI导入导出Excel解决方法
asp.net mvc利用NPOI导入导出Excel 导出Excel 2003没有问题,导出Excel2007老是出现无法访问已关闭的流,请帮忙解决,或是哪位有mvc导入导出excel的工具类能提供, ...
java excel data 导入数据_java实现导入导出excel数据
项目需要,要实现一个导入导出excel的功能,于是,任务驱动着我学习到了POI和JXL这2个java操作Excel的插件. 一.POI和JXL介绍 1.POI:是对所有office资源进行读写的一套工 ...
【转】 (C#)利用Aspose.Cells组件导入导出excel文件
Aspose.Cells组件可以不依赖excel来导入导出excel文件: 导入: public static System.Data.DataTable ReadExcel(String strFi ...
让 .Net 更方便的导入导出 Excel
让 .Net 更方便的导入导出Excel Intro 因为前一段时间需要处理一些 excel 数据,主要是导入/导出操作,将 Excel 数据转化为对象再用程序进行处理和分析,没有找到比较满意的库,于 ...

Vue + Element 实现导入导出Excel

Vue + Element 实现导入导出Excel相关推荐

最新文章

热门文章