andt vue3 使用xlsx读取excel数据 遇到的坑
避坑读取xlsx文件遇到的直接问题
·
废话不说,直接上结论
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表格,获取数据,要解决跨域问题,无法直接读取本地文件!
思路A: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
}
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)
}
})
}
更多推荐
已为社区贡献1条内容
所有评论(0)