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 面向对象 命名空间
May 13 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 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漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
php如何获取Http请求
2020/04/30 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
中国最大的团购网站:聚划算
2016/09/21 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
C语言中break与continue的区别
2012/07/12 面试题
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
应用电子技术专业个人求职信
2013/09/21 职场文书
班级年度安全计划书
2014/05/01 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python