JS下載文件兩種方式總結(jié)：

下載文件主要分為兩種形式，具體使用哪種方式取決于后臺(tái)；

1.如果后臺(tái)服務(wù)器的靜態(tài)目錄有可供下載的靜態(tài)資源，后臺(tái)接口返回文件路徑，直接window.location.href=url或者window.open(url)或者創(chuàng)建a標(biāo)簽并指定a.href=url模擬點(diǎn)擊進(jìn)行下載即可；

2.如果后臺(tái)服務(wù)器無(wú)可供下載的靜態(tài)資源，返回的是一個(gè)文件流(response-type: application/octet-stream;charset=UTF-8 )，則使用第二種方式(將文件寫(xiě)入內(nèi)存，并且創(chuàng)建a元素，a鏈接href屬性指向內(nèi)存中的文件，download屬性指向要下載的文件名，模擬a元素的點(diǎn)擊事件進(jìn)行下載然后移除a元素)。

本文主要說(shuō)明采用文件流的方式下載文件。

一、后臺(tái)服務(wù)器有靜態(tài)資源且是固定的文件名(GET方式下載文件)

window.location.href="http://www.域名/template.xlsx(請(qǐng)求返回的url地址)"

二、后臺(tái)返回文件流

方案1：采用FileReader讀取二進(jìn)制流，下載讀取后的結(jié)果

import axios from 'axios'

axios.post(this.$globalConf.atapPathPrefix + '/system/indicator/export', postParams, { responseType: 'blob' }).then(res => {

let blob = res.data;

let reader = new FileReader();

reader.readAsDataURL(blob);

reader.onload = function(e) {

let a = document.createElement('a');

let fileName = res.headers["content-disposition"] ? res.headers["content-disposition"].split(';')[1].split('=')[1] : new Date().getTime() + '.xlsx'

a.download = decodeURIComponent(fileName)//解碼

a.href = e.target.result;

document.body.appendChild(a);

a.click();

document.body.removeChild(a);

}

})

方案二：通過(guò)URL.createObjectURL讀取二進(jìn)制流并返回一個(gè)對(duì)象URL，原理同上

import axios from 'axios'

axios.post(this.$globalConf.atapPathPrefix + '/system/indicator/export', postParams, { responseType: 'blob' }).then(res => {

//這里res.data是返回的blob對(duì)象,即對(duì)應(yīng)的二進(jìn)制流

let blob = res.data

let downloadElement = document.createElement('a');

let href = window.URL.createObjectURL(blob); //創(chuàng)建下載的鏈接

let fileName = res.headers["content-disposition"] ? res.headers["content-disposition"].split(';')[1].split('=')[1] : new Date().getTime() + '.xlsx'

downloadElement.href = href;

downloadElement.download = decodeURIComponent(fileName)//解碼

document.body.appendChild(downloadElement);

downloadElement.click();

document.body.removeChild(downloadElement);

window.URL.revokeObjectURL(href); //釋放掉blob對(duì)象

})

可能出現(xiàn)的問(wèn)題：

無(wú)法獲取headers的content-disposition字段

本次請(qǐng)求獲取到fileName如下：

image.png

解決辦法

在服務(wù)端設(shè)置header

Access-Control-Expose-Headers: Content-Disposition

(3)Access-Control-Expose-Headers

該字段可選。CORS請(qǐng)求時(shí)，XMLHttpRequest對(duì)象的getResponseHeader()方法只能拿到6個(gè)基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必須在Access-Control-Expose-Headers里面指定。

總結(jié)

以上是生活随笔為你收集整理的前端将二进制数据流转为文件_前端通过二进制流下载文件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。