uniapp app 导出excel 表格

直接复制运行   

<template><view><button @click="tableToExcel">导出一个表来看</button><view>{{ successTip }}</view></view>
</template><script>export default {data() {return {successTip: ''}},methods: {uuid() {return 'xxx-xxx-xxx'.replace(/[xy]/g, c => {var r = Math.random() * 16 | 0,v = c == 'x' ? r : (r & 0x3 | 0x8)return v.toString(16)})},tableToExcel() {// 要导出的json数据const jsonData = [{name: '科比',phone: '123456',email: '科比@163.com'},{name: '科比',phone: '123456',email: '科比@163.com'},{name: '科比',phone: '123456',email: '科比@163.com'},{name: '科比',phone: '123456',email: '科比@163.com'},]// 列标题let worksheet = 'sht1'let str ='<tr><td style="text-align: center">姓名</td><td style="text-align: center">电话</td><td style="text-align: center">邮箱</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>`// 下载模板// #ifdef APP-PLUSthis.appExportFile(template)// #endif// 下载模板// #ifdef MP-WEIXINthis.wxExportFile(template)// #endif},// 导出文件到手机 fileData:要写入到文件的数据,返回参数为文档路径appExportFile(fileData, documentName = '项目Excel文件') {// PUBLIC_DOCUMENTS: 程序公用文档目录常量plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, fs => {let rootObj = fs.root,fullPath = rootObj.fullPathconsole.log('开始导出数据********')// 创建文件夹rootObj.getDirectory(documentName, {create: true}, dirEntry => {// 创建文件,防止重名let fileName = 'excel' + this.uuid() + '.xlsx'dirEntry.getFile(fileName, {create: true}, fileEntry => {fileEntry.createWriter(writer => {writer.onwritestart = res => console.log('正在导出')//  /storage/emulated/0指的就是系统路径let pathStr = fullPath.replace('/storage/emulated/0', '')// 成功导出数据writer.onwrite = res => {// 文件路径let filePath = res.target.fileNameuni.hideLoading()setTimeout(() => {console.log('成功导出')this.successTip = `文件位置:${filePath}`uni.openDocument({filePath,success: res => console.log('打开文档成功'),fail: err => console.log(err)})}, 500)}// 写入内容writer.write(fileData)}, err => console.log(err.message))})})})},wxExportFile(template, documentName = '项目Excel文件') {const fs = wx.getFileSystemManager()// 创建文件名字, 防止重名let filePath = wx.env.USER_DATA_PATH + '/' + (documentName + this.uuid()) + '.xls'fs.writeFile({filePath,data: template,encoding: 'utf8',success: res => {wx.openDocument({filePath,showMenu: true, //是否显示右上角菜单success: res => console.log('打开文档成功。文件位置', filePath),fail: err => console.log(err)})},fail: err => console.info(err)})}}}
</script>

  这里用到小程序和app段的api

wx.getFileSystemManager()
获取全局唯一的文件管理器

返回值
FileSystemManager
 

wx.openDocument 预览文件
wx.openDocument({filePath,showMenu:true, //是否右上角菜单,这样就可以转发给好友了success: res => console.log('打开文档成功。文件位置', filePath),fail: err => console.log(err)})

uniapp 微信小程序 /APP json数据导出excel文件_uniapp导出excel文件_初遇你时动了情的博客-CSDN博客 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/148574.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

openwrt使用教程

openwrt 插件安装 首先 我们需要明确自己什么版本的cpu 进入docker 然后 cat /proc/cpuinfo# 查看CPU信息 uname -m# 查看CPU架构 cat /proc/meminfo# 查看内存使用情况 df -h# 查看磁盘的使用率 uname -a# 查看内核信息 opkg print-architecture# 可接受的架构arm a5 比较奇…

mysql双主双从读写分离

架构图&#xff1a; 详细内容参考&#xff1a; 结果展示&#xff1a; 178.119.30.16&#xff08;从&#xff09;- master 178.119.30.17&#xff08;从&#xff09;- slave 由上述结果可以看出&#xff0c;产生了主备节点同时抢占VIP的问题&#xff08;即脑裂问题&#xff09…

建站软件WordPress和phpcmsv9体验

一、网站程序 什么是网站程序? 网站程序是由程序员编写的一个网站安装包,程序是网站内容的载体。 常见的网站程序有: dedecms , phpcms ,帝国cms ,米拓cms , WordPress , discuz , ECShop ,shopex , z-blog等,根据不同类型的网站我们来选择不同的网站程序。 比如说搭建一个…

微信支付费率降低到0.2%,商家收款开户手续费0.6%降低的操作方法

在如今的数字时代&#xff0c;移动支付已成为人们日常生活中必不可少的一部分。微信支付作为国内最受欢迎的移动支付平台&#xff0c;一直致力于为商家和个人提供最便捷、安全的支付方式。如果可以将微信支付将费率降低到仅为0.2%&#xff0c;这无疑给广大商家带来了巨大的利好…

C/C++跨平台构建工具CMake-----在C++源码中读取CMakeLists.txt配置文件中的内容

文章目录 1.需求描述2.需求准备2.1 创建项目2.2 编辑CMakeLists.txt文件2.3 编写C文件2.4 编译构建项目 3.需求实现3.1 在CMakeLists.txt中输出日志信息3.2 增加配置生成C头文件3.3在C 源码中访问配置的值3.4 C文件中读取CMakeLists.txt中的字符串 总结 1.需求描述 当我们开发…

国庆发生的那些事儿------编写了炫酷的HTML动态鼠标特效,超级炫酷酷酷!

文章目录 前言具体操作总结 前言 国庆假期的欢乐&#xff0c;当然少不了编码爱好者&#xff01;假期编写了炫酷的HTML动态鼠标特效&#xff0c;超级炫酷酷酷&#xff01;让你的页面变得更加炫酷&#xff0c;让你的小伙伴们羡慕的大神编码&#xff01;快来看看大神是如何编写的…

Llama2-Chinese项目:6-模型评测

测试问题筛选自AtomBulb[1]&#xff0c;共95个测试问题&#xff0c;包含&#xff1a;通用知识、语言理解、创作能力、逻辑推理、代码编程、工作技能、使用工具、人格特征八个大的类别。 1.测试中的Prompt   例如对于问题"列出5种可以改善睡眠质量的方法"&#xff…

【Java】微服务——Nacos注册中心

目录 1.Nacos快速入门1.1.服务注册到nacos1&#xff09;引入依赖2&#xff09;配置nacos地址3&#xff09;重启 2.服务分级存储模型2.1.给user-service配置集群2.2.同集群优先的负载均衡 3.权重配置4.环境隔离4.1.创建namespace4.2.给微服务配置namespace 5.Nacos与Eureka的区别…

【Spring】更简单的读取和存储对象

更简单的读取和存储对象 一. 存储 Bean 对象1. 前置工作&#xff1a;配置扫描路径2. 添加注解存储 Bean 对象Controller&#xff08;控制器存储&#xff09;Service&#xff08;服务存储&#xff09;Repository&#xff08;仓库存储&#xff09;Component&#xff08;组件存储&…

Java类型转换和类型提升

目录 一、类型转换 1.1 自动类型转换&#xff08;隐式&#xff09; 1.1.1 int 与 long 之间 1.1.2 float 与 double 之间 1.1.3 int 与 byte 之间 1.2 强制类型转换&#xff08;显示&#xff09; 1.2.1 int 与 long 之间 1.2.2 float 与 double 之间 1.2.3 int 与 d…

云安全之访问控制的常见攻击及防御

访问控制攻击概述 访问控制漏洞即应用程序允许攻击者执行或者访问某种攻击者不具备相应权限的功能或资源。 常见的访问控制可以分为垂直访问控制、水平访问控制及多阶段访问控制 (上下文相关访问控制)&#xff0c;与其相应的访问控制漏洞为也垂直越权漏洞(普通用户可以访问或…

《Attention Is All You Need》论文笔记

下面是对《Attention Is All You Need》这篇论文的浅读。 参考文献&#xff1a; 李沐论文带读 HarvardNLP 《哈工大基于预训练模型的方法》 下面是对这篇论文的初步概览&#xff1a; 对Seq2Seq模型、Transformer的概括&#xff1a; 下面是蒟蒻在阅读完这篇论文后做的一…

Modelsim测试覆盖率操作说明

1、打开Project窗口界面 2、在project界面下&#xff0c;选中所有需要测试覆盖率的.v文件&#xff08;不包括tb文件&#xff09;&#xff0c;鼠标点击右键&#xff0c;在Properties选项中选择Coverage选项&#xff0c;选择需要测试的覆盖率类型 3、重新编译所有的源文件&#x…

一看就懂系列:阿里云服务器ECS和轻量云服务器对比

阿里云服务器ECS和轻量应用服务器有什么区别&#xff1f;轻量和ECS优缺点对比&#xff0c;云服务器ECS是明星级云产品&#xff0c;适合企业专业级的使用场景&#xff0c;轻量应用服务器是在ECS的基础上推出的轻量级云服务器&#xff0c;适合个人开发者单机应用访问量不高的网站…

《机器人SLAM导航核心技术与实战》第1季:第6章_机器人底盘

视频讲解 【第1季】6.第6章_机器人底盘-视频讲解 【第1季】6.1.第6章_机器人底盘_底盘运动学模型-视频讲解 【第1季】6.2.第6章_机器人底盘_底盘性能指标-视频讲解 【第1季】6.3.第6章_机器人底盘_典型机器人底盘搭建-视频讲解 第1季&#xff1a;第6章_机器人底盘 先 导 课…

Endnote 20 修改参考文献(References)的期刊全称为缩写

一、准备&#xff08;下载&#xff09;所需要的期刊缩写列表 &#xff08;Term Lists&#xff09; 我已经下载并上传了一份Trem Lists 链接: 在不列颠哥伦比亚大学图书馆网站导出所有期刊名和缩写&#xff0c;大概1W的期刊名字&#xff0c;期刊名字和缩写截至2021.12.03 哥伦…

Adobe_InDesign_2023_18.4.0.056图文安装教程及下载

Adobe InDesign是Adobe公司的一个桌面出版 (DTP)应用程序&#xff0c;简称“Id”,主要用于各种印刷品的排版编辑。InDesign是一款功能强大的出版物创作、排版和打印软件&#xff0c;可以帮助出版物和广告创作者提高效率&#xff0c;节省时间&#xff0c;改善印刷质量。InDesign…

大模型部署手记(2)baichuan2+Windows GPU

1.简介 组织机构&#xff1a;百川智能&#xff08;前搜狗CEO王小川创立&#xff09; 代码仓&#xff1a;GitHub - baichuan-inc/Baichuan2: A series of large language models developed by Baichuan Intelligent Technology 模型&#xff1a;baichuan-inc/Baichuan2-7B-Ch…

JavaScript Web APIs第一天笔记

复习&#xff1a; splice() 方法用于添加或删除数组中的元素。 **注意&#xff1a;**这种方法会改变原始数组。 删除数组&#xff1a; splice(起始位置&#xff0c; 删除的个数) 比如&#xff1a;1 let arr [red, green, blue] arr.splice(1,1) // 删除green元素 consol…

MyBatisCodeHelper Pro3.x新版本插件自由

1效果图 我的版本为3.2.2 2.资源链接 码云地址点这里 3.使用说明 将我修改好后的MyBatisCodeHelper-Pro-obfuss.jar替换MybatisCodeHelperNew-3.x.x.zip&#xff08;原版本插件&#xff09;\MyBatisCodeHelper-Pro\lib中的MyBatisCodeHelper-Pro-obfuss.jar 4.实现与感谢…