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 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
详解js的六大数据类型
Dec 27 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
JS实现点击循环切换显示内容的方法
Oct 19 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 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
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
php实现读取内存顺序号
2015/03/29 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
浅谈javascript的调试
2015/01/28 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
Python常用列表数据结构小结
2014/08/06 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
python基于opencv检测程序运行效率
2019/12/28 Python
Python双链表原理与实现方法详解
2020/02/22 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
python判断变量是否为列表的方法
2020/09/17 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
住宅使用说明书
2014/05/09 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
2014乡党委副书记党建工作汇报材料
2014/11/02 职场文书
公司欠款证明
2015/06/24 职场文书
升学宴学生致辞
2015/09/29 职场文书
转变工作作风心得体会
2016/01/23 职场文书