vue使用js-xlsx插件导入Excel表格数据

import Vue from 'vue'
import XLSX from 'xlsx'

/**
 * 导入ex表格 得到json数据
 * 已注入所有Vue实例,
 * template模板里调用 $importf
 * 组件方法里调用 this.$importf
 * 例:<input type="file" id="file22" @change="importf('file22')" />
 * this.$importf(id) 得到 json数据
 */
const importf = (id) => {
  let promise = new Promise((resolve, reject) => {
    // 导入
    // FileReader共有4种读取方法:
    // 1.readAsArrayBuffer(file) :将文件读取为ArrayBuffer。
    // 2.readAsBinaryString(file) :将文件读取为二进制字符串
    // 3.readAsDataURL(file) :将文件读取为Data URL
    // 4.readAsText(file, [encoding]) :将文件读取为文本,encoding缺省值为'UTF-8'
    var wb // 读取完成的数据
    var rABS = false // 是否将文件读取为二进制字符串
    let obj = document.getElementById(id)
    if (!obj.files) {
      return
    }
    var f = obj.files[0]
    var reader = new FileReader()
    if (rABS) {
      reader.readAsArrayBuffer(f)
    } else {
      reader.readAsBinaryString(f)
    }
    var arr = []
    reader.onload = function (e) {
      var data = e.target.result
      if (rABS) {
        wb = XLSX.read(btoa(fixdata(data)), { // 手动转化
          type: 'base64'
        })
      } else {
        wb = XLSX.read(data, {
          type: 'binary'
        })
      }
      // wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
      // wb.Sheets[Sheet名]获取第一个Sheet的数据
      arr = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
      // console.log(JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])))
      // console.log(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]))
      // return XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
      resolve(arr)
    }
    reader.onerror = function (e) {
      reject(arr)
    }
  })
  return promise
}
const fixdata = (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
}

Vue.prototype.$importf = importf

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个基于 Vue 和 Element UI 的导入 Excel 的示例代码: ```vue <template> <div> <el-upload class="upload-excel" :before-upload="beforeUpload" :on-success="onUploadSuccess" :on-error="onUploadError" :file-list="fileList" :accept=".xlsx,.xls" :auto-upload="false" > <el-button slot="trigger" type="primary">选择文件</el-button> <el-button slot="append" type="success" :disabled="!fileList.length" @click="uploadExcel">上传</el-button> <div slot="tip" class="el-upload__tip">只能上传 .xlsx 或 .xls 文件</div> </el-upload> </div> </template> <script> import XLSX from 'xlsx' export default { data() { return { fileList: [] } }, methods: { beforeUpload(file) { // 校验文件类型 const isXLS = file.type === 'application/vnd.ms-excel' const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' const isExcel = isXLS || isXLSX if (!isExcel) { this.$message.error('只能上传 .xlsx 或 .xls 文件') return false } // 添加到 fileList this.fileList.push(file) return false // 阻止自动上传 }, onUploadSuccess(response) { // 上传成功后的处理逻辑 this.$message.success('上传成功!') }, onUploadError(error) { // 上传失败后的处理逻辑 this.$message.error('上传失败!') }, uploadExcel() { // 读取 Excel 文件内容,此处使用xlsx 库 const file = this.fileList[0] const reader = new FileReader() reader.onload = (e) => { const data = e.target.result const workbook = XLSX.read(data, { type: 'binary' }) const sheetName = workbook.SheetNames[0] const worksheet = workbook.Sheets[sheetName] const json = XLSX.utils.sheet_to_json(worksheet) console.log(json) // 打印 Excel 数据 } reader.readAsBinaryString(file.raw) } } } </script> ``` 解释一下: 1. 组件包含一个 `el-upload` 组件,用于上传 Excel 文件。 2. `beforeUpload` 方法用于校验文件类型,并将文件添加到 `fileList` 。 3. `onUploadSuccess` 和 `onUploadError` 分别是上传成功和上传失败的回调函数。 4. `uploadExcel` 方法用于读取 Excel 文件内容,使用了 `xlsx` 库将 Excel 数据转换成 JSON 数据

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值