效果如下
参考小程序:日常记一记 ---账单页面
主要功能是根据筛选条件导出账单明细列表,实现该功能主要借助一个工具(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:[] //接口提供数据
}
}