Two implementation codes for exporting excel with vue

Currently used

handleExport () {
       = `Contacts`
      let params = ()
       = 
      Interface request address(params).then(res =&gt; {
        const href = (new Blob([res]))
        const link = ('a')
         = 'none'
         = href
        ('download',  + '.xls')
        (link)
        ()
        (link) // Download and remove elements        (href) // Release the blob object      }).catch(err =&gt; {
        this.$(err)
      })
    },

Requirement description

There are two ways to implement export through vue:

(1) The backend returns an address, just splice it and open it to download it

(2) The backend returns the file stream. At this time, you need to set it in the request header and return value.

1. The address returned by the backend

// Page code&lt;el-button
       type="primary"
       size="mini"
       class="filter-item"
       icon="el-icon-download"
       style="margin: 12px 20px 0 0; float: right"
       @click="onExportClick"
       &gt;
       Export
&lt;/el-button&gt;
 onExportClick() {//Export method     exportDevices() //Export interface      .then(result =&gt; {
         const url = 
         (url)    // Open the web page through this to download and export      })
       .catch(err =&gt; (err))
}

2. The backend returns a file stream

(1) Set the request header

/**
 * Export according to department personnel (including event types)
 * @param {*} pType
 * @returns
 */
export function exportDetailOrder(pType) {
  return request({
      url: '/exportEventDetailByDepart',
      method: 'get',
      responseType: 'blob',  //The request header needs to be set here and the request type is set to the form of the blob file stream      params: {
          pType
      }
  })
}

(2) Set the return result, process returns my file stream

onExportClick() {  //Export method            exportDetailOrder()  //Exported interface                .then(result =&gt; {
                    (result)
                    const link = ('a')  //Create a tag                    const blob = new Blob([result], { type: 'application/-excel' }) //Set file flow                     = 'none'
                    // Set up connection                     = (blob)  //Convert file stream to blob address                     = 'Processing statistical report of personnel repair work orders'
                    (link)
                    // Simulate click event                    ()  //Set click event                })
                .catch(err =&gt; {
                    (err)
                })
        }

(3) Additional instructions

Sometimes, the above steps are still not exportable. After debugger, I found that the interface was called directly and did not leave. Then, so we need to make some judgments on the global response interception.

// Generally in the file below utilsexport function validResponse(res, errorMessage) {
    if (res instanceof Blob) {  //If the returned file stream, directly return res        return res
    } else if ( !== 200 &amp;&amp;  !== 201 &amp;&amp;  !== 204) {
        return (new Error( || 'An error occurred!  '))
    } else {
        return res
    }
}

Currently used:

handleExport() {
              let me = this
              let url = '/fcst/gpcprevention/exportGpcSummary'
              let filename = 
              let exportparams = {
                taskyear: (, 'yyyy'),
                reportid: ,
                  char1:.char1,
              }
              (me, url, filename, exportparams);
            }

method:

 = function (vm,url,filename,searchParams) {
    let params = (searchParams);
    vm.$axios(
        {
            method: 'post',
            url: url,
            data: params,
            responseType: 'blob'
        }
    ).then(function(res) {
        let href = (new Blob([res]));
        let link = ('a');
         = 'none';
         = href;
        ('download', filename + '.xls');
        (link);
        ();
        (link); // Download and remove elements        (href); // Release the blob object    });
};

Summarize

This is the end of this article about the two implementation methods of Vue exporting Excel. For more related content related to Vue exporting Excel, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!