How vue encapsulates common functions that export Excel data
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.
