众所周知,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文件就比较快。