vue导入导出excel组件

可直接使用

参考以下博客，侵删
参考的博客
##一：
项目安装依赖 npm install --save xlsx
在项目中创建文件夹及文件如下图：

excel-import.vue 源码：

<template><div class="index" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="拼命加载中..."><el-row><input  type="file" @change="importFile()" id="imFile" style="display: none" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/><el-button class="button" type="primary" @click="uploadFile()">选择文件</el-button>{{fileName}}<el-button class="button" type="primary" @click="exportexcel()">导入</el-button></el-row><!--错误信息提示--><el-dialog title="提示" v-model="errorDialog" size="tiny"><span>{{errorMsg}}</span><span slot="footer" class="dialog-footer"><el-button type="primary" @click="errorDialog=false">确认</el-button></span></el-dialog></div>
</template><script>var XLSX = require('xlsx')export default {name: 'excel-import',data () {return {fileName: "未选择",file: "",fullscreenLoading: false, // 加载中imFile: '', // 导入文件elerrorDialog: false, // 错误信息弹窗errorMsg: '', // 错误信息内容excelData: ["ef"] // excel数据}},mounted () {this.imFile = document.getElementById('imFile')},methods: {exportexcel(){this.$emit("getExcelData",this.excelData)},uploadFile: function () { // 按钮导入this.imFile.click()},importFile: function () { // 导入excelthis.fullscreenLoading = truelet obj = this.imFileif (!obj.files) {this.fullscreenLoading = falsereturn}var f = obj.files[0]var reader = new FileReader()let $t = thisreader.onload = function (e) {var data = e.target.resultif ($t.rABS) {$t.wb = XLSX.read(btoa(this.fixdata(data)), {  // 手动转化type: 'base64'})} else {$t.wb = XLSX.read(data, {type: 'binary'})}let json = XLSX.utils.sheet_to_json($t.wb.Sheets[$t.wb.SheetNames[0]])$t.dealFile($t.analyzeData(json)) // analyzeData: 解析导入数据}if (this.rABS) {reader.readAsArrayBuffer(f)} else {reader.readAsBinaryString(f)}var file = document.getElementById("imFile");this.fileName = file.value;},analyzeData: function (data) {  // 此处可以解析导入数据return data},dealFile: function (data) {   // 处理导入的数据console.log(data)this.imFile.value = ''this.fullscreenLoading = falseif (data.length <= 0) {this.errorDialog = truethis.errorMsg = '请导入正确信息'} else {this.excelData = dataconsole.log(this.excelData)}},fixdata: function (data) {  // 文件流转BinaryStringvar o = ''var l = 0var w = 10240for (; l < data.byteLength / w; ++l) {o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))}o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))return o}}}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style>.el-table th>.cell {text-align: center;}.button {margin-bottom: 20px;}
</style>

excel-export 源码：

<template><div class="index" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="拼命加载中..."><a id="downlink"></a><el-row>文件名：<input v-model="fileName" style="height:30px"><el-button type="primary" class="button" @click="downloadFile(excelData)">导出</el-button></el-row>  </div>
</template><script>var XLSX = require('xlsx')export default {name: 'excel-export',props:{excelData: {type: Array,required: true}},data () {return {fullscreenLoading: false, // 加载中outFile: '',  // 导出文件elfileName: "请输入文件名"}},mounted () {this.outFile = document.getElementById('downlink')},methods: {downloadFile: function (rs) { // 按钮导出console.log(rs)let data = [{}]for (let k in rs[0]) {data[0][k] = k}data = data.concat(rs)this.downloadExl(data, this.fileName)},downloadExl: function (json, downName, type) {  // 导出到excellet keyMap = [] // 获取键for (let k in json[0]) {keyMap.push(k)}let tmpdata = [] // 用来保存转换好的jsonjson.map((v, i) => keyMap.map((k, j) => Object.assign({}, {v: v[k],position: (j > 25 ? this.getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)}))).reduce((prev, next) => prev.concat(next)).forEach(function (v) {tmpdata[v.position] = {v: v.v}})let outputPos = Object.keys(tmpdata)  // 设置区域,比如表格从A1到D10let tmpWB = {SheetNames: ['mySheet'], // 保存的表标题Sheets: {'mySheet': Object.assign({},tmpdata, // 内容{'!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] // 设置填充区域})}}let tmpDown = new Blob([this.s2ab(XLSX.write(tmpWB,{bookType: (type === undefined ? 'xlsx' : type), bookSST: false, type: 'binary'} // 这里的数据是用来定义导出的格式类型))], {type: ''})  // 创建二进制对象写入转换好的字节流var href = URL.createObjectURL(tmpDown)  // 创建对象超链接this.outFile.download = downName + '.xlsx'  // 下载名称this.outFile.href = href  // 绑定a标签this.outFile.click()  // 模拟点击实现下载setTimeout(function () {  // 延时释放URL.revokeObjectURL(tmpDown) // 用URL.revokeObjectURL()来释放这个object URL}, 100)},s2ab: function (s) { // 字符串转字符流var buf = new ArrayBuffer(s.length)var view = new Uint8Array(buf)for (var i = 0; i !== s.length; ++i) {view[i] = s.charCodeAt(i) & 0xFF}return buf},getCharCol: function (n) { // 将指定的自然数转换为26进制表示。映射关系：[0-25] -> [A-Z]。let s = ''let m = 0while (n > 0) {m = n % 26 + 1s = String.fromCharCode(m + 64) + sn = (n - m) / 26}return s},fixdata: function (data) {  // 文件流转BinaryStringvar o = ''var l = 0var w = 10240for (; l < data.byteLength / w; ++l) {o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))}o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))return o}}}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style>.el-table th>.cell {text-align: center;}.button {margin-bottom: 20px;}
</style>

##二：
在其他组件里面使用：

<template>
<div><excel-import @getExcelData="ss"></excel-import><excel-export :excelData="tableData"></excel-export><!--展示导入信息--><el-table :data="tableData" tooltip-effect="dark"><el-table-column label="名称" prop="name" show-overflow-tooltip></el-table-column><el-table-column label="分量" prop="size" show-overflow-tooltip></el-table-column><el-table-column label="口味" prop="taste" show-overflow-tooltip></el-table-column><el-table-column label="单价(元)" prop="price" show-overflow-tooltip></el-table-column><el-table-column label="剩余(份)" prop="remain" show-overflow-tooltip></el-table-column></el-table>
</div></template><script>
import excelImport from "../../excel/excel-import"
import excelExport from "../../excel/excel-export"
export default {name: "Page_1_4_Question",components: { excelImport, excelExport },data() {return {tableData: [],}},methods: {ss(data){this.tableData = data},}
};
</script><style scoped>
#icons {margin-top: 25px;margin-bottom: 25px;
}
.el-link {margin-right: 30px;
}
.handle-box {margin-bottom: 20px;
}
.handle-select {width: 120px;
}
.handle-input {width: 100px;display: inline-block;
}
.del-dialog-cnt {font-size: 16px;text-align: center;
}
.table {width: 100%;font-size: 14px;
}
.red {color: #ff0000;
}
.blue {color: rgb(70, 78, 187);
}
.green {color: forestgreen;
}
.mr10 {margin-right: 10px;
}
.wathet {color: rgb(43, 64, 128);
}
.block {margin-top: 10px;
}
.el-input {margin-right: 25px;
}
.el-select {margin-right: 25px;
}
.el-date-picker {width: 70px;
}
</style><style>
.el-table .warning-row {background: rgb(237, 250, 243);
}
.el-table .success-row {background: #fdfce5;
}
.el-button {margin-left: 5px;
}
.el-upload {width: 120px;height: 30px;
}
</style>

效果图：

选择文件点击导入：

原excel：

导出：

文件导出在浏览器下载地址

vue导入导出excel组件封装相关推荐

vue 导入excel插件_Vue框架下实现导入导出Excel、导出PDF
项目需求:开发一套基于Vue框架的工程档案管理系统,用于工程项目资料的填写.编辑和归档,经调研需支持如下功能: Excel报表的导入.导出 PDF文件的导出打印表格经过技术选型,项目组一致决定通过 ...
【转】 (C#)利用Aspose.Cells组件导入导出excel文件
Aspose.Cells组件可以不依赖excel来导入导出excel文件: 导入: public static System.Data.DataTable ReadExcel(String strFi ...
VUE中导出Excel功能的实现
一.在上一篇文章中我们已经完成了WebSql的操作,并且初始化了一些数据,那么如何导出这些数据呢? **当然方法有多种,本次我们采用引入Export2Excel.js的方法 1.添加所需依赖 npm ...
java excel data 导入数据_java实现导入导出excel数据
项目需要,要实现一个导入导出excel的功能,于是,任务驱动着我学习到了POI和JXL这2个java操作Excel的插件. 一.POI和JXL介绍 1.POI:是对所有office资源进行读写的一套工 ...
ASP.NET Core 导入导出Excel xlsx 文件
ASP.NET Core 使用EPPlus.Core导入导出Excel xlsx 文件,EPPlus.Core支持Excel 2007/2010 xlsx文件导入导出,可以运行在Windows, Li ...
Java导入导出Excel工具类ExcelUtil
前段时间做的分布式集成平台项目中,许多模块都用到了导入导出Excel的功能,于是决定封装一个ExcelUtil类,专门用来处理Excel的导入和导出本项目的持久化层用的是JPA(底层用hiberna ...
java 导入导出excel表格
java 导入导出excel表格业务上有需求上传excel表格并读取内容,本文记录一下该方法表格导入引入相应的工具包 <dependency><groupId>cn.af ...
java io导出excel表格_Java IO 导入导出Excel表格
1.将excel导入到内存 1. 调用工作簿Workbook的静态方法getWorkbook(),获得工作簿Workbook对象 InputStream in = new FileInputStrea ...
MacOS 10.15 Laravel框架使用 Box/Spout 导入导出Excel
MacOS 10.15 Laravel框架使用 Box/Spout 导入导出Excel 准备工作环境条件安装Composer 使用Composer安装 Box/Spout 导入Excel 官方描 ...

vue导入导出excel组件封装

vue导入导出excel组件

vue导入导出excel组件封装相关推荐

最新文章

热门文章