Shulou(Shulou.com)06/03 Report--

This article will explain in detail how vue encapsulates public functions for exporting Excel data. Xiaobian thinks it is quite practical, so share it with you for reference. I hope you can gain something after reading this article.

vue+element UI encapsulates a common function that exports Excel data

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

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 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 to public module in index of store

Use in components that need to invoke methods

methods：{ //How to export data handleExport(formData) { this.loading = true const data = { // import { loanDownloadData } from '@/api/loan/userLoanList' // event: loanDownloadData, loanDownloadData is the keyword of the interface to export data //formData is a 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 the interface is called, 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 position), as follows:

When the interface intercepts, if the interface is exported, all the data needs to be returned, such as: response, because the headers file needs to be renamed in the common.js file, as follows

Interface interception generally only needs to return data, for example: const res = response.data, return res

About "vue how to package the export of Excel data public function" This article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it to let more people see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.