废话不说,直接上结论

1.引入方式绝对不能像网上说的用import XLSX from 'xlsx',应该由import * as XLSX from 'xlsx/xlsx.mjs'或者import * as XLSX from 'xlsx' 替换

import * as XLSX from 'xlsx' // vue3可用此引入
import XLXS from "xlsx"; // vue2可用此引入

参考:https://blog.csdn.net/weixin_47979372/article/details/123984292

2.想实现不通过服务器上传处理获取excel数据,也就是vue3直接处理excel表格,获取数据,要解决跨域问题,无法直接读取本地文件!

参考:axios在vue3.0的版本下解决跨域

思路A:Anywhere开启自定义文件夹服务器

参考:nodejs服务器Anywhere使用

思路B:自己搭建服务器,吧要处理的文件放入服务器中,用axios.get获取文件

【根据url获取xlsx数据】

//readExcelFileFromUrl.js
import * as XLSX from 'xlsx'
import axios from "axios";
axios.defaults.baseURL = '/api'

//url 为文件名比如 ttt.xslx
export function readExcelFile(url){
    axios.get(url,{responseType:'arraybuffer'})
        .then((res)=>{
            let data = new Uint8Array(res.data)
            let wb = XLSX.read(data, {type:"array"})
            let sheets = wb.Sheets // 获取文档数据
            transformSheets(sheets)
        }).catch( err =>{
        console.log(err)
    })
}
export function transformSheets(sheets){
    let content1 = []
    let tmplist = []
    for (let key in sheets){
        //读出来的workbook数据很难读,转换为json格式,参考https://github.com/SheetJS/js-xlsx#utility-functions
        tmplist.push(XLSX.utils.sheet_to_json(sheets[key]).length)
        content1.push(XLSX.utils.sheet_to_json(sheets[key]))
    }
    console.log(tmplist)
    console.log(content1)
}

 配置跨域设置,记得重启yarn/npm

//vue.config.js
module.exports = defineConfig({
  devServer: {
    port:8000,
    proxy: {
      '/api': {                //   /api是习惯性的写法,可以随意改
        target: 'http://localhost', //接口域名(文件服务器域名)
        changeOrigin: true,             //是否跨域
        ws: true,                       //是否代理 websockets
        secure: true,                   //是否https接口
        pathRewrite: {                  //路径重置
          '^/api': ''
        }
      }
    }
  }
})

 获取结果json格式属性名转换


function dealExcel(ws){
  let keymap = {  // 我们要转换的开头
    "员工": "name",
    "工号": 'num',
    "登录账号": 'account',
    "部门": 'department'
  }
  ws.forEach(sourceObj => {
    Object.keys(sourceObj).map(keys => {
      let newKey = keymap[keys]
      if (newKey) {
        sourceObj[newKey] = sourceObj[keys]
        delete sourceObj[keys]
      }
    })
  })
  tableData.value = ws
}

参考:如何在vue项目中直接读取本地excel文件中的数据

vue3采用xlsx库实现本地上传excel文件,前端解析成Json数据

3.

如何实现文件读取和xlsx的数据读取

【读取上传空间上传文件获取xlsx数据】

  <a-upload
      v-model:fileList="fileList"
      name="file"
      action=""
      :beforeUpload="beforeUpload"
      @change="uploadChange"
      @drop="handleDrop"
      maxCount="1"
  >
    <p class="ant-upload-text">点击上传</p>
  </a-upload>

 核心在beforeUpload方法中,

//上传文件前处理
    let beforeUpload=(file,getFileList)=>{
      doReadExcelFile(file)
      return false //false不上传文件
    }
import {readFile} from '@/until/readFile';

let doReadExcelFile=async(file)=>{
      let dataBinary = await readFile(file)
      let workBook = xlsx.read(dataBinary, {type: 'binary', cellDates: true})
      let workSheet = workBook.Sheets[workBook.SheetNames[0]]
      const data = xlsx.utils.sheet_to_json(workSheet)
      console.log(data)
    }
//readFile.js

export const readFile = (file) => {
    return new Promise(resolve => {
        let reader = new FileReader()
        reader.readAsBinaryString(file)
        reader.onload = ev => {
            resolve(ev.target.result)
        }
    })
}

参考: vue3如何导入、读取excel文件

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