vue2手机端前端（mint-ui，分页查询 loadMore）页面直接导出到excel

<template>
    <!-- 订单看板 -->
    <div>
        <mt-navbar v-model="selected" style="border-bottom: solid 1px #EFEFEF;">
            <mt-tab-item id="1" @click.native="queryOrderBoardDetails(selected,'首次')">昨日受理量</mt-tab-item>
            <mt-tab-item id="2" @click.native="queryOrderBoardDetails(selected,'首次')">总受理量</mt-tab-item>
        </mt-navbar>

        <mt-tab-container v-model="selected">
            <mt-tab-container-item id="1">
                <div class="cust-item" v-for="(item,index) in list" :key="index">
                    <!-- 第一行 -->
                    <div class="item-phone">
                        订单号：{{item.orderNo}}
                        <div style="float: right" class="item-area">
                           {{item.createTimeStr}} 
                        </div>
                    </div>
                    <!-- 第二行 -->
                    <div class="item-phone">
                        商品名：{{item.offerName}}
                    </div>
                    <!-- 第三行 -->
                    <div class="item-area" style="margin-top: 5px">
                        {{item.khxm}}({{item.phone}})
                        <div style="float: right"  v-if="accountType == 1" class="item-area">
                           店员：{{item.clerkName}}
                        </div>
                    </div>
                    <!-- 第四行 -->
                    <div class="item-area"  v-if="accountType == 3">
                        店员：{{item.clerkName}}({{item.storeName}})
                    </div>
                </div>
            </mt-tab-container-item>

            <mt-tab-container-item id="2" v-infinite-scroll="loadMore"
                    infinite-scroll-disabled="loading"
                    :infinite-scroll-immediate-check="true"
                    infinite-scroll-distance="10">
                <div class="cust-item" v-for="(item,index) in list" :key="index">
                    <!-- 第一行 -->
                    <div class="item-phone">
                        订单号：{{item.orderNo}}
                        <div style="float: right" class="item-area">
                           {{item.createTimeStr}} 
                        </div>
                    </div>
                    <!-- 第二行 -->
                    <div class="item-phone">
                        商品名：{{item.offerName}}
                    </div>
                    <!-- 第三行 -->
                    <div class="item-area" style="margin-top: 5px">
                        {{item.khxm}}({{item.phone}})
                        <div style="float: right"  v-if="accountType == 1" class="item-area">
                           店员：{{item.clerkName}}
                        </div>
                    </div>
                    <!-- 第四行 -->
                    <div style="overflow: hidden;white-space: nowrap;text-overflow:ellipsis;" class="item-area" v-if="accountType == 3">
                        店员：{{item.clerkName}}({{item.storeName}})
                    </div>
                </div>
                <div class="loading" v-if="loading">
                    <span style="margin-left:40%" id="load-text">{{loadText}}</span>
                </div>
            </mt-tab-container-item>
        </mt-tab-container>
    </div>
        

</template>

<script>
    import Vue from "vue";
    import {Navbar, TabItem, Toast} from 'mint-ui';
    import { InfiniteScroll } from 'mint-ui';

    Vue.use(InfiniteScroll);
    Vue.component(Navbar.name, Navbar);
    Vue.component(TabItem.name, TabItem);

    export default {
        name: "customerBoard",
        mounted(){
            this.queryOrderBoardDetails(this.selected,'首次');
            this.accountType = sessionStorage.getItem("accountType");
        },
        methods: {
            queryOrderBoardDetails(selectType,way){
                console.log('selectType:',selectType)
                console.log('way:',way)
                let that = this;
                if(selectType == 1){
                    this.param.flag = 1
                }
                if(selectType == 2){
                    this.param.flag = 0
                }
                if(way != '无限加载'){
                    this.param.pageIndex = 1
                    this.list = [];
                }
                this.loadText = '正在加载...'
                this.$api.queryOrderBoardDetails(
                {
                    queryType: selectType,
                    flag:this.param.flag,
                    page:this.param.pageIndex,
                    size:this.param.pageSize
                },
                res=>{
                    console.log(res,'list');
                    if(res.retCode == this.$api.REQ_SUCCESS_GET){

                        if(selectType == 2){
                            let data = res.body.tfOrderInfo
                            if(!data){data = []}
                            // 上次list的长度
                            let len = this.list.length
                            // 拼接数据
                            this.list = this.list.concat(data)
                            if (data && data.length == 0 && !len) {
                                this.loadText = '没有找到相关数据'
                            } else if (data && data.length < 10) {
                                this.loadText = '暂无更多数据'
                            } else {
                                this.loading = false
                            }
                        }else{
                            this.list = [];
                            this.list = res.body.tfOrderInfo
                        }
                        
                        
                    }else{
                        Toast("查询订单看板详情数据失败");
                    }
                    this.loading = false
                });
            },
            loadMore () { 
                this.loading = true
                this.param.pageIndex += 1
                if(this.selected == 2){
                    this.queryOrderBoardDetails(this.selected,'无限加载')
                }
                
            }
        },
        data(){
            return {
                list:[],
                param: {
                    flag:0,
                    pageIndex: 1,
                    pageSize: 20
                },
                loadText:'正在加载...',
                loading: true, // 加载更多中
                accountType:'',
                selected: this.$route.query.type,
                way:'',
                
            }
        },
    }
</script>

<style scoped>
    .cust-item{
        width: 100%;
        border-bottom: solid 1px #EFEFEF;
        padding: 5px 10px;
    }
    .cust-item>.item-phone{
        font-size: 14px;
        color: #666;
    }
    .cust-item>.item-area{
        font-size: 12px;
        color: #999;
        margin-top: 2px;
    }
    .cust-item>.item-phone>.item-area{
        font-size: 12px;
        color: #999;
        margin-top: 2px;
    }
</style>

页面直接导出到excel

 https://blog.csdn.net/m0_46678928/article/details/123843863

<!-- 导入厅店有错误信息后的弹框 -->
        <el-dialog :title="errTitle" v-model="storeImportErrMsg" width="70%" @close="emptyStoreImportErrMsg">
            <el-button round type="danger" style="float:right;margin-buttom: 20px" @click="exportExcel()">请及时导出数据
            </el-button>
            <el-table :data="storeImportErrMsgList" height="565" stripe="true" id="staTable"
                      :cell-style="{padding: '2px 0'}" border class="table" ref="multipleTable" header-cell-class-name="table-header" @selection-change="selectChangesStore">
                <el-table-column prop="errMsg" label="错误信息"  align="left">
                    <template #default="scope">{{ scope.row.errMsg }}</template>
                </el-table-column>
            </el-table>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="emptyStoreImportErrMsg">关 闭</el-button>
                </span>
            </template>
        </el-dialog>

exportExcel:function(){
                let tables = document.querySelector("#staTable");
                let xlsxParam = {raw: true};
                var wb = this.$xlsx.utils.table_to_book(tables, xlsxParam);
                var wbout = this.$xlsx.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
                try {
                    const fileName = '厅店导入-错误信息';
                    this.$fileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), fileName + '.xlsx')
                } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
                return wbout

            },