众所周知，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. bluestore的osd自启动

    前言 自启动相关的文章很多,有分析的很详细的文章,这里就不做赘述,本篇讲述的是什么情况下用,怎么用的问题 使用场景 一台机器的系统盘坏了,需要重装系统,相关的一些信息没有了,但是上面的数据盘还是在的, ...

  2. CSS @property - 实验性

  3. day02-业务服务监控

    提供大量第三方工具,可以开发企业级服务监控平台,本章涉及文件与目录差异对比.HTTP质量监控.邮件告警等内容一.文件内容差异比对1.示例1 d = difflib.Differ() diff = d. ...

  4. 详解FL Studio压缩器——Fruity Limiter(下)

    Hello!小伙伴们又见面啦-接上一篇,本篇咱们继续讲解音乐编曲软件FL Studio20压缩器内容. 包络"ENVELOPE"中包含三个旋钮,它们都有什么作用呢?一起来揭晓吧! ...

  5. H5系列之contenteditable

    其实这个属性很简单,既然把它放到一个单独的文章来说,他肯定有一些注意点要讲 兼容性很好,兼容所有主流浏览器. 用法很简单,只需要给你需要的标签填上即可. <div contenteditable ...

  6. Ubuntu14.04下安装Composer

    下载Composer: curl -sS https://getcomposer.org/installer | php 安装Composer: /usr/bin/php composer.phar ...

  7. leetcode152. 乘积最大子序列

    给定一个整数数组 nums ,找出一个序列中乘积最大的连续子序列(该序列至少包含一个数).示例 1:输入: [2,3,-2,4]输出: 6解释: 子数组 [2,3] 有最大乘积 6.示例 2:输入: ...

  8. Python学习第四天----模块儿导入

    1.命名空间 模块儿的名字加上文件的名字,就是命名空间. python如何区分一个普通的文件夹和一个包的? 在一个文件夹下有一个特定的文件__init__.py,此时这个文件夹就是一个包.(前后各两个 ...

  9. Fist—— 团队展示

    作业要求 软件工程1班 团队名称 Fist 这个作业的目标 团队合作开发项目,加强团队合作,进一步了解相应岗位. 作业正文 https://www.cnblogs.com/team4/p/137730 ...

  10. Canal Admin

    一.Canal Admin 安装与配置 1.1 下载 wget https://github.com/alibaba/canal/releases/download/canal-1.1.4/canal ...