底层架构 Git vim iphone firebase keras meteor gwt 3d swift2 air grunt Parsley vue动态绑定class java并发编程视频 webpack视频 bootstrap框架 matlab图像识别 mysql增删改查语句 python数据库 python基础练习 python教程推荐 python加入环境变量 java编程学习 java教材 java数组扩容 java的安装 java获取url参数 linux的find 霜之祝福 bat脚本 修改tomcat端口 bash命令 千千静听老版本 视频编辑专家下载 ie拒绝访问 office2010免费版 逆战丛林魅影 数据库建模工具 ps阵列
当前位置: 首页 > 学习教程  > 编程语言

VUE读取本地execl文件

2020/8/11 19:15:53 文章标签:

一、环境需要

需要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结果展示到页面上。和同事讨论后感觉还是开发一套后台系统处理数据最佳。于是以上代码没有继续深究,哎。。。


本文链接: http://www.dtmao.cc/news_show_100118.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?