uniapp (UI框架:uview2.x) JSON数据导出生成excel

一、生成下载的表格模板数据

代码如下:

// 建立一个工具类函数文件 utils.js
export function tableToExcel(jsonData, str) {
    //要导出的json数据
    let worksheet = 'sheet1'
    // let str = '<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>'
    //循环遍历,每行加入tr标签,每个单元格加td标签
    console.log('jsonData: ', jsonData);
    for (let i = 0; i < jsonData.length; i++) {
        str += '<tr>'
        for (let key in jsonData[i]) {
            console.log('key: ', key);
            console.log('jsonData[i][key]: ', jsonData[i][key]);
            //增加\t为了不让表格显示科学计数法或者其他格式
            str += `<td>${jsonData[i][key] + '\t'}</td>`
        }
        str += '</tr>'
        console.log('str: ', str);
    }
    //下载的表格模板数据
    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>`
    //下载模板
    return template
}

二、如何导出Excel

代码如下:

// 同上放在 utils.js
export function exportExcel(fileData, documentName = 'excel') {
    /*
    PRIVATE_DOC: 应用私有文档目录常量
    PUBLIC_DOCUMENTS: 程序公用文档目录常量
    */
    plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function (fs) {
        let rootObj = fs.root
        let fullPath = rootObj.fullPath
        console.log("开始导出数据********")
        // 创建文件夹
        rootObj.getDirectory(documentName, {
            create: true
        }, function (dirEntry) {
            // 创建文件,防止重名
            let fileName = new Date().getTime()
            console.log(fileName)
            dirEntry.getFile(`${fileName}.xlsx`, {
                create: true
            }, function (fileEntry) {
                fileEntry.createWriter(function (writer) {
                    writer.onwritestart = (e) => {
                        showLoading('正在导出')
                    }
                    writer.onwrite = (e) => {
                        // 成功导出数据
                        hideLoading()
                        setTimeout(() => {
                            showToast('导出成功')
                            const path = `file://${fullPath}${documentName}/${fileName}.xlsx`
                            console.log('文件位置:', path)
                            // 打开文件
                            uni.openDocument({
                                filePath: path,
                                success: res => {
                                    console.log('打开文档成功', res)
                                },
                                fail: e => {
                                    console.log('打开失败', e)
                                }
                            })
                        }, 500)
                    }
                    // 写入内容
                    writer.write(fileData)
                }, function (e) {
                    console.log(e.message)
                })
            })
        })
    })
}

function showToast(title = '') {
    uni.hideLoading()
    uni.showToast({
        title,
        icon: 'none',
        duration: 1500
    })
}
/**
 * loading
 * @param title
 */
function showLoading(title = '加载中') {
    uni.hideLoading()
    uni.showLoading({
        title,
        mask: true
    })
}
/**
 * hideLoading
 */
function hideLoading() {
    uni.hideLoading()
}

三、如何使用

// 先引入
import { tableToExcel, exportExcel } from '@/util/utils'

// 导出函数 
exportInfo() {
			let carInfoStr = ''
			if (this.carList.length) {
				this.carList.forEach((ele) => {
					carInfoStr += `车辆类型:${ele.selectField101},车牌号:${ele.comInputField102};`
				})
			}

			let jsonData = [
				{
					comInputField103:
						this.householderInfo.comInputField103 || '',
					selectField102_name:
						this.householderInfo.selectField102_name || '',
					comInputField104:
						this.householderInfo.comInputField104 || '',
					radioField113_name:
						this.householderInfo.radioField113_name || '',
					selectField114: this.householderInfo.selectField114 || '',
					carInfo: carInfoStr,
					comInputField109:
						this.householderInfo.comInputField109 || '',
					comInputField105:
						this.householderInfo.comInputField105 || '',
					selectField107_name:
						this.householderInfo.selectField107_name || '',
					comInputField108:
						this.householderInfo.comInputField108 || '',
				},
			]

           // 定义表头
			let str =
				'<tr><td>户主姓名</td><td>性别</td><td>身份证号</td><td>是否党员</td><td>群体</td><td>车辆信息</td></td><td>手机号</td><td>职业</td><td>学历</td><td>住址</td></tr>'
			// 生成template 模板
			let template = tableToExcel(jsonData, str)
			// 导出Excel
			exportExcel(template, '户主信息')
		},
相关推荐
神奇夜光杯3 小时前
Python酷库之旅-第三方库Pandas(202)
开发语言·人工智能·python·excel·pandas·标准库及第三方库·学习与成长
阿伟来咯~3 小时前
一些 uniapp相关bug
uni-app·bug
Mephisto.java4 小时前
【大数据学习 | kafka高级部分】kafka的优化参数整理
大数据·sql·oracle·kafka·json·database
小c君tt4 小时前
MFC中Excel的导入以及使用步骤
c++·excel·mfc
沐雪架构师5 小时前
mybatis连接PGSQL中对于json和jsonb的处理
json·mybatis
丁总学Java6 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
一名技术极客6 小时前
Vue2 doc、excel、pdf、ppt、txt、图片以及视频等在线预览
pdf·powerpoint·excel·文件在线预览
用余生去守护6 小时前
【反射率】-- Lab 转换(excel)
excel
进击的六角龙7 小时前
Python中处理Excel的基本概念(如工作簿、工作表等)
开发语言·python·excel
TracyDemo7 小时前
excel功能
excel