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 ...
随机推荐
- CephFS用户认证格式写错的问题
问题三: CephFS(James Gallagher) 问题原文 Hi, I'm looking to implement the CephFS on my Firefly release (v0. ...
- python分类
python是一种动态解释性的强类型语言. python下分几个类别,分别是cpython,jypython,ironpython,pypy等等,这些属于不同的解释器,但编写规范只有一个就是pytho ...
- RTP协议解析及H264/H265 音视频RTP打包分析
一 概述 实时传输协议(Real-time Transport Protocol或简写RTP)是一个网络传输协议,它是由IETF的多媒体传输工作小组1996年在RFC 1889中公布的. RTP协议详 ...
- a标签禁用
a标签禁用可以使用CSS3的特性来控制 <a class="disabled">我是a标签</a> a.disabled { pointer-events: ...
- Java（6）集合
一.Java集合框架概述 1.什么是集合 集合框架:用于存储数据的容器. 数组.集合等存储数据的结构,叫Java容器. 此时的存储,是指内存层面的存储,不涉及持久化的存储. 任何集合框架都包含三大块的 ...
- 「LOJ 3153」 「JOI Open 2019」三级跳
题面 LOJ 3153 solution 对于任意一对\(A,B\),若区间\([A,B]\)中存在一个数权值大于\(A\)或\(B\),则用这个数来替代\(A\)或\(B\)显然更优. 故只需要考虑 ...
- 对于final修饰的类型运算时的表现
我们知道,对于byte,char,这些数据类型加减时都会转化成int在运算,然而,对于final修饰过的数据是不会发生转换的. 比如说 byte b1=1; byte b2=2; byte b3=b1 ...
- yii2.0使用bootstrap中日期插件
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法. 使用composer安装 日期插件 php composer.phar require "2amigos ...
- 获取qq头像
1 <?php 2 header('content-type: image/jpeg'); 3 $QQ = $_GET['qq']; 4 $time2 = date('Y-m-d H:i:s') ...
- jenkins.war的配置
目录 1.进入root用户-------切换到home下的用户-----然后查看lsx下的文件 2.移动jenkins.war 3.找到刚才移动的文件 4.启动tomcat 5.在浏览器登录 6.进入 ...