uniapp APP端导出exel表格

water_Popcorn

已于 2023-04-17 17:53:53 修改

阅读量1.8k

点赞数 2

分类专栏： uniapp 文章标签： uni-app 前端

于 2023-04-13 16:18:23 首次发布

原文链接：https://www.bbsmax.com/A/Vx5MD3m9JN/

版权

uniapp 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<template>
    <view class="content">
        <view class="top_box">{{title}}</view>
 
        <view class="btn_cube" @click="tableToExcel">导出一个表来看</view>
 
        <view class="tip">tips：合并什么的可以直接用table标签相关的行内属性合并，如colspan、rowspan</view>
        <view class="tip">tips：创建目录时，一个大目录，下面再有一级年月的目录，方便到时候读取目录</view>
        <view class="tip">{{successTip}}</view>
 
    </view>
</template>
 
<script>
    import {formatNumber,formatDateThis,getUnixTime} from "@/common/util/dateUtil.js"
    var that;
    export default {
        components:{
 
        },
        data() {
            return {
                title:"app端导出excel",
                successTip:""
            }
        },
        onLoad() {
            that = this;
        },
        methods: {
            tableToExcel() {
                //要导出的json数据
                const jsonData = [{
                        name: '测试数据',
                        phone: '123456',
                        email: '123@456.com'
                    }
                ]
                //列标题
                let worksheet = "sheet1";
                let str = '<tr><td>姓名</td><td>电话</td><td>邮箱</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>`;
                //下载模板
                exportFile(template);
            }
 
        }
    }
 
    // 导出文件到手机 fileData:要写入到文件的数据，返回参数为文档路径
    function exportFile (fileData,documentName="项目Excel文件") {
        /*
        PRIVATE_DOC: 应用私有文档目录常量
        PUBLIC_DOCUMENTS: 程序公用文档目录常量
        */
        plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(fs) {
 
            let rootObj = fs.root;
            let fullPath = rootObj.fullPath;
            // let reader = rootObj.createReader();
            // console.log(reader);
            // reader.readEntries((res)=>{
            //     console.log(res); //这里拿到了该目录下所有直接文件和目录
            // },(err)=>{console.log(err);})
 
            console.log("开始导出数据********");
            // 创建文件夹
            rootObj.getDirectory(documentName, {
                create: true
            }, function(dirEntry) {
                //获取当前的年月继续创建文件夹
                let date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                dirEntry.getDirectory(`${year}年${month}月`,{
                    create:true
                },function(dirEntry2){
                    // 创建文件,防止重名
                    let fileName = "excel"+getUnixTime(formatDateThis(new Date()));
                    console.log(fileName);
                    dirEntry2.getFile(`${fileName}.xlsx`, {
                        create: true
                    }, function(fileEntry) {
                        fileEntry.createWriter(function(writer) {
                            writer.onwritestart = (e)=>{
                                uni.showLoading({
                                    title:"正在导出",
                                    mask:true
                                })
                            }
 
                            //  /storage/emulated/0指的就是系统路径
                            let pathStr = fullPath.replace("/storage/emulated/0","");
                            writer.onwrite = (e) => {
                                // 成功导出数据;
                                uni.hideLoading();
                                setTimeout(()=>{
                                    uni.showToast({
                                        title:"成功导出",
                                        icon:"success"
                                    })
                                    that.successTip = `文件位置：${pathStr}/${documentName}/${year}年${month}月`;
                                },500)
 
                            };
                            // 写入内容;
                            writer.write(fileData);
 
                        }, function(e) {
                            console.log(e.message);
                        });
                    });
                })
 
            });
 
        });
 
    }
 
</script>