vued单页面组件中导出excel表格方法

示例一

在vue单页面组件中template中写法示例

            

                导出Excel
                
            

api.js中写法示例

const urlPrefix = "/depression-web/"

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)
    })
}

在script标签中写法示例

import {
   
    getResponsesExcel

} from "../../api"

export default {
        methods: {
            //导出到excel
            async downloadExcel() {
                let params = {}
                params.words = this.searchVal
                const p = this.serialize(params)
                console.log("p:",p)
                const data = await getResponsesExcel("netsalesOrder/exportNetsalesUser.json", p)
                console.log(data)
                let blob = new Blob([data], {
                        'type': 'application/msexcel'
                    }),
                    a = this.$els.a

                a.href = window.URL.createObjectURL(blob)
                a.download = `用户列表.xls`
                a.click()
            },
           
           

        },

示例二

在api.js中有另外一种写法

// 订单列表 下载文件
export let getRecordName = async(params) => { //
    let response = await fetch("/depression-web/ServiceOrder/getRecordName.json", {
        method: "POST",
        //mode: "cors",
        credentials: "include",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        },
        body: params
    }).catch((error) => {
        console.error(error)
    })

    console.log(response)

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