VUE读取本地execl文件

一、环境需要

需要xlsx包，安装方法：

npm install xlsx --save

一个execl文件，并且放到vue项目的public目录下。

二、代码

新建一个.vue

<template>
<div>
<el-button @click="beforeUpload()">加载数据el-button>
div>
template>

<script>
import axios from 'axios'
import XLSX from 'xlsx'

function readXLSX() {
var url = "/AMAQ.csv"
axios.get(url, {responseType:'arraybuffer'})
.then((res) => {
var data = new Uint8Array(res.data)
var wb = XLSX.read(data, {type:"array"})
console.log(wb)
}).catch( err =>{
this.err = err
})
}
export default {
methods: {
beforeUpload() {
readXLSX()
}
}
}
script>

可以通过F12->network查看加载情况。

三、闲话

因业务需要，本准备使用前端服务直接从本地读取execl结果展示到页面上。和同事讨论后感觉还是开发一套后台系统处理数据最佳。于是以上代码没有继续深究，哎。。。