鍍金池/ 問答/HTML5  HTML/ 怎么完全模擬異步下載模擬a標(biāo)簽？（彈框時機(jī)一樣）

怎么完全模擬異步下載模擬a標(biāo)簽？（彈框時機(jī)一樣）

如題，我用a標(biāo)簽請求下載和異步請求下載，明顯彈出保存窗口的速度a標(biāo)簽的快，我這邊是秒彈窗。而后者是等待整個文件下載完之后再彈窗，因為是響應(yīng)后再用blob模擬a標(biāo)簽下載。兩者調(diào)的是同一個api。用的是vue，異步請求axios。

普通a標(biāo)簽：

const a = document.createElement('a');
    a.href = `${Config.fileBaseURL}/download?url=${url}&fileName=${fileName}`;
    a.download = fileName;
    a.click();

異步：

api.get(`/download?url=${url}&fileName=${fileName}`)
    .then(res => {
      const blob = new Blob([res.data], { type: 'application/octet-stream' });
      const a = document.createElement('a');
      const url = window.URL.createObjectURL(blob);
      a.href = url;
      a.download = fileName;
      a.click();
      window.URL.revokeObjectURL(url);
    });

代碼如上，請求地址是一樣的。
我用fidder抓包的時候，普通的a標(biāo)簽彈窗速度又不是秒彈出了，可能是因為代理.兩者速度基本一樣.
有大神研究過嗎？

回答
編輯回答
菊外人

使用構(gòu)建form表單來下載吧,可以達(dá)到類似的效果,代碼如下:

function download(url, params = {}) {
  const token = {
    Authorazation: getToken()
  }
  const FORM = document.createElement('FORM')
  FORM.name = 'form'
  FORM.method = 'POST'
  FORM.action = url

  function appendParams(params) {
    for (const key in params) {
      const INPUT = document.createElement('INPUT')
      INPUT.type = 'HIDDEN'
      INPUT.name = key
      INPUT.value = params[key]
      FORM.appendChild(INPUT)
    }
  }
  params = Object.assign(token, params)
  appendParams(params)
  document.body.appendChild(FORM)
  FORM.submit()
}
2018年5月25日 23:09
編輯回答
話寡

在評論里，樓主說想問的其實是“異步下載沒有方法可以像它一樣下載完前觸發(fā)彈框嗎”。

先說答案，有，但是相當(dāng)臟，是一種hack。

StreamSaver.js

作者給的示例

原理是濫用Service Worker，魔改fetch拿到的響應(yīng)，欺騙瀏覽器，然后再把readableStream直接送入（真正的）硬盤。

2017年4月30日 00:14
編輯回答
尋仙

這個估計和你的網(wǎng)絡(luò)情況有關(guān)啊。
因為需要收到一些數(shù)據(jù)后才會彈出保存對話框的。

2017年2月23日 05:02