vue读取本地的excel文件并显示在网页上方法示例


Posted in Javascript onMay 29, 2019

我想实现读取一个本地的xlsx文件(task_list.xlsx)然后显示在网页上, 一开始选择的方法是建个express server, 通过发送axios请求来实现, 但是觉得只是读取一个本地文件还要搞个server太复杂了, 最终还是通过"xlsx"模块 + axios实现了读取本地文件, 无需后端, 步骤如下:

1.通过vue-cli新建项目:

vue读取本地的excel文件并显示在网页上方法示例

2.编写分析excel workbook的脚本

/src/scripts/read_xlsx.js

const XLSX = require('xlsx')

//将行,列转换
function transformSheets(sheets) {
 var content = []
 var content1 = []
 var 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]))
 }
 var maxLength = Math.max.apply(Math, tmplist)
 //进行行列转换
 for (let y in [...Array(maxLength)]){
  content.push([])
  for (let x in [...Array(tmplist.length)]) {
   try {
    for (let z in content1[x][y]){
     content[y].push(content1[x][y][z])
    }
   } catch (error) {
    content[y].push(' ')
   }
  }
 }
 content.unshift([])
 for (let key in sheets){
  content[0].push(key)
 }
 return content

}

export {transformSheets as default}

3.新建一个组件

/src/components/task_list.vue

<template>
 <div class="task-list">
  <p v-if="err!==''">{{err}}</p> <!-- 用来显示报错 -->
  <table style="margin:0 auto;" v-if="content!==''"> <!-- 设置居中,如果没获取到内容则不显示 -->
   <tr><th v-for="h in content[0]" :key="h.id">{{h}}</th></tr> <!-- 循环读取数据并显示 -->
   <tr v-for="row in content.slice(1,)" :key=row.id>
    <td v-for="item in row" :key=item.id>{{item}}</td>
   </tr>
  </table>
 </div>
</template>

<script>
import axios from 'axios'
import XLSX from 'xlsx'
import transformSheets from '../scripts/read_xlsx'  //导入转制函数

export default {
 name: 'TaskList',
 data: function () {
  return {
   content: '',  //初始化数据
   err: ''
  }
 },
 created() {
  var url = "/task_list.xlsx" //放在public目录下的文件可以直接访问
  
  //读取二进制excel文件,参考https://github.com/SheetJS/js-xlsx#utility-functions
  axios.get(url, {responseType:'arraybuffer'})
  .then((res) => {
    var data = new Uint8Array(res.data)
  var wb = XLSX.read(data, {type:"array"})
  var sheets = wb.Sheets
  this.content = transformSheets(sheets)
  }).catch( err =>{
   this.err = err
  })
 }
}

大功告成,编译然后部署到服务器吧

npm run build

部署就不详述了,把dist目录丢到服务器上就行.

vue读取本地的excel文件并显示在网页上方法示例

效果就是这样,编程新手,就这个东西断断续续搞了快一周了...

github地址 https://github.com/LeviDeng/task_list

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript之对系统的toFixed()方法的修正
May 08 Javascript
javascript下IE与FF兼容函数收集
Sep 17 Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
js实现可控制左右方向的无缝滚动效果
May 29 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 #Javascript
详解vue-cli3开发Chrome插件实践
May 29 #Javascript
vue里的data要用return返回的原因浅析
May 28 #Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 #Javascript
Javascript三种字符串连接方式及性能比较
May 28 #Javascript
vue+element实现表格新增、编辑、删除功能
May 28 #Javascript
Vue实现表格批量审核功能实例代码
May 28 #Javascript
You might like
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
2016/01/04 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
layui前端时间戳转化实例
2019/11/15 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
vue中如何添加百度统计代码
2020/12/19 Vue.js
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
python对文件的操作方法汇总
2020/02/28 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
本科生详细的自我评价
2013/09/19 职场文书
课程设计心得体会
2013/12/28 职场文书
《两只鸟蛋》教学反思
2014/02/10 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
九华山导游词
2015/02/03 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书