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:[]  //接口提供数据
                }
       }
相关推荐
七七小报1 小时前
uniapp-商城-40-shop 购物车 选好了 进行订单确认4 配送方式3 地址编辑
uni-app
2401_890665862 小时前
免费送源码:Java+ssm+HTML 三分糖——甜品店网站设计与实现 计算机毕业设计原创定制
java·python·微信小程序·html·php·课程设计·android-studio
Maitians2 小时前
微信小程序 - 根据经纬度打开导航
微信小程序·小程序
前端太佬3 小时前
微信小程序支付全流程实战指南(Node.js后端篇)
前端·javascript·微信小程序
xuanjiong4 小时前
微信小程序,基于uni-app的轮播图制作,调用文件中图片
微信小程序·小程序·uni-app
flying robot5 小时前
uniapp: 低功耗蓝牙(BLE)的使用
uni-app
程序猿John5 小时前
uniapp跳转和获取参数方式
前端·javascript·uni-app
gurenchang12 小时前
实现从一个微信小程序跳转到另一个微信小程序
微信小程序·小程序
编程毕设15 小时前
【含文档+PPT+源码】基于微信小程序的校园快递平台
微信小程序·小程序
mon_star°18 小时前
搭建基于火灾风险预测与防范的消防安全科普小程序
安全·微信小程序·小程序·微信公众平台