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 ...
随机推荐
- Html+css 一个简单的网页模板
一个简单的网页模板,有导航.子菜单.banner部分 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&q ...
- git-关联远程git仓库详细步骤-2
1.打开git bash,在控制台中输入以下命令:ssh-keygen -t rsa -C "邮箱地址" 结果: fanxi@AT8350 MINGW64 ~$ ssh-keyge ...
- LeetCode 中等题解（2）
31 下一个排列 Question 实现获取下一个排列的函数,算法需要将给定数字序列重新排列成字典序中下一个更大的排列. 如果不存在下一个更大的排列,则将数字重新排列成最小的排列(即升序排列). 必须 ...
- 看看吧！月薪20K以上的程序员才能全部掌握RabbitMq知识，你掌握了多少
一.RabbitMq基础知识 0.概述 消息队列的作用就是接收消息生产者的消息,然后将消息发送到消费者 1.信道channel 我的理解是生产者/消费者和rabbitmq交互的一个通道,负责交换机.队 ...
- 面试大厂，90%会被问到的Java面试题（附答案）
面向对象的三个特征 封装,继承,多态 多态的好处,代码中如何实现多态,虚拟机中如何实现多态 允许不同类对象对同一消息作出相应,好处如下: 可替换性:多态对已存在的代码具有可替换性 可扩充性:增加新的子 ...
- Guitar Pro小课堂之弹唱和弦转换小技巧
吉他相对其他乐器的便携性,还有其便于弹唱的特点,受到了很多音乐萌新们的喜爱.对于刚刚接触吉他的萌新来说,学琴初期弹唱的时候经常会因为和弦卡顿的转换,和因为食指力度不够或技巧不对无法顺利演奏的大横按,导 ...
- 使用pdfFactory为PDF文件设定查看选项
一般情况下,大部分PDF文件都会按照默认的查看设置,以100%的尺寸显示第一页的内容.但在一些特殊情况下,PDF文件的创建者会设定其他的文件查看尺寸,或设定打开页为第N页,来达到引起阅读者关注的目的. ...
- spring中的事务传播机制
1.事务的实现思想 在spring中要想某个方法具有事务,只要在方法前加一个@Transactional注解.然后spring就会利用aop思想,在这个方法执行前开启事务, 在方法执行后选择提交事务或 ...
- 学习netty遇到的关于 LineBasedFrameDecoder 的问题
最近在看<Netty权威指南>这本书,关于TCP粘包/拆包,书中使用的是 LineBasedFrameDecoder 来解决的,但是我在实践的过程中出现了问题,上代码吧. 这个是 serv ...
- 简化的鸿蒙WiFi接口，仅需几行代码，简单易用！
使用鸿蒙原始WiFI API接口进行编程,整个过程稍显繁琐,为此我们对鸿蒙原始WiFi API接口做了一层封装,形成了一套更简单易用的接口. 简化后的API接口 STA模式 // 连接WiFi热点,并 ...