Vue+pikaz-excel-js实现导出功能

pikaz-excel-js是一个vue版本的excel导入导出插件,个人觉得跟后端实现导入导出相比下来更简单方便,速度较快

安装pikaz-excel-js

在前端软件中使用命令安装

npm i -S pikaz-excel-js

下载成功后可以在node_modules目录中找到以下东东

数据区

data中加入两个集合,用以存放导出的数据

	  //导出集合
      exportList:[],
      //导出数据:
      sheet:[],

HTML

页面中加入导出按钮,并绑定事件,这里的:sheet绑定要导出的数据,filename即导出的文件名

	  <excel-export :sheet="sheet" filename="房源列表">
        <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
        >导出
        </el-button>
      </excel-export>

方法区

if判断要导出的List是否为空,然后遍历赋值,这里个人认为较重要的是sheetData的写法:
①tHeader确认excel的列标题 ②table确认excel行数据 ③keys绑定数据(跟prop差不多)

	/** 导出按钮操作 */
    handleExport() {
      this.exportList = []
      if (this.houseList && this.houseList.length > 0){
        for(let item of this.houseList){
          console.log('item',item)
          let exportData = {}
          exportData.house_name = item.house_name
          exportData.house_area = item.house_area
          exportData.rent = item.rent
          exportData.house_type = item.house_type

          exportData.location = item.location

          exportData.house_time = item.house_time
          exportData.description = item.description

          this.exportList.push(exportData)
        }
      }
      this.sheet=[];
      let sheetData = {
        //title
        tHeader: [
          '房屋名称',
          '房屋面积',
          '租金',
          '房屋类型',
          '位置',
          '修建时间',
          '具体描述',
        ],
        table:this.exportList,
        keys:[
          'house_name',
          'house_area',
          'rent',
          'house_type',
          'location',
          'house_time',
          'description',],
        sheetName:"房源信息",
      }
      this.sheet.push(sheetData)
    }
  },

效果图

除了导出功能,该插件还可以用excel-import实现导入功能,我暂时不需要用到,后续用到的话会更新本文章~希望对你们有所帮助,有不懂的欢迎留言