總結(jié)：下載文件的方式

• a 標(biāo)簽配置 download 屬性 (適用于下載一些靜態(tài)資源)
• window.location.href (適用于下載一些靜態(tài)資源)
• a 標(biāo)簽 + Blob 方式
• 使用 form 表單提交

1.a 標(biāo)簽配置 download 屬性

<a href="test.zip" rel="external nofollow"  download="test.zip">download</a>

 download 用來命名下載文件，以及防止 txt , jpg , pdf 等瀏覽器支持直接打開的文件不能下載（需要注意的是，href地址不能寫完整的域名，否則只能預(yù)覽也不能下載。另外，下載的地址域名和訪問網(wǎng)站的域名必須是同源，否則 download 設(shè)置無效）。

2.window.location.href/window.open()

window.location.href = '你的 url';
// 或 
window.open('你的 url');

這種方式比較常見，比如我們在一些網(wǎng)站上下載電子書，安裝包之類的，一般都是這種方式或 a 標(biāo)簽方式下載的。

3.<a> 標(biāo)簽 + Blob方式

1.下載 api

export function downloadApi() {
  return request({
    url: '/testApi',
    method: 'get',
    responseType: 'blob'
  })
}

注：這里的 request 是用 axios 封裝的一個方法，詳情可見：vue開發(fā)中 axios 的封裝 

2.項目下載操作代碼 

    // vue 代碼
    downClick () {
      downloadApi().then(resBlob => {
        this._download(resBlob)
      })
    },
    _downloads (resBlob) {
      const projectName = '項目.zip'
      // IE|Edge
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveBlob(resBlob, projectName)
      } else {
        // 其他瀏覽器
        const blobUrl = window.URL.createObjectURL(resBlob)
        const a = document.createElement('a')
        a.style.display = 'none'
        a.download = projectName
        a.href = blobUrl
        document.body.appendChild(a) // 兼容火狐
        a.click()
        document.body.removeChild(a)
        window.URL.revokeObjectURL(blobUrl)
      }
    },

這里我們使用了 a 標(biāo)簽加 blob 的方式，這種方式適用于下載響應(yīng)比較耗時的情況。它會提前將文件下載完成后，再由前端進行下載。比如，后端在下載前需要進行一系列耗時操作來生成下載文件，這會讓用戶誤以為沒有正確點擊下載而重復(fù)點擊下載按鈕。通過這種方式我們可以做一些loading 之類的處理。

當(dāng)然，如果不需要 loading 之類的處理，可以直接通過 a 標(biāo)簽點擊下載，而無需 blob 方式。

注意：

上面這個 blob 方式在我們下載失敗時仍然會下載文件，當(dāng)我們要處理后端拋出的錯誤信息時，就行不通了。解決方法兩種：

3.1. 使用 Response（IE不支持）

    downClick () {
      downloadApi().then(async resBlob => {
        let resObj = {}
        if (resBlob.size == 0) {
          // 沒有數(shù)據(jù)可導(dǎo)出
        } else if (resBlob.type == 'application/json') {
          // 返回(錯誤)信息
          resObj = await (new Response(resBlob)).text()
          // 得到錯誤信息
          resObj = JSON.parse(resObj)
        }
        // ... 相關(guān)判斷處理
        this._download(resBlob)
      })
    },

3.2. 使用 FileReader

    downClick () {
      downloadApi().then(resBlob => {
        let resObj = {}
        if (resBlob.size == 0) {
          // 沒有數(shù)據(jù)可導(dǎo)出
        } else if (resBlob.type == 'application/json') {
          // 返回(錯誤)信息
          const reader = new FileReader()
          reader.addEventListener('loadend', () => {
            // reader.result 包含被轉(zhuǎn)化為一個字符串內(nèi)容的 blob
            resObj = JSON.parse(reader.result)
            if (/* 是錯誤信息 */) {
              // 相關(guān)判斷處理
            }
          })
          reader.readAsText(resBlob)
        } else {
          this._download(resBlob)
        }
      })
    },

4.使用 form 表單提交

  /**
   * 使用 form-data -post 方式導(dǎo)出文件
   * @param url 導(dǎo)出地址
   * @param params 參數(shù)
   */
  const postFormDataFile = (url, params) => {
    const form = document.createElement('form')
    form.style.display = 'none'
    form.action = BASE_URL + url
    form.method = 'post'
    document.body.appendChild(form)
    // 動態(tài)創(chuàng)建 input 并給 value 賦值
    for (const key in params) {
      const input = document.createElement('input')
      input.type = 'hidden'
      input.name = key
      input.value = params[key]
      form.appendChild(input)
    }
    form.submit()
    form.remove()
  }

注意：傳給后端的參數(shù)不是 json 對象的形式，而是 currentPage=2&pageSize=20 形式。

5.實現(xiàn)下載進度條

原理：設(shè)置 onDownloadProgress 事件

