uniapp app 导出excel 表格
直接复制运行
<template><view><button @click="tableToExcel">导出一个表来看</button><view>{{ successTip }}</view></view>
</template><script>export default {data() {return {successTip: ''}},methods: {uuid() {return 'xxx-xxx-xxx'.replace(/[xy]/g, c => {var r = Math.random() * 16 | 0,v = c == 'x' ? r : (r & 0x3 | 0x8)return v.toString(16)})},tableToExcel() {// 要导出的json数据const jsonData = [{name: '科比',phone: '123456',email: '科比@163.com'},{name: '科比',phone: '123456',email: '科比@163.com'},{name: '科比',phone: '123456',email: '科比@163.com'},{name: '科比',phone: '123456',email: '科比@163.com'},]// 列标题let worksheet = 'sht1'let str ='<tr><td style="text-align: center">姓名</td><td style="text-align: center">电话</td><td style="text-align: center">邮箱</td></tr>'// 循环遍历，每行加入tr标签，每个单元格加td标签for (let i = 0; i < jsonData.length; i++) {str += '<tr>'for (let item in jsonData[i]) {// 增加\t为了不让表格显示科学计数法或者其他格式str += `<td>${jsonData[i][item] + '\t'}</td>`}str += '</tr>'}// 下载的表格模板数据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>`// 下载模板// #ifdef APP-PLUSthis.appExportFile(template)// #endif// 下载模板// #ifdef MP-WEIXINthis.wxExportFile(template)// #endif},// 导出文件到手机 fileData:要写入到文件的数据，返回参数为文档路径appExportFile(fileData, documentName = '项目Excel文件') {// PUBLIC_DOCUMENTS: 程序公用文档目录常量plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, fs => {let rootObj = fs.root,fullPath = rootObj.fullPathconsole.log('开始导出数据********')// 创建文件夹rootObj.getDirectory(documentName, {create: true}, dirEntry => {// 创建文件,防止重名let fileName = 'excel' + this.uuid() + '.xlsx'dirEntry.getFile(fileName, {create: true}, fileEntry => {fileEntry.createWriter(writer => {writer.onwritestart = res => console.log('正在导出')// /storage/emulated/0指的就是系统路径let pathStr = fullPath.replace('/storage/emulated/0', '')// 成功导出数据writer.onwrite = res => {// 文件路径let filePath = res.target.fileNameuni.hideLoading()setTimeout(() => {console.log('成功导出')this.successTip = `文件位置：${filePath}`uni.openDocument({filePath,success: res => console.log('打开文档成功'),fail: err => console.log(err)})}, 500)}// 写入内容writer.write(fileData)}, err => console.log(err.message))})})})},wxExportFile(template, documentName = '项目Excel文件') {const fs = wx.getFileSystemManager()// 创建文件名字, 防止重名let filePath = wx.env.USER_DATA_PATH + '/' + (documentName + this.uuid()) + '.xls'fs.writeFile({filePath,data: template,encoding: 'utf8',success: res => {wx.openDocument({filePath,showMenu: true, //是否显示右上角菜单success: res => console.log('打开文档成功。文件位置', filePath),fail: err => console.log(err)})},fail: err => console.info(err)})}}}
</script>
这里用到小程序和app段的api
wx.getFileSystemManager（）
获取全局唯一的文件管理器返回值
FileSystemManager
wx.openDocument 预览文件
wx.openDocument({filePath,showMenu:true, //是否右上角菜单，这样就可以转发给好友了success: res => console.log('打开文档成功。文件位置', filePath),fail: err => console.log(err)})
uniapp 微信小程序 /APP json数据导出excel文件_uniapp导出excel文件_初遇你时动了情的博客-CSDN博客