美文网首页
使用JavaScript实现纯前端读取和导出excel文件

使用JavaScript实现纯前端读取和导出excel文件

作者: soebia | 来源:发表于2019-08-26 16:21 被阅读0次

经常做文件上传,所以有时候要预览上传文件的内容,之前是后端读取的,现在使用js-xlsx,前端也可以读取

xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls、xlsx、csv等十几种格式。本文随意以这3种文件格式为例

首先要安装 xlsx库
引入import XLSX from 'xlsx'

<el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
     <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
</el-table>
<input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls, .csv" @change="handleClick" />
<el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">批量上传</el-button>

1、通过input[type="file"]标签获取本地文件File对象

handleUpload() {
    this.$refs['excel-upload-input'].click();
},
handleClick(e) {
    const files = e.target.files;
    const rawFile = files[0]; // only use files[0]
    if (!rawFile) return;
    this.upload(rawFile);
 },
 upload(rawFile) {
     this.$refs['excel-upload-input'].value = null; //
     this.readerData(rawFile);
 },
readerData(rawFile) {
     return new Promise((resolve, reject) => {
            const reader = new FileReader(); 
            //使用FileReader对象, FileReader通过异步的方式读取文件内容,结果均是通过事件回调获取
             reader.onload = e => {
                   const data = e.target.result;
                   // 获取workbook对象,读取excel主要是通过XLSX.read(data, {type: type});方法来实现,返回一个叫WorkBook的对象 type为array是 Uint8Array,8位无符号数组
                   const workbook = XLSX.read(data, { type: 'array' }) 
                   const firstSheetName = workbook.SheetNames[0] // 是获取Sheets中第一个Sheet的名字
                   const worksheet = workbook.Sheets[firstSheetName] // 获取第一个Sheet的数据
                   const results = XLSX.utils.sheet_to_json(worksheet);  // 输出JSON格式
                   const header = this.getHeaderRow(worksheet)
                   this.generateData({ header, results })  // 处理数据
                   resolve()
             };
             reader.onerror = e => {
                    console.log(e, '4')
                    reject(e)
              }
                // 以ArrayBuffer方式打开文件  读取本地文件
              reader.readAsArrayBuffer(rawFile)
            })
 },
// 获取表头row
getHeaderRow(sheet) {
      const headers = []
      const range = XLSX.utils.decode_range(sheet['!ref'])  //sheet['!ref']:表示所有单元格的范围,例如从A1到F8则记录为A1:F8
      let C
      const R = range.s.r
      /* start in the first row */
      for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
            const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
            /* find the cell in the first row */
            let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
            if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
            headers.push(hdr)
      }
      return headers
},

show({ results, header }) {
      this.tableData = results
      this.tableHeader = header
 },
generateData({ header, results }) {
      this.excelData.header = header
      this.excelData.results = results 
      this.show && this.show(this.excelData)
 },

2、获取文件内容在readerData方法中,其余是我业务里面的数据处理

[官方git文档](https://github.com/SheetJS/js-xlsx](https://github.com/SheetJS/js-xlsx)
参考文档

效果

相关文章

网友评论

      本文标题:使用JavaScript实现纯前端读取和导出excel文件

      本文链接:https://www.haomeiwen.com/subject/nwcdectx.html