vue读取excel表格

 
安装xlsx
 
npm install xlsx --save-dev
 
引入插件
 
import xlsx from 'xlsx'
 
上传读取
 
	<input
                    type="file"
                    ref="upload"
                    accept=".xls,.xlsx"
                    @change="readExcel"
                    class="upload-button"
                />
                <span class="tips">支持扩展名：.xls .xlsx，且不超过100M</span>
 
data() {
      return {
        excelData:'',
      };
 
	readExcel (e) {
          console.log(e)
        const files = e.target.files;

        const fileReader = new FileReader();
        fileReader.onload = (ev) => {
            try {
                const data = ev.target.result
                const workbook = XLSX.read(data, {
                    type: 'binary'
                }) // 读取数据
                const wsname = workbook.SheetNames[0] // 取第一张表
                const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) // 生成json表格内容
                // const ws1 = XLSX.utils.sheet_to_slk(workbook.Sheets[wsname]) // 输出表格对应位置是什么值
                // const ws2 = XLSX.utils.sheet_to_html(workbook.Sheets[wsname]) // 生成HTML输出
                // const ws3 = XLSX.utils.sheet_to_csv(workbook.Sheets[wsname]) // 生成分隔符分隔值输出
                // const ws4 = XLSX.utils.sheet_to_formulae(workbook.Sheets[wsname]) // 生成公式列表（具有值回退）
                // const ws5 = XLSX.utils.sheet_to_txt(workbook.Sheets[wsname]) // 生成UTF16格式的文本
                console.log(ws)

                this.excelData = [] // 清空接收数据
                if(this.excelData.length) {
                    this.fileName = files[0].name;
                }
                } catch (e) {

                return false
            }
        }
        fileReader.readAsBinaryString(files[0]);
      },

 
vue下载excel表格模板和导入excel表格数据
 
vue制作excel表格模板给前端下载
   
  
 

 
vue制作excel表格模板给前端下载
 
最近有个需求，需要导入excel表格，并且还需要制作模板给用户下载。
 
 首先做好模板下载
 
 <el-row>
          <el-col :offset="20" :span="4">
            <el-button size="mini" type="primary" @click="downUp">下载模板</el-button>
            <el-button style="position:relative;overflow:hidden;margin-right:10px" size="mini" type="primary">
              <span>导入</span>
              <input @change="importf(this)" type="file" ref="upload" accept=".xls, .xlsx" style="opacity: 0;position: absolute; top: 0;left: 0;bottom:0"/>
            </el-button>
          </el-col>
  </el-row>
 
制作模板如下
 
//下载模板
      downUp(){
        const jsonData = [{codeStr:4301010010001,tenantName:'株洲地级市',currentVal:1000}];
        if (!jsonData.length) return;
        // 表格的列标题 如果出现科学技术法或者其他格式 使用 \t
        let title = '门店编号,门店名称,销售额\n';
        jsonData.map(item => {
          let key = {};
          key['门店编号'] = item.codeStr;
          key['门店名称'] = item.tenantName;
          key['销售额'] = item.currentVal;
          for (let i in key){
            title += `${key[i] + '\t'},`
          }
          title += '\n'
        });
        // encodeURIComponent 解决中文乱码
        let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(title);
        // 创建a标签
        let link = document.createElement('a');
        link.href = uri;
        link.download='门店计划导入.xls';
        link.click()
      },
 
导入excel表格数据
 
//导入
      importf(obj) {
        let _this = this;
        let inputDOM = this.$refs.inputer;   // 通过DOM取文件数据
        this.file = event.currentTarget.files[0];
        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就是你想要的东西 excel导入的数据
            outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
            // excel 数据再处理
            let arr = [];
            outdata.map(v => {
              let obj = {};
              obj.codeStr = v.门店编号;
              obj.tenantName = v.门店名称;
              obj.currentVal = v.销售额;
              arr.push(obj)
            });
            _this.accountList = [...arr];
            console.log( _this.accountList);
            _this.tableData1=[...arr]
            // _this.reload();
          };
          reader.readAsArrayBuffer(f);
        };
        if(rABS) {
          reader.readAsArrayBuffer(f);
        } else {
          reader.readAsBinaryString(f);
        }
      },

1、安装依赖
 
npm install --save xlsx file-saver
 
