vue-In the form of file stream-blob--download-export file operation

In vue projects, files are often exported and downloaded, and sometimes they directly return to the server file url, so they can download directly with the a link, or download or preview different types of files. But if the file stream is returned, some other processing needs to be done, the specific form is as follows:

1. First, you need to determine the data type returned by the server.

Added in the request header: = 'blob'

Sometimes, not all interfaces require this type, so you can make a decision on the interface:

// request interceptor(
 config =&gt; { // Determine according to the interface  if (  === '/setting/exportData' ||
  ('export') &gt; -1 ||
  ('Export') &gt; -1) {
    = 'blob' // Service request type  }
  if (getToken()) {
   ['access_token'] = getToken()
  }
  return config
 },
 error =&gt; {
  // Do something with request error
  // (error) // for debug
  (error)
 }
)

2. The interface requests to obtain the file stream returned by the backend

// Export  onExport() {
   if ( === '') {
    this.$message({
     type: 'error',
     message: 'No data export yet'
    })
    return
   }
   const fd = new FormData()
   ('id', )
   var exportFileName = 'Export file name' //Set the exported file name and you can splice a random value   exportData(fd)
    .then(res =&gt; {
     // is the file stream returned by the backend     // Call downloadUrl to process files     downloadUrl(, exportFileName)
    })
    .catch(err =&gt; {
     this.$message({
      type: 'error',
      message: 
     })
    })
  },

3. File processing downloadUrl--This method can be written as a public method for invocation

// Use the iframe framework to download files--taking excel as an example, you can modify type and fileName to select file typeexport function downloadUrl(res, name) {
 const blob = new Blob([res], { type: 'application/-excel' }) // Construct a blob object to process data const fileName = name + '.xlsx' // Export file name const elink = ('a') // Create a tag  = fileName //A tag add attribute  = 'none'
  = (blob)
 (elink)
 () // Execute the download () // Release URL object (elink) // Release the tag}

4. There are compatibility issues in ie browser, make some adjustments to downloadUrl

// Download files using iframe framework - Compatibility considerationsexport function downloadUrl(res, name) {
 const blob = new Blob([res], { type: 'application/-excel' })
 // for IE
 if ( &amp;&amp; ) {
  const fileName = name + '.xlsx'
  (blob, fileName)
 } else {
  // for Non-IE (chrome, firefox etc.)
  const fileName = name + '.xlsx'
  const elink = ('a')
   = fileName
   = 'none'
   = (blob)
  (elink)
  ()
  ()
  (elink)
 }
}

Summarize:At this point, a way to export files in the form of a file stream has been implemented.

Supplementary knowledge:Use file streams to download in vue (new blob) without opening a new page to download

I won't say much nonsense, let's just read the code~

export function download (url, params, filename) {
 
 ('Exporting data')
 return (url, {
  params: params,
  responseType:'arraybuffer',
 }).then((r) =&gt; {
 
  const content = 
  const blob = new Blob([content],{type:'application/-excel'})
  if ('download' in ('a')) {
   const elink = ('a')
    = filename
    = 'none'
    = (blob)
   (elink)
   ()
   ()
   (elink)
   ('Export successfully')
 
  }
 
 }).catch((r) =&gt; {
  (r)
  ('Export failed')
 
 })
}

The above article vue-in the form of file stream-blob--download-export file operation is all the content I share with you. I hope you can give you a reference and I hope you can support me more.