Vue encapsulates the public function method of exporting Excel data

vue+element UI encapsulates a public function to export Excel data

Encapsulate the public methods in the common.js of the store's modules, as shown below:

insert image description here

The code is as follows:

const download = {
    actions: {
        downloadData({ commit, state }, data) {
            return new Promise((resolve, reject) => {
                data.event(data.formData).then(res => {
                    const blob = new Blob([res.data], {
                        type: 'application/vnd.ms-excel'
                    })
                    const objectUrl = URL.createObjectURL(blob)
                    const link = document.createElement('a') // Create a tag link.href = objectUrl
                    // Rename the file link.download = res.headers['content-disposition'].split(
                        '='
                    )[1]
                    link.click()
                    URL.revokeObjectURL(objectUrl)
                    resolve(res)
                }).catch((err) => {
                    reject(err)
                })
            })
        }

    }

}

export default download

Then export it to the public module in the store's index

insert image description here

Use in components that need to call methods

methods: {
       //Method for exporting data handleExport(formData) {
            this.loading = true
            const data = {
            // import { loanDownloadData } from '@/api/loan/userLoanList'
            // event: loanDownloadData, loanDownloadData is the keyword of the interface for exporting data //formData is the parameter required by the loanDownloadData interface event: '', 
                formData: formData
            }
            this.$store.dispatch('downloadData', data).then(res => {
                this.loading = false
            }).catch(() => {
                this.loading = false
            })
        },

}

PS: If the interface can return data normally, but an error occurs when calling the interface, it may be that the data returned by the interface interception file is incorrect. First find the utils->request.js file (usually placed in this location), as follows:

insert image description here

When the interface is intercepted, if the export interface needs to return all the data, such as response, because the headers rename file needs to be used in the common.js file, as follows

insert image description here

In general, interface interception only needs to return data, such as: const res = response.data, return res

insert image description here

This is the end of this article about Vue encapsulation of public functions for exporting Excel data. For more relevant Vue export Excel public function content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: