vue中上传读取及下载excel文件

准备工作

1、安装依赖包

npm install -S file-saver （-S用于生产环境）

npm install -S xlsx

npm install -D script-loader （-D用于开发环境）

2、引入文件

导出excel需要两个文件：Blob.js和Export2Excel.js

链接：https://pan.baidu.com/s/137U5xaym8htX_q2AaVt6Mw 提取码：xue9

在src下新建目录vendor，将Blob.js和Export2Excel.js放进去，修改Export2Excel.js文件内容，下列语句表示引入Blob.js，注意修改为自己工程中Blob.js对应的路径，

require('script-loader!vendor/Blob')

或者，在webpack.base.conf.js中指定vendor的路径，

    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'vendor': path.resolve(__dirname, '../src/vendor')
    }

下载

下载使用Export2Excel.js的export_json_to_excel函数实现

先写一个按钮，给一个click事件

<template>
  <div class="excelDiv">
    <el-button @click="download">下载</el-button>
    <div id="fileselect">
      <el-input style="margin-top: 16px" type="file"></el-input>
    </div>
  </div>
</template>

准备表格数据

table: [{
        id: 1,
        name: '测试1',
        age: 21
      }, {
        id: 2,
        name: '测试2',
        age: 22
      }, {
        id: 3,
        name: '测试3',
        age: 23
      }],

download函数

    download: function () {
      var tHeader = ['id', '姓名', '年龄'] // excel的表头标题
      var filterVal = ['id', 'name', 'age'] // 需要导出对应自己列表中的每项数据
      var list = this.table // 列表数据
      var data = this.formatJson(filterVal, list)
      export_json_to_excel(tHeader, data, 'excelname')
    }

其中export_json_to_excel(tHeader, data, ' excelname')是简写形式，对应的参数是

      excel.export_json_to_excel({
        header: tHeader,
        data,
        filename: 'excelname' // 文件名称,若不写导出文件可能不识别
      })

formatJson函数

    // 在整个列表的数据中过滤导出自己需要的数据
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },

上传读取

上传用input的type=”file”实现，读取用FileReader，用xlsx的utils.sheet_to_json方法将读取到的内容转换成json数据，我们就可以就行下一步处理了。

  mounted: function () {
    this.$nextTick(function () {
      this.readFile()
    })
  },

    // 导入设备，监听上传文件并读取
    readFile: function () {
      let fileselect = document.querySelector('#fileselect')
      fileselect.addEventListener('change', function (e) {
        event.preventDefault()
        let file = e.target.files
        if (file.length <= 0) { // 如果没有文件名
          return
        } else if (!/\.(xls|xlsx)$/.test(file[0].name.toLowerCase())) {
          this.$message({
            type: 'info',
            message: '上传格式不正确，请上传xls或者xlsx格式'
          })
          return
        }
        let reader = new FileReader()
        if (typeof FileReader === 'undefined') {
          this.$message({
            type: 'info',
            message: '您的浏览器不支持FileReader接口'
          })
          return
        }
        reader.readAsBinaryString(file[0])
        reader.onload = function (e) {
          try {
            var data = e.target.result
            var workbook = XLSX.read(data, { type: 'binary' })
            var wsname = workbook.SheetNames[0] // 取第一张表
            var ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) // 生成json表格内容          } 
          catch (e) {
            return false
          }
        }
      }.bind(this))
    }

注意XLSX需要引入

import XLSX from 'xlsx'

在读取上传文件之前先判断是不是excel文件，主要通过后缀是否为‘xls’或者‘xlsx’来判断，判断方法有多种，我列出了三种方式以供参考，首先通过e.target.files[0].name获取上传文件的名称然后判断

1、分割字符串

         let arr = e.target.files[0].name.split('.')
          if (arr[1] !== 'xls' && arr[1] !== 'xlsx') {
            this.$message('上传格式不正确，请上传xls或者xlsx格式')
            return
          }

2、正则校验

!/\.(xls|xlsx)$/.test(e.target.files[0].name.toLowerCase())

3、lastIndexOf() 方法检索字符串

e.target.files[0].name.lastIndexOf(".xls") > 0 || e.target.files[0].name.lastIndexOf(".xlsx") > 0

需要注意

ESLint语法会报错Identifier 'export_json_to_excel' is not in camel case，不影响功能。

vue中上传读取及下载excel文件

猜你喜欢