UNiapp之微信小程序导出Excel

效果如下

参考小程序:日常记一记 ---账单页面

主要功能是根据筛选条件导出账单明细列表,实现该功能主要借助一个工具(excel.js),可在文章顶部下载或者一下网盘下载

https://pan.baidu.com/s/1RLisuG4_7FGD0Cnwewyabg?pwd=pd2a

提取码: pd2a

第一步,下载工具js到配置文件里面,并且在需要的页面引入

复制代码
import * as XLSX from '@/config/excel.js'

第二步,定义一个导出按钮,写一个导出方法即可

1,按钮

复制代码
<view class="jisuanqi" @click="exportExcel">
	 <image class="jsqimg" src="../../static/phb.png"></image>
</view>

2,按钮方法

复制代码
methods: {
				// 导出excel
				exportExcel() {
				    const fileName='账单明细'
				    const header = ['ctime', 'payname', 'remark','typename','type','money'];
				    const headerName = { ctime: '记账时间', payname: '支付类型', remark: '备注' ,typename:'消费类型',type:'支出2/收入1',money:'价格(元)'};
				    const ExcelData = this.excelList;//列表数据
					uni.showToast({
						title: "导出中,请稍后...",
						duration:3000,
						icon: 'none'
					}) 
				    XLSX.excel_exprot(ExcelData, header, headerName,fileName)
				},
}

3,列表集合

复制代码
data() {
          return {
                excelList:[]  //接口提供数据
                }
       }
相关推荐
文心快码BaiduComate8 小时前
用Comate Zulu开发一款微信小程序
前端·后端·微信小程序
CHB11 小时前
uni-ai:让你的App快速接入AI
uni-app·deepseek
小徐_23332 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮3 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw53 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !3 天前
uni-app中v-if使用”异常”
前端·uni-app
Emma歌小白3 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子3 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
2501_915918413 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张3 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview