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 小时前
Java 基于 SpringBoot 的校园外卖点餐平台微信小程序(附源码,部署,文档)
java·spring boot·微信小程序·校园外卖点餐·外卖点餐小程序·校园外卖点餐小程序
Q_27437851092 小时前
springboot基于微信小程序的周边游小程序
spring boot·微信小程序·小程序
计算机学姐3 小时前
基于微信小程序的民宿预订管理系统
java·vue.js·spring boot·后端·mysql·微信小程序·小程序
寰宇软件5 小时前
PHP防伪溯源一体化管理系统小程序
小程序·uni-app·vue·php
trabecula_hj6 小时前
微信小程序中实现进入页面时数字跳动效果(自定义animate-numbers组件)
微信小程序·小程序
菜鸟码神6 小时前
微信小程序隐藏右侧胶囊按钮,分享和关闭即右侧三个点和小圆圈按钮
微信小程序·小程序
大叔_爱编程8 小时前
wx035基于springboot+vue+uniapp的校园二手交易小程序
vue.js·spring boot·小程序·uni-app·毕业设计·源码·课程设计
林涧泣9 小时前
【Uniapp-Vue3】previewImage图片预览
uni-app
灰天76814 小时前
健身房项目 Uniapp+若依Vue3版搭建!!
uni-app
寰宇软件21 小时前
PHP CRM售后系统小程序
微信小程序·小程序·vue·php·uniapp