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 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
js闭包用法实例详解
Dec 13 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
iview form清除校验状态的实现
Sep 19 Javascript
js实现滑动进度条效果
Aug 21 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
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
javascript 面向对象编程 万物皆对象
2009/09/17 Javascript
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
python分布式环境下的限流器的示例
2017/10/26 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
python实现计算器功能
2019/10/31 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
Python txt文件如何转换成字典
2020/11/03 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
remote接口和home接口主要作用
2013/05/15 面试题
新农村建设典型材料
2014/05/31 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
2014司机年终工作总结
2014/12/05 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript