我想实现读取一个本地的文件格式文件(task_list.xlsx)然后显示在网页上，一开始选择的方法是建个快速服务器，通过发送爱可信请求来实现，但是觉得只是读取一个本地文件还要搞个计算机网络服务器太复杂了，最终还是通过xlsx '模块爱可信实现了读取本地文件，无需后端，步骤如下：

1.通过脚手架新建项目：

2.编写分析超过工作簿的脚本

/src/scripts/read_xlsx.js

const XLSX=require('xlsx')//将行，列转换函数转换工作表(工作表){ var content=[]var content 1=[]var tmplist=[]for(让键入工作表){ //读出来的练习本数据很难读，转换为数据格式，参考https://github.com/SheetJS/js-xlsx#utility-functions特普利斯特。推送(XLSX。utils。sheet _ to _ JSON(sheets[key]).长度)内容1。push(xlsx。utils。sheet _ to _ JSON(sheets[key])} var maxLength=Math。最大值应用(数学，tmplist) //进行行列转换让y进来[.数组(MaxLength)]{内容。将([])推送给(让x在[.数组(tmplist。长度)】(尝试{ for(让z进入content1[x][y]){ content[y].push(content1[x][y][z]) } } catch(错误){ content[y].推送(" ")} } } content.unshift([])用于（让键入工作表){内容[0].按（键)}返回内容}导出{转换表为默认值}3。新建一个组件

/src/components/task_list.vue

模板' div class='任务列表p v-if='err！=='''{{err}}/p！-用来显示报错-table style=' margin 33600 auto；'v-if='content！==''' !-设置居中，如果没获取到内容则不显示-trth v-for=' h in content[0]' : key=' h . id“{ h } }/th/tr！-循环读取数据并显示-tr v-for=' content。slice(1)，' : key=row。id TD v-for='行中的项目' :键=项目。id { { item } }/TD/tr/table/div/template脚本从“axios”导入axios从“XLSX”导入XLSX从“导入转换”./scripts/read_xlsx' //导入转制函数导出默认{ name: 'TaskList '，data : function(){ return { content : ' '，//初始化数据err: '' } }，已创建(){ var url='/task_list.xlsx' //放在公众的目录下的文件可以直接访问//读取二进制超过文件，参考https://github.com/SheetJS/js-xlsx#utility-functions阿西奥斯。得到.然后((RES)={ var data=新uint 8数组(RES . data)var WB=xlsx。read(数据，{ type : ' array ' })var sheets=WB .床单这个。content=转换工作表(工作表)}).catch(err={ this.err=err }) }}大功告成，编译然后部署到服务器吧

新公共管理运行构建部署就不详述了，把距离目录丢到服务器上就行。

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

开源代码库地址https://github.com/LeviDeng/task_list

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。