Vue encapsulates the public function method of exporting Excel data

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

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:
  • How to export the excel file returned by the backend in Vue front end
  • Vue requests the backend interface to export excel tables
  • How to use js-xlsx to export excel in vue
  • Detailed implementation plan of Vue front-end exporting Excel files
  • Detailed explanation of Excel parsing and exporting based on Vue
  • Pitfalls and solutions when exporting excel using vue

<<:  Manjaro installation CUDA implementation tutorial analysis

>>:  How to choose the format when using binlog in MySQL

Recommend

Research on the Input Button Function of Type File

<br />When uploading on some websites, a [Se...

What are the differences between var let const in JavaScript

Table of contents 1. Repeated declaration 1.1 var...

Practical record of MySQL 5.6 master-slave error reporting

1. Problem symptoms Version: MySQL 5.6, using the...

Tutorial on how to use profile in MySQL

What is a profile? We can use it when we want to ...

Why do select @@session.tx_read_only appear in DB in large quantities?

Find the problem When retrieving the top SQL stat...

How to create an index on a join table in MySQL

This article introduces how to create an index on...

Summary of MySQL 8.0 Online DDL Quick Column Addition

Table of contents Problem Description Historical ...

Summary of several error logs about MySQL MHA setup and switching

1: masterha_check_repl replica set error replicat...

Briefly talk about mysql left join inner join

Preface I have been busy developing a cold chain ...

Native JS realizes the special effect of spreading love by mouse sliding

This article shares with you a js special effect ...

CSS to achieve horizontal lines on both sides of the middle text

1. The vertical-align property achieves the follo...

Detailed explanation of Vue's SSR server-side rendering example

Why use Server-Side Rendering (SSR) Better SEO, s...