vue项目中的excel文件的导入

今天在做后台的时候，要实现文件导入的效果，在网上搜了好久，也没有搜到一个详细的文档。

好不容易做出来了，在这记录一下

实现目标：在vue项目中excel 文件的导入

具体实现过程：

1、添加依赖

在这需要添加3个依赖包和2个js文件

使用npm安装

npm install -S file-saver xlsx（file-saver依赖 和xlsx依赖）

npm install -D script-loader

2、下载引入js包

下载两个js文件

下载地址：链接：https://pan.baidu.com/s/1LS7iLMko93Tx3Mi5RIveeg 
               提取码：mafy 

然后在src文件夹下面新建一个 vendor文件夹，将你下载的两个js文件导入。

在main.js文件中引入

在webpack.base.conf.js中修改

就是新添加一行代码

'vendor': path.resolve(__dirname, '../src/vendor'),//新增加一行

在这需要注意的是：

红框中所对应的文件名最好一致

html：

<div class="content">
  <a href="javascript:;" class="file">
    <input id="imFile" type="file" style="display: none" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"  @change="importfxx(this)" />
  </a>
      <Button @click="uploadFile()">导入</Button>
</div>

data： 

js：

uploadFile: function () { // 点击导入按钮
  this.imFile.click()
},
importfxx () {
  this.fullscreenLoading = true
  let obj = this.imFile
  if (!obj.files) {
    this.fullscreenLoading = false
    return
  }
  var f = obj.files[0]
  var reader = new FileReader()
  let $t = this
  reader.onload = function (e) {
    var data = e.target.result
    if ($t.rABS) {
      $t.wb = XLSX.read(btoa(this.fixdata(data)), { // 手动转化
        type: 'base64'
      })
    } else {
      $t.wb = XLSX.read(data, {
        type: 'binary'
      })
    }
    let json = XLSX.utils.sheet_to_json($t.wb.Sheets[$t.wb.SheetNames[0]], {'header': ['No.', 'school', 'father_phone']})
    let importList = $t.dealFile($t.analyzeData(json)) // analyzeData: 解析导入数据
    console.log(importList)
  }
  if (this.rABS) {
    reader.readAsArrayBuffer(f)
  } else {
    reader.readAsBinaryString(f)
  }
},
analyzeData: function (data) { // 此处可以解析导入数据
  return data
},
dealFile: function (data) { // 处理导入的数据
  let _this = this
  this.imFile.value = ''
  this.fullscreenLoading = false
  if (data.length <= 0) {
    this.errorDialog = true
    this.errorMsg = '请导入正确信息'
  } else {
    data.splice(0, 1)
    return data
  }
},
fixdata: function (data) { // 文件流转BinaryString
  var o = ''
  var l = 0
  var w = 10240
  for (; l < data.byteLength / w; ++l) {
    o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
  }
  o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
  return o
},
handleClick () {
  this.open = !this.open
},

在这需要说明的是

上面图片中的header是用来定义表头的(因为excel中的表头大多为中文，我们需要将其转化为英文发送给后台)

点击导入按钮选择文件

后台打印的文件如下所示:

文件上传的功能就这样实现了。