众所周知，uniapp作为跨端利器，有诸多限制，其中之一便是vue页面不支持传统网页的dom、bom、blob等对象。

所以，百度上那些所谓的导入导出excel的方法，大部分都用不了，比如xlsx那个插件，虽然很多方法在vue里不支持，但解析数据等不包含dom那些对象的方法可以考虑下。

插件git:https://github.com/SheetJS/js-xlsx

这类功能也可以交给后台处理，前端直接上传文件给后台解析入库，后台直接生成excel文件返回链接给前端下载。

话不多说，经过一段时间的摸索，uniapp中，app端导入导出，实现方案如下：

导出Excel，走的是系统IO流，代码如下：dateUtil.js的代码点这里

<template>

    <view class="content">

        <view class="top_box">{{title}}</view>

        <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>

</template>

<script>

    import {formatNumber,formatDateThis,getUnixTime} from "@/common/util/dateUtil.js"

    var that;

    export default {

        components:{

        },

        data() {

            return {

                title:"app端导出excel",

                successTip:""

            }

        },

        onLoad() {

            that = this;

        },

        methods: {

            tableToExcel() {

                //要导出的json数据

                const jsonData = [{

                        name: '测试数据',

                        phone: '123456',

                        email: '123@456.com'

                    }

                ]

                //列标题

                let worksheet = "sheet1";

                let str = '<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>';

                //循环遍历，每行加入tr标签，每个单元格加td标签

                for (let i = 0; i < jsonData.length; i++) {

                    str += '<tr>';

                    for (let item in jsonData[i]) {

                        //增加\t为了不让表格显示科学计数法或者其他格式

                        str += `<td>${ jsonData[i][item] + '\t'}</td>`;

                    }

                    str += '</tr>';

                }

                //下载的表格模板数据

                let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"

        xmlns:x="urn:schemas-microsoft-com:office:excel"

        xmlns="http://www.w3.org/TR/REC-html40">

        <head><!--[if gte mso 9]><xml encoding="UTF-8"><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>

        <x:Name>${worksheet}</x:Name>

        <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>

        </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->

        </head><body><table>${str}</table></body></html>`;

                //下载模板

                exportFile(template);

            }

        }

    }

    // 导出文件到手机 fileData:要写入到文件的数据，返回参数为文档路径

    function exportFile (fileData,documentName="项目Excel文件") {

        /*

        PRIVATE_DOC: 应用私有文档目录常量

        PUBLIC_DOCUMENTS: 程序公用文档目录常量

        */

        plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(fs) {

            let rootObj = fs.root;

            let fullPath = rootObj.fullPath;

            // let reader = rootObj.createReader();

            // console.log(reader);

            // reader.readEntries((res)=>{

            //     console.log(res); //这里拿到了该目录下所有直接文件和目录

            // },(err)=>{console.log(err);})

            console.log("开始导出数据********");

            // 创建文件夹

            rootObj.getDirectory(documentName, {

                create: true

            }, function(dirEntry) {

                //获取当前的年月继续创建文件夹

                let date = new Date();

                let year = date.getFullYear();

                let month = date.getMonth() + 1;

                dirEntry.getDirectory(`${year}年${month}月`,{

                    create:true

                },function(dirEntry2){

                    // 创建文件,防止重名

                    let fileName = "excel"+getUnixTime(formatDateThis(new Date()));

                    console.log(fileName);

                    dirEntry2.getFile(`${fileName}.xlsx`, {

                        create: true

                    }, function(fileEntry) {

                        fileEntry.createWriter(function(writer) {

                            writer.onwritestart = (e)=>{

                                uni.showLoading({

                                    title:"正在导出",

                                    mask:true

                                })

                            }

                            //  /storage/emulated/0指的就是系统路径

                            let pathStr = fullPath.replace("/storage/emulated/0","");

                            writer.onwrite = (e) => {

                                // 成功导出数据;

                                uni.hideLoading();

                                setTimeout(()=>{

                                    uni.showToast({

                                        title:"成功导出",

                                        icon:"success"

                                    })

                                    that.successTip = `文件位置：${pathStr}/${documentName}/${year}年${month}月`;

                                },500)

                            };

                            // 写入内容;

                            writer.write(fileData);

                        }, function(e) {

                            console.log(e.message);

                        });

                    });

                })

            });

        });

    }

</script>

至于导入Excel，我这里就不贴代码了，思路就是利用uniapp的web-view标签，相当于是传统网页的做法，利用input标签的file属性，最后把解析到的值，传递回vue页面。

web-view相关阅读：https://uniapp.dcloud.io/component/web-view

    uni.postMessage({

        data: {

            excelData: finalData

        }

    });

tips:手机上不比电脑，如果要调试如上功能，建议下个办公软件，比如wps手机版，这样找excel文件就比较快。

uniapp导入导出Excel的更多相关文章

  1. ASP.NET Core 导入导出Excel xlsx 文件

    ASP.NET Core 使用EPPlus.Core导入导出Excel xlsx 文件,EPPlus.Core支持Excel 2007/2010 xlsx文件导入导出,可以运行在Windows, Li ...

  2. thinkphp导入导出excel表单数据

    在PHP项目经常要导入导出Excel表单. 先去下载PHPExcel类库文件,放到相应位置. 我在thinkphp框架中的位置为ThinkPHP/Library/Org/Util/ 导入 在页面上传e ...

  3. 导入导出Excel工具类ExcelUtil

    前言 前段时间做的分布式集成平台项目中,许多模块都用到了导入导出Excel的功能,于是决定封装一个ExcelUtil类,专门用来处理Excel的导入和导出 本项目的持久化层用的是JPA(底层用hibe ...

  4. php中导入导出excel的原理

    在php中我们要经常导入导出excel文件,方便后台管理.那么php导入和导出excel的原理到底是什么呢?excel分为两大版本excel2007(后缀.xlsx).excel2003(后缀.xls ...

  5. NPOI导入导出EXCEL通用类，供参考，可直接使用在WinForm项目中

    以下是NPOI导入导出EXCEL通用类,是在别人的代码上进行优化的,兼容xls与xlsx文件格式,供参考,可直接使用在WinForm项目中,由于XSSFWorkbook类型的Write方法限制,Wri ...

  6. .NET导入导出Excel

    若是开发后台系统,ASP.NET MVC中总是涉及了很多导入导出Excel的问题,有的时候处理起来比较烦 如果能使用以下代码解决,就完美了 public class ReportModel { [Ex ...

  7. Java利用POI导入导出Excel中的数据

         首先谈一下今天发生的一件开心的事,本着一颗android的心我被分配到了PB组,身在曹营心在汉啊!好吧,今天要记录和分享的是Java利用POI导入导出Excel中的数据.下面POI包的下载地 ...

  8. .Net MVC 导入导出Excel总结(三种导出Excel方法，一种导入Excel方法) 通过MVC控制器导出导入Excel文件(可用于java SSH架构)

    .Net MVC  导入导出Excel总结(三种导出Excel方法,一种导入Excel方法) [原文地址] 通过MVC控制器导出导入Excel文件(可用于java SSH架构)   public cl ...

  9. jxl导入/导出excel

    1.jxl导入/导出excel案例,黏贴即可运行 package junit.test; import java.io.File; import java.io.IOException; import ...

随机推荐

  1. Ceph部署mon出现0.0.0.0地址

    前言 最近在群里两次看到出现mon地址不对的问题,都是显示0.0.0.0:0地址,如下所示: [root@lab8106 ceph]# ceph -s cluster 3137d009-e41e-41 ...

  2. Linux 升级内核开启 TCP BBR 有多大好处

    前言 如果你有订阅一些科技新闻,应该会有看过内核在4.9当中加入了一个新的算法,来解决在有一定的丢包率的情况下的带宽稳定的问题,这个是谷歌为我们带来的干货,新的 TCP 拥塞控制算法 BBR (Bot ...

  3. List、Tuple、Set、Dictionary数据类型

    一.List数据类型 1.概述:list(列表)中可以包含多个元素,且元素类型可以不相同. 每一元素可以是任意数据类型,包括列表(即列表嵌套)及后面要介绍的元组.集合.字典. 所有元素都写在一对方括号 ...

  4. js，昨天的日期

    var mydate = new Date(); var yester = mydate-24*60*60*1000; var yesterday = new Date(); yesterday.se ...

  5. HDU100题简要题解（2040~2049）

    HDU2040 亲和数 题目链接 Problem Description 古希腊数学家毕达哥拉斯在自然数研究中发现,220的所有真约数(即不是自身的约数)之和为: 1+2+4+5+10+11+20+2 ...

  6. 如何个性化定制iview中的table样式

    使用renderHeader.render函数 例子: column:[ {}, ..., { title:'较年初占比变化', key:''lastYearChange, renderHeader: ...

  7. 维吉尼亚密码-攻防世界(shanghai)

    维吉尼亚密码 维吉尼亚密码是使用一系列 凯撒密码 组成密码字母表的加密算法,属于多表密码的一种简单形式. 加密原理 维吉尼亚密码的前身,是我们熟悉的凯撒密码. 凯撒密码的加密方式是依靠一张字母表中的每 ...

  8. Java8用了这么久了，Stream 流用法及语法你都知道吗？

    1.简介 Stream流 最全的用法Stream 能用来干什么?用来处理集合,通过 使用Stream API 对集合数据进行操作,就类似于使用 SQL 执行的数据库查询,Stream API 提供了一 ...

  9. FL Studio中的Layer控制器之如何叠加音色

    本章节将采用图文结合的方式给大家讲解电音编曲软件FL Studio中的Layer控制器是如何叠加音色的,感兴趣的朋友可以一起进来交流哦. Layer控制器也是FL Studio中一个特别有用的插件,主 ...

  10. 详细了解IDM的“计划任务”功能

    今天我们一起来看看IDM下载器的"计划任务"功能. IDM是什么就不多说了,只需要知道它是一个十分好用的资源下载器就行了,下载速度非常快,搭配一些浏览器扩展程序甚至能加速百度盘的下 ...