vue导出+导入功能

导出

我这边的需求是后台返回了文件流由前端导出
首先需要安装

//FileSaver.js 是在客户端保存文件的解决方案，非常适合需要生成文件
npm install file-saver --save

此外，如果要安装 Typscript 声明，可以这样做：

npm install @types/file-saver --save-dev

然后就可以愉快的导出文件了

//res是后台返回的文件流
//第二个参数是导出的文件名
//第三个参数是导出的格式
FileSaver.saveAs((new Blob([res])), 'order.xls', 'application/vnd.ms-excel')

导出就这么简单!

导出

导入的功能是因为地推的功能，导出去的商品填写完唯一识别号再导入到表格更改商品状态,我这里使用的UI组件是element-ui

      <el-upload
        class="upload-demo"
        :action="importFileUrl"
        :on-change="handleChange"
        :limit="1"
        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
        :auto-upload="false"
      >
        <el-button size="small" type="primary">导入已填写好的数据</el-button>
        <div slot="tip" class="el-upload__tip">只 能 上 传 xlsx / xls 文 件</div>
      </el-upload>

action是上传的地址

handleChange(file, fileList) {
      this.fileTemp = file.raw
      if (this.fileTemp) {
        if ((this.fileTemp.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') || (this.fileTemp.type === 'application/vnd.ms-excel')) {
          this.importfxx(this.fileTemp)
        } else {
          this.$message({
            type: 'warning',
            message: '附件格式错误，请删除后重新上传！'
          })
        }
      } else {
        this.$message({
          type: 'warning',
          message: '请上传附件！'
        })
      }
    },
importfxx(obj) {
      // 通过DOM取文件数据
      var _this = this
      this.file = obj
      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 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 = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])// outdata就是你想要的东西
          this.da = [...outdata]
        //111，222，333，444，555，666是导入后的表头的数据
          this.da.map(v => {
            const obj = {}
            obj.orderGoodsId = v['111'] || ''
            obj.expressNum = v['222'] || ''
            obj.expressFee = v['333'] || ''
            obj.goodsFrom = v['444'] || ''
            obj.warehouseExpress = v['555'] || ''
            obj.goodsIdentifier = v['666'] || ''
            arr.push(obj)
          })
        }
        reader.readAsArrayBuffer(f)
      }

      if (rABS) {
        reader.readAsArrayBuffer(f)
      } else {
        reader.readAsBinaryString(f)
      }
    }

导入的功能就是这些了，希望能帮到各位！

最后编辑于：2020.09.25 16:55:42