vue+xlsx实现前端模版下载、导入和导出excel文件

vue+xlsx

前言

产品需求：后端不想写下载，导入和导出的接口，让我们前端自己实现。
这里我们就可以用xlsx插件来实现，我们不多说了，先放一下实现的图片，下面我们分别把模版下载、导入和导出的代码放上来，想用的话，直接复制粘贴即可！

模版下载图片

导出图片：

好了，下面我们就直接上代码！

模版下载

首先，安装xlsx插件

//我这里用的是0.18.5版本
  npm install [email protected]

其次，配置表格导入导出的下载属性

<Button  @click="downloadTemplate(tableInfo)">导出</Button>...data(){return{
       tableData:[],//表格数据
       tableInfo:{
          rowMerge:false,//行合并
          columnsCheckAll:true,
          columnsChecked:[],
          exportColumnAll:true,
          exportColumns:[],
          exportColumnChecked:[],
          visible:false,
          importModal:false,//控制导入弹框显示
          importFile:null,//存放导入excel
          showImportTable:false,//控制导入展示数据表格显示
          importTableData:[],//导入excel的数据
          columns:[{title:'考核维度', key:'checkDimension'},{title:'考核指标', key:'checkIndicators'},{title:'分值', key:'score'}],
          importTableColumns:[],//导入excel的列
          importTableNewData:[],//导入excel解析后的数据},}}

然后，写下载方法

//下载导入模板downloadTemplate(tableInfo){let expData =[];
        tableInfo.importColumns =this.appendTableImportColumns(tableInfo.columns);var header =[];
        tableInfo.importColumns.map((item,index)=>{
           header[index]= item.title;});//1. 新建一个工作簿let workbook =XLSX.utils.book_new();//2.2 把json对象转成工作表let sheet1 =XLSX.utils.json_to_sheet(expData,{header:header});//3.在工作簿中添加工作表XLSX.utils.book_append_sheet(workbook, sheet1,'导入模板');//工作簿名称XLSX.writeFile(workbook,'考核指标导入模板.xlsx');// 保存的文件名},//获取导入表格的列appendTableImportColumns(columns){return columns.filter((item)=>{if(item.hasOwnProperty("title")){if(item.hasOwnProperty("key")){returntrue;}else{if(item.hasOwnProperty("slot")&& item.slot.split(".").length >1){
                        item.key = item.slot.split(".")[1];returntrue;}else{returnfalse;}}}});},

导入功能

这里vue项目我用的是iview ui，也用了上传组件，我把下载模版和上传写在了一个弹窗内，如下图：

弹窗代码如下：

<Modal
  title="导入数据"
   v-model="tableInfo.importModal"
   v-on:on-ok="poCheckKeyTableImportClass(tableInfo,tableData)"
   width="400"><div class="button_content_box"><div class="finance_goods_list_main_content"><div style="margin-bottom: 5px;">点击此处进行 <a  @click="downloadTemplate(tableInfo)">模版下载</a></div><Row><Col span="24"><div><Upload type="drag" action="":before-upload="function(file) { return poCheckKeyTableHandleUpload(file,tableInfo)}"><div style="padding: 20px 0"><Icon type="ios-cloud-upload" size="52"></Icon><p>将文件拖到此处，<a>点击上传</a></p></div></Upload></div></Col></Row></div><div v-if="tableInfo.importFile"><span><Icon type="ios-podium"/></span>{{tableInfo.importFile.name }}</div></div></Modal>

下面方法能看懂最好，看不懂也无妨，直接复制粘贴拿去用就行，方法代码如下：

//上传导入文件前事件poCheckKeyTableHandleUpload(file, tableInfo){let vm =this;
     tableInfo.importFile = file;let reader =newFileReader()let rABS =typeof FileReader !=="undefined"&&(FileReader.prototype ||{}).readAsBinaryString
     if(rABS){
         reader.readAsBinaryString(file)}else{
         reader.readAsArrayBuffer(file)}
     reader.onload=function(e){let data = e.target.result
         if(!rABS){
         data =newUint8Array(data)}let workBook =XLSX.read(data,{type: rABS ?'binary':'array'})
         workBook.SheetNames.forEach(name=>{let sheet = workBook.Sheets[name]let json =XLSX.utils.sheet_to_json(sheet,{
                 raw:true,
                 header:1,
                 defval:null});let tableData =[];
         json.map((itemData, indexData)=>{if(indexData >0){var attr ={};
             json[0].map((item, index)=>{
                 attr[item]= itemData[index];});
             tableData.push(attr);}});let importTableColumns =[];
         json[0].map((item, index)=>{var attr ={};
             attr.title = item;
             attr.key = item;
             attr.width =100;
             importTableColumns.push(attr);})let tableNewData =[];let columnCount =0;
         tableInfo.columns.map((item, index)=>{
             importTableColumns.some((itemColumn, indexColumn)=>{if(item.title == itemColumn.title){
                 columnCount++;var field = item.key;if(field ==undefined){
                 field = item.slot.split(".")[1];}
                 tableData.map((itemData, indexData)=>{if(columnCount ==1){var attr ={};
                     attr[field]= itemData[itemColumn.title];
                     tableNewData.push(attr);}else{
                     tableNewData[indexData][field]= itemData[itemColumn.title];}})returntrue;}});});if(tableNewData.length >0){
             tableInfo.importTableData = tableData;
             tableInfo.importTableColumns = importTableColumns;
             tableInfo.importTableNewData = tableNewData;
             tableInfo.showImportTable =true;}else{
             vm.$Message.error('请规范录入表格数据！');}})}returnfalse;},//点击导入确认poCheckKeyTableImportClass(tableInfo, data){
     tableInfo.showImportTable =false;if(tableInfo.importTableNewData.length >0){
         tableInfo.importTableNewData.map(item=>{
          data.push(item);})
         tableInfo.importTableNewData =[];}},

导出功能

<Button type="primary" @click="onBtnExporttableClick(tableInfo,'考核得分信息')"><span>导出</span></Button>

导出方法如下：

onBtnExporttableClick(tableInfo, fileName){
    tableInfo.visible =false;if(tableInfo.params ===undefined){
      tableInfo.params ={};}let expData =[];
    tableInfo.columns.map((item, index)=>{this.tableData.map((itemData, indexData)=>{if(index ==0){var attr ={};
                attr[item.title]= itemData[item.key];
                expData.push(attr);}else{
                expData[indexData][item.title]= itemData[item.key];}})})//1. 新建一个工作簿let workbook =XLSX.utils.book_new();//2.2 把json对象转成工作表let sheet1 =XLSX.utils.json_to_sheet(expData);//3.在工作簿中添加工作表XLSX.utils.book_append_sheet(workbook, sheet1, fileName);//工作簿名称//4.输出工作表,由文件名决定的输出格式XLSX.writeFile(workbook, fileName +'.xlsx');// 保存的文件名},

不要看到那么多代码就感觉很复杂，然而很简单没因为需要你作改动的并不多，当然你也可以根据自己需求去做的更加完善，简单的导入导出实现，这就足够啦，不需要做什么更改，复制粘贴就可以！