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

Tikitoo 发布于2019-08-26 13:58 / 2315人阅读

摘要：我想实现读取一个本地的文件然后显示在网页上一开始选择的方法是建个通过发送请求来实现但是觉得只是读取一个本地文件还要搞个太复杂了最终还是通过模块实现了读取本地文件无需后端步骤如下通过新建项目编写分析的脚本将行列转换读出来的数据很难读转换为格

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

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

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

{{h}}
{{item}}

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

github地址 https://github.com/LeviDeng/t...
希望能有帮助,喜欢的给个star吧

云服务器 GPU云服务器读取服务器文件并下载 php读取excel文件怎么远程读取云服务器上的文件读取excel数据的js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109918.html

网页版模仿Excel

摘要：鼠标按下拖拽多选单元格这个是本唯一的亮点了个人认为。这样做的结果是页面非常卡，因为鼠标移动过程会多次触发鼠标移动事件，会多次进行单元格元素循环遍历。网页版模仿Excel 最近公司闲的dan疼，非要模仿Excel做一个网页版的Excel，刚开始听说要做这么一个东西的时候瞬间觉得公司领导高(sang)瞻(xin)远(bing)瞩(kuang)，只能头铁的接下了，那就开始干。其实主要目的是...

james 2019-08-26 11:49 评论0 收藏0
网页版模仿Excel

摘要：鼠标按下拖拽多选单元格这个是本唯一的亮点了个人认为。这样做的结果是页面非常卡，因为鼠标移动过程会多次触发鼠标移动事件，会多次进行单元格元素循环遍历。网页版模仿Excel 最近公司闲的dan疼，非要模仿Excel做一个网页版的Excel，刚开始听说要做这么一个东西的时候瞬间觉得公司领导高(sang)瞻(xin)远(bing)瞩(kuang)，只能头铁的接下了，那就开始干。其实主要目的是...

Carl 2019-08-01 18:42 评论0 收藏0
XCel 项目总结 - Electron 与 Vue 的性能优化

摘要：而这里的单元格信息是唯一的，所以直接通过为一个空对象赋值即可。和相关的知识和技巧高亮的列单元格采用展示。在中，被选中的单元格会高亮相应的行和列，以提醒用户。 showImg(https://segmentfault.com/img/bVGkdk?w=900&h=500); XCEL 是一个 Excel 数据清洗工具，其通过可视化的方式让用户轻松地对 Excel 数据进行筛选。 XCEL...

XUI 2019-08-22 10:45 评论0 收藏0
【easy-invoices】electron-vue、sqlite3 项目初探

摘要：远程读取会有许多限制，防止引起不必要的安全隐患。比较时可以把点去掉转为数字类型比较脚本执行完毕下载前可以拿到更新日志时间版本号和包大小，下载时可以拿到速度。然后开启该项目的构建。将第一步生成的填至项目环境变量，参数名为。父母都是做出纳相关的工作，希望我能给他们做个简单的进销存，在上班的时候使用。开发一个不需要花钱买服务器，不需要依赖网络（更新除外），单机版的程序，对于前端出身的我来说...

wpw 2019-08-23 12:36 评论0 收藏0