uniapp导入导出Excel
众所周知，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的更多相关文章
- ASP.NET Core 导入导出Excel xlsx 文件
ASP.NET Core 使用EPPlus.Core导入导出Excel xlsx 文件,EPPlus.Core支持Excel 2007/2010 xlsx文件导入导出,可以运行在Windows, Li ...
- thinkphp导入导出excel表单数据
在PHP项目经常要导入导出Excel表单. 先去下载PHPExcel类库文件,放到相应位置. 我在thinkphp框架中的位置为ThinkPHP/Library/Org/Util/ 导入 在页面上传e ...
- 导入导出Excel工具类ExcelUtil
前言 前段时间做的分布式集成平台项目中,许多模块都用到了导入导出Excel的功能,于是决定封装一个ExcelUtil类,专门用来处理Excel的导入和导出 本项目的持久化层用的是JPA(底层用hibe ...
- php中导入导出excel的原理
在php中我们要经常导入导出excel文件,方便后台管理.那么php导入和导出excel的原理到底是什么呢?excel分为两大版本excel2007(后缀.xlsx).excel2003(后缀.xls ...
- NPOI导入导出EXCEL通用类，供参考，可直接使用在WinForm项目中
以下是NPOI导入导出EXCEL通用类,是在别人的代码上进行优化的,兼容xls与xlsx文件格式,供参考,可直接使用在WinForm项目中,由于XSSFWorkbook类型的Write方法限制,Wri ...
- .NET导入导出Excel
若是开发后台系统,ASP.NET MVC中总是涉及了很多导入导出Excel的问题,有的时候处理起来比较烦 如果能使用以下代码解决,就完美了 public class ReportModel { [Ex ...
- Java利用POI导入导出Excel中的数据
首先谈一下今天发生的一件开心的事,本着一颗android的心我被分配到了PB组,身在曹营心在汉啊!好吧,今天要记录和分享的是Java利用POI导入导出Excel中的数据.下面POI包的下载地 ...
- .Net MVC 导入导出Excel总结(三种导出Excel方法，一种导入Excel方法) 通过MVC控制器导出导入Excel文件(可用于java SSH架构)
.Net MVC 导入导出Excel总结(三种导出Excel方法,一种导入Excel方法) [原文地址] 通过MVC控制器导出导入Excel文件(可用于java SSH架构) public cl ...
- jxl导入/导出excel
1.jxl导入/导出excel案例,黏贴即可运行 package junit.test; import java.io.File; import java.io.IOException; import ...
随机推荐
- 在线调整ceph的参数
能够动态的进行系统参数的调整是一个很重要并且有用的属性 ceph的集群提供两种方式的调整,使用tell的方式和daemon设置的方式 一.tell方式设置 调整配置使用命令: 调整mon的参数 #ce ...
- 使用 ffmpeg 命令直播推流
CMD使用到的命令 D: -> 表示进入D盘cd /live -> 表示进入某个路径 执行条件 1.ffmpeg.exe 与视频放在同一目录下,纯英文目录2.执行以上命令进入到ffmpeg ...
- Java 用jxl读取excel并保存到数据库（此方法存在局限，仅限本地电脑操作，放在服务器上的项目，需要把文件上传到服务器，详细信息，见我的别的博客）
项目中涉及到读取excel中的数据,保存到数据库中,用jxl做起来比较简单. 基本的思路: 把excel放到固定盘里,然后前段页面选择文件,把文件的名字传到后台,再利用jxl进行数据读取,把读取到的数 ...
- kali 系列学习08-安卓逆向
可以轻松把安卓apk的源码逆向出来,逆向有什么用,比如手机apk木马,可以用于追踪黑客,详见 https://cloud.tencent.com/developer/news/179336 用2个工 ...
- LIKE 运算符
运算符用于执行程序代码运算,会针对一个以上操作数项目来进行运算.例如:2+3,其操作数是2和3,而运算符则是"+".在vb2005中运算符大致可以分为5种类型:算术运算符.连接运算 ...
- F - LCS 题解（最长公共子序列记录路径）
题目链接 题目大意 给你两个字符串,任意写出一个最长公共子序列 字符串长度小于3e3 题目思路 就是一个记录路径有一点要注意 找了好久的bug 不能直接\(dp[i][j]=dp[i-1][j-1]+ ...
- Java线程池一：线程基础
最近精读Netty源码,读到NioEventLoop部分的时候,发现对Java线程&线程池有些概念还有困惑, 所以深入总结一下 线程创建 Java线程创建主要有三种方式:继承Thread类.实 ...
- 03Python网络编程之单线程服务端
# 对于单线程的服务端,我们借助于zen_utils(我们自己编写好的一些函数)是很容易就实现的.# 导入这个模块import zen_utilsif __name__ == '__main__': ...
- CentOS 安装ElasticSearch-head插件
1 下载ElasticSearch-head安装包 1.1 Git下载ElasticSearch-head #安装git,若机器环境已存在,不需要再次安装 yum install git #下载 gi ...
- keil/MDK代码配色
个人配色方案,仅供参考.