4000-520-616
欢迎来到免疫在线!(蚂蚁淘生物旗下平台)  请登录 |  免费注册 |  询价篮
主营:原厂直采,平行进口,授权代理(蚂蚁淘为您服务)
咨询热线电话
4000-520-616
当前位置: 首页 > 新闻动态 >
新闻详情
uniapp导入导出Excel - 走看看
来自 : t.zoukankan.com/nanyang520-p-1 发布时间:2021-03-24

众所周知,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  view {{title}} /view  view @click=\"tableToExcel\" 导出一个表来看 /view  view tips:合并什么的可以直接用table标签相关的行内属性合并,如colspan、rowspan /view  view tips:创建目录时,一个大目录,下面再有一级年月的目录,方便到时候读取目录 /view  view {{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]) { //增加 为了不让表格显示科学计数法或者其他格式 str += ` td ${ jsonData[i][item] + \' \'} /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);

本文链接: http://uniexcel.immuno-online.com/view-705002.html

发布于 : 2021-03-24 阅读(0)