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 ...
随机推荐
- python-redmine获取redmine平台的信息
前言 最近做redmine的bug平台的分析,统计一些需要用到的数据,这里把相关调用的地方记录下来以备后用 相关的获取接口 #! /usr/bin/python # -*- coding:UTF-8 ...
- Spring第二天，你必须知道容器注册组件的几种方式！学废它吊打面试官！
前一篇<不要再说不会Spring了!Spring第一天,学会进大厂!>文章可点击下方链接进行回看. 不要再说不会Spring了!Spring第一天,学会进大厂! 今天将继续讲解Spri ...
- 03、JDBC范例
范例:JDBC查询 package com.hsp; import java.sql.Connection; import java.sql.DriverManager; import java.sq ...
- IntelliJ IDEA 2020.2.3永久破解激活教程 - 2020.10.27
申明:本教程 IntelliJ IDEA 破解补丁.激活码均收集于网络,请勿商用,仅供个人学习使用,如有侵权,请联系作者删除 不花钱 的方式 IDEA 2020.2 激活到 2089 年 注意:教程适 ...
- 使用 Docker 部署 Spring Boot 项目，带劲！！
上一篇:年轻人的第一个 Docker 应用 Docker 一次构建.处处运行及快速启停的特性,在微服务架构中有着举足轻重的地位,具体的概念性的东西就不介绍了,不懂的点击这里阅读 Docker 基础教程 ...
- 二分查找 leetcode704
class Solution { public int search(int[] nums, int target) { int l=0; int r=nums.le ...
- 【电子取证：FTK Imager篇】DD、E01系统镜像仿真
星河滚烫,人生有理想! ---[suy999] DD.E01系统镜像动态仿真 (一)使用到的软件 1.FTK Imager (v4.5.0.3) 2.VMware Workstation 15 P ...
- 记XShell无法连接虚拟机中的Linux，但Linux系统中可以连接外网。
如题. 原本设置如下: 本地机IP 为192.168.43.XXX VMWare中"虚拟机网络编辑器"中子网设置为192.168.39.0. 虚拟机中IP为192.168.39.1 ...
- php进阶学习-单例设计模式
什么是单例模式(singleton)? 在整个应用程序的生命周期中,任何一个时刻,单例类的实例都只存在一个,同时这个类还必须提供一个访问该类的全局访问点. 单例模式的特点 一个类只有一个实例 私有克隆 ...
- Codeforces Round #631 (Div. 1) B. Dreamoon Likes Sequences 题解（思维+求贡献）
题目链接 题目大意 让你构造一个严格单调上升的数组a满足\(1<=a_1<a_2<....a_n<=d\) 而且要使得这个数组的异或前缀和也满足严格单调上升,求有多少个满足条件 ...