导出excel功能示例+传参序列化示例

api.js

export async function getResponsesExcel(url, params) {
    const response = await fetch(urlPrefix + url, {
        method: "POST",
        credentials: "include",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        },
        body: params
    }).catch((error) => {
        console.log(error)
    })

    return await response.blob().catch((error) => {
        console.error(error)
    })
}


export const serialize = (obj) => {
    // let str = ""

    // for (let key in obj) {
    //  str += `${key}=${encodeURIComponent(obj[key])}&`
    // }

    // str = str.slice(0, -1)

    // return str

    return Object.keys(obj).map((item) => `${encodeURIComponent(item)}=${encodeURIComponent(obj[item])}`).join("&")
}

.vue文件中

<template>
    <div>
        <span @click="downloadExcel" class="btn btn-success" style="margin: -10px 0 0 4px;" v-if="!isExportingExcel">导出Excel</span>
                    <span class="btn btn-success" style="margin: -10px 0 0 4px;cursor: wait;" v-else>导出中....</span>

                    <a href="javascript:;" v-el:a></a>
    </div>
    
    
</template>

<script>
    import {
       
        getResponsesExcel

    } from '../../api'
    
    export default {
        data() {
            return {
                
            }
        },
        
        methods: {
        
            serialize(obj) {

                let str = ""
                for (let key in obj) {
                    str += `${key}=${obj[key]}&`
                }
                str = str.slice(0, -1)
                return str

            },
        
            paramsFn() {
                let params = {}

                params.pageIndex = this.page
                params.pageSize = this.maxLink
                this.start && (params.begin = this.start);
                this.end && (params.end = this.end);
                params.regTimeDirection = this.regTimeDirection
                this.words.trim() && (params.words = this.words.trim())

                this.hasMobile && (params.hasMobile = this.hasMobile);
                this.infoChannel && (params.infoChannel = this.infoChannel);
                this.channel2 && (params.memberChannalName = this.channel2);
                (this.channel1 === 0 || this.channel1) && (params.channalType = this.channel1);
                (this.isEnable || this.isEnable ===0) && (params.isEnable = this.isEnable);

                return params


            },
            
            
            async downloadExcel() {
                let paramsObj = this.paramsFn()

                if (this.selectPersonList.length) {
                    paramsObj.ids = JSON.stringify(this.selectPersonList)
                }

                this.isExportingExcel = true
                let p = this.serialize(paramsObj),
                    data = await getResponsesExcel("接口地址", p)
                console.log("test:",data)
                let blob = new Blob([data], {
                        'type': 'application/msexcel'
                    }),
                    a = this.$els.a

                a.href = window.URL.createObjectURL(blob)



                a.download = `下载的excel列表.xls`
                a.click()

                this.isExportingExcel = false

                this.selectPersonList = []

                //修改
                this.list.forEach((item) => {   //checkBox
                    Vue.set(item, "checkState", false);
                })

            },
        }
    }
<script>