export function downloadProject(projectId) {
  return request({
    url: downloadProjectUrl + projectId,
    method: 'get',
    responseType: 'blob',
    onDownloadProgress: function (event) {
      // 注意: 后端需要設(shè)置響應(yīng)頭 Content-Length, 否則 event.lengthComputable 就會為 false, event.total 為 0
      // event.loaded 得到當(dāng)前已加載的數(shù)據(jù)大小, event.total 拿到總的數(shù)據(jù)大小, 通過兩者的比值就知道其進度。
      console.log('event', event)
    }
  })
}

event 參數(shù)內(nèi)容如下：

知識參考【MDN】：

Blob

URL.createObjectURL()

FileReader

Response

WEB前端是干什么的？

在了解Web前端之前，我們要先了解一下什么是“WEB”。

WEB（World Wide Web）即全球廣域網(wǎng)，也稱為萬維網(wǎng)，它是一種基于超文本和HTTP的、全球性的、動態(tài)交互的、跨平臺的分布式圖形信息系統(tǒng)。

其實，WEB就是全球互聯(lián)網(wǎng)系統(tǒng)的統(tǒng)稱，再簡單點講，WEB就是互聯(lián)網(wǎng)。

Web前端是什么？

Web前端即給用戶展示的網(wǎng)頁頁面，也就是網(wǎng)站的前臺部分，這里面可能包含了設(shè)計、特效、用戶交互等。

Web前端開發(fā)就是創(chuàng)建Web頁面，或者APP等前端界面呈現(xiàn)給用戶的過程，通過HTML、CSS及JavaScript等衍生出來的各種技術(shù)、框架、解決方案，來實現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶界面交互。

那么，什么是HTML、CSS、JavaScript？

可以這么理解

1、HTML

HTML稱為超文本標(biāo)記語言，是一種標(biāo)識性的語言，制作網(wǎng)頁永遠(yuǎn)離不開HTML。

HTML5是Web中核心語言HTML的規(guī)范。

因此，無論是PC端還是APP端的應(yīng)用，前端樣式都離不開HTML5。

2、CSS

CSS就是層疊樣式表，它主要是對HTML標(biāo)記的內(nèi)容進行更加豐富的裝飾，并將網(wǎng)頁表現(xiàn)樣式與網(wǎng)頁結(jié)構(gòu)分離的一種樣式設(shè)計語言。

CSS可以控制HTML頁面中的文本內(nèi)容、圖片外形以及版面布局等外觀的顯示樣式。是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言。

通俗點講，CSS就是給網(wǎng)頁“化妝”的一種技術(shù)。

3、JavaScript

是一種屬于網(wǎng)絡(luò)的腳本語言，已經(jīng)被廣泛用于Web應(yīng)用開發(fā)，常用來為網(wǎng)頁添加各式各樣的動態(tài)功能，為用戶提供更流暢美觀的瀏覽效果。

它是一種具有函數(shù)優(yōu)先的輕量級，解釋型或即時編譯型的高級編程語言。是一種基于原型、函數(shù)先行的語言，同時是一門多范式的語言，它支持面向?qū)ο缶幊?，命令式編程，以及函?shù)式編程。

JavaScript的作用主要用來向HTML頁面添加交互行為，可以這么理解，如果沒有JavaScript技術(shù)的支持，那么網(wǎng)頁會變成一種“只能看不能用”的觀賞性頁面。

Web前端開發(fā)技術(shù)在各類編程語言中，屬于相對入門簡單、易上手的編程技術(shù)，深受轉(zhuǎn)行人員、初學(xué)者的青睞。

Web前端技術(shù)可以做什么呢？

1、網(wǎng)站制作

這是掌握Web技術(shù)從業(yè)者最多的一個領(lǐng)域，網(wǎng)站制作就是網(wǎng)站通過頁面結(jié)構(gòu)定位、合理布局、圖片文字處理、程序設(shè)計、數(shù)據(jù)庫設(shè)計等一系列工作的總和，也是將網(wǎng)站設(shè)計師制定的總體規(guī)劃用HTML的方式展示出來。

2、小程序開發(fā)

隨著微信用戶的不斷增加，微信在近幾年推出的小程序深受用戶喜愛，應(yīng)用數(shù)量超過了一百萬，覆蓋200多個細(xì)分的行業(yè)，日活用戶達到兩個億，各大企業(yè)都紛紛參入其中，也是Web前端開發(fā)人員一個不錯的選擇。

3、APP開發(fā)

App開發(fā)，是指專注于手機應(yīng)用軟件開發(fā)與服務(wù)。通常專指手機上的應(yīng)用軟件，或稱手機客戶端。因此，專攻APP開發(fā)，同樣是Web培訓(xùn)后的就業(yè)方向，并且發(fā)展態(tài)勢不斷上升，未來前景廣闊。

隨著互聯(lián)網(wǎng)發(fā)展越來越多元，Web前端工程師的就業(yè)路徑也更加寬廣?，F(xiàn)在越來越多的IT企業(yè)，對用戶體驗更加注重，Web前端開發(fā)人員的行業(yè)需求量也一直不少。 

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。