2、引入依赖
 
    import FileSaver from 'file-saver'
     import XLSX from 'xlsx'
 
3、使用input的file类型
 
<input type="file" @change="importExcel($event)" />
 
4、定义方法
 
 importExcel(e) {
 
      const that = this;
 
      that.tableData = [];
 
      that.tableName = [];
 
      let files = e.target.files;
 
      let fileReader = new FileReader();
 
      let data,workbook,persons = []
 
      fileReader.onload = function(ev) {
 
        console.log(ev, "ev");
 
        try {
 
          data = ev.target.result
 
          workbook = XLSX.read(data, {
 
              type: "binary"
 
            }), // 以二进制流方式读取得到整份excel表格对象
 
             
 
        } catch (e) {
 
          console.log("文件类型不正确");
 
          return;
 
        }
 
        // 表格的表格范围，可用于判断表头是否数量是否正确
 
        let fromTo = "";
 
        // 遍历每张表读取
 
        for (let sheet in workbook.Sheets) {
 
          if (workbook.Sheets.hasOwnProperty(sheet)) {
 
            fromTo = workbook.Sheets[sheet]["!ref"];
 
            // console.log(fromTo);
 
            persons = persons.concat(
 
              XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
 
            );
 
            // break; // 如果只取第一张表，就取消注释这行
 
          }
 
        }
 
        console.log(persons);
 
        for (let i in persons) {
 
//format为自定义时间转换方法
 
          persons[i]["记录时间"] = format(
 
            excel_time_to_timestamp(persons[i]["记录时间"]),
 
            "yyyy-MM-dd HH:mm:ss"
 
          );
 
        }
 
        that.tableData = persons;
 
        for (let i in persons[0]) {
 
          that.tableName.push(i);
 
        }
 
      };
 
      // 以二进制方式打开文件
 
      fileReader.readAsBinaryString(files[0]);
 
//excel时间类型转成时间戳
 
      function excel_time_to_timestamp(excelTime) {
 
        const second = 25569,
 
          day_timestamp = 24 * 60 * 60 * 1000;
 
        return (+excelTime - second) * day_timestamp;
 
      }
 
    },

前言
 
vue Element Ui 通过 el-upload 来读取表格文件，借助 XLSX（安装： npm i XLSX -S） 来实现读取到的表格转为 JSON 数据格式，然后展示在 el-table 中。
 
 

<template>
	<div>
		<!-- 按钮 -->
	     <el-upload
	       class="upload"
	       action=""
	       :multiple="false"
	       :show-file-list="false"
	       accept="csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
	       :http-request="httpRequest">
	       <el-button size="small" type="primary">上传</el-button>
	     </el-upload>
	     <!-- 按钮 end -->
	     <br />
         <!-- 列表 -->
	        <el-table
	          :data="tableData"
	          border
	          style="width: 100%">
	          <el-table-column
	            prop="ID"
	            label="ID"
	            width="180">
	          </el-table-column>
	          <el-table-column
	            prop="name"
	            label="名字">
	          </el-table-column>
	        </el-table>
       	 <!-- 列表 end -->
     </div>
</template>

<script>
import XLSX from 'xlsx'

export default {
	data () {
		return {
			tableData: []
		}
	},
	methods: {
	    httpRequest (e) {
	      let file = e.file // 文件信息
	      console.log('e: ', e)
	      console.log('file: ', e.file)

        if (!file) {
          // 没有文件
          return false
        } else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
          // 格式根据自己需求定义
          this.$message.error('上传格式不正确，请上传xls或者xlsx格式')
          return false
        }

        const fileReader = new FileReader()
        fileReader.onload = (ev) => {
          try {
            const data = ev.target.result
            const workbook = XLSX.read(data, {
              type: 'binary' // 以字符编码的方式解析
            })
            const exlname = workbook.SheetNames[0] // 取第一张表
            const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) // 生成json表格内容
            console.log(exl)
            // 将 JSON 数据挂到 data 里
            this.tableData = exl
            // document.getElementsByName('file')[0].value = '' // 根据自己需求，可重置上传value为空，允许重复上传同一文件
          } catch (e) {
            console.log('出错了：：')
            return false
          }
	    }
      fileReader.readAsBinaryString(file)
	}
}
</script>