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 ...
随机推荐
- C#设计模式-原型模式（Prototype Pattern）
引言 在软件开发过程中,我们习惯使用new来创建对象.但是当我们创建一个实例的过程很昂贵或者很复杂,并且需要创建多个这样的类的实例时.如果仍然用new操作符去创建这样的类的实例,会导致内存中多分配一个 ...
- Windows查找JDK的路径
第一步:确定是否安装JDK 在控制台输入: java -version 此时说明你电脑安装了JDK. 第二步:查找路径 然后在控制台输入: java -verbose 输出结果: 最后两行就是相应的j ...
- webug第五关:一个优点小小的特殊的注入
第五关:一个优点小小的特殊的注入 既然是头部注入,首先想到xff注入 出现数据库报错,而且他是直接将xff后的内容带入数据库查询
- sql字段长度等于
select count(*) from boc_loan_apply where length(birthday)=7;
- 计算机&编程语言发展史
计算机&编程语言发展史 编辑于2020-11-18 计算机的基本组成 计算机的发展经历了哪几代? 第一代 电子管计算机 第二代 晶体管计算机 第三代 集成电路计算机 第四代 大规模和超大规模集 ...
- 厉害啊！第一次见到把Shiro运行流程写的这么清楚的，建议收藏起来慢慢看
前言 shiro是apache的一个开源框架,是一个权限管理的框架,实现 用户认证.用户授权. spring中有spring security (原名Acegi),是一个权限框架,它和spring依赖 ...
- 新鲜出炉！面试90%会被问到的Java多线程面试题，史上最全系列！
前言 最近很多粉丝朋友私聊我说能不能给整理出一份多线程面试题出来,说自己在最近的面试中老是被问到这一块的问题被问的很烦躁,前一段时间比较忙没时间回私信,前两天看到私信我也是赶紧花了两天给大家整理出这一 ...
- ABBYY FineReader 15 新增编辑表格单元格功能
ABBYY FineReader 15(Windows系统)新增编辑表格单元格功能,在PDF文档存在表格的前提下,可将表中的每个单元格作为单独的文字块进行单独编辑,单元格内的编辑不会影响同一行中其他单 ...
- python中操作excel数据
python操作excel,python有提供库 本文介绍openpyxl,他只支持新型的excell( xlsx)格式,读取速度还可以 1.安装 pip install openpyxl 2.使用 ...
- 对于MySQL数据库四种隔离等级
对于MySQL事务有四种隔离级别,分别是以下四种: 1.读未提交 2.读提交 3.可重复读 4.串行化(加锁) 对于隔离我们都是说在并发的情况下发生的事情,读取的数据在并发的情况下会发生什么情况. 并 ...