众所周知,uniapp作为跨端利器,有诸多限制,其中之一便是vue页面不支持传统网页的dom、bom、blob等对象。
所以,百度上那些所谓的导入导出excel的方法,大部分都用不了,比如xlsx那个插件,虽然很多方法在vue里不支持,但解析数据等不包含dom那些对象的方法可以考虑下。
插件git:https://github.com/SheetJS/js-xlsx
这类功能也可以交给后台处理,前端直接上传文件给后台解析入库,后台直接生成excel文件返回链接给前端下载。
话不多说,经过一段时间的摸索,uniapp中,app端导入导出,实现方案如下:
导出Excel,走的是系统IO流,代码如下:dateUtil.js的代码点这里
<view class="btn\_cube" @click="tableToExcel">导出一个表来看</view>
<view class="tip">tips:合并什么的可以直接用table标签相关的行内属性合并,如colspan、rowspan</view>
<view class="tip">tips:创建目录时,一个大目录,下面再有一级年月的目录,方便到时候读取目录</view>
<view class="tip">{{successTip}}</view>
</view>
至于导入Excel,我这里就不贴代码了,思路就是利用uniapp的web-view标签,相当于是传统网页的做法,利用input标签的file属性,最后把解析到的值,传递回vue页面。
web-view相关阅读:https://uniapp.dcloud.io/component/web-view
uni.postMessage({
data: {
excelData: finalData
}
});
tips:手机上不比电脑,如果要调试如上功能,建议下个办公软件,比如wps手机版,这样找excel文件就比较快。
手机扫一扫
移动阅读更方便
你可能感兴趣的文章