How to fully simulate asynchronous download simulation a tag? (the timing of the pop-up frame is the same)

as mentioned above, I use the a tag to request download and asynchronous request to download, obviously pop up to save the window faster than the a tag, my side is the second pop-up window. The latter is to wait for the whole file to download and then pop-up window, because it is a response and then use blob to simulate a tag download. The two are tuned to the same api. Using vue, async request axios.

< hr >

normal a tag: 

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

Asynchronous: 

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);
    });
The

code is as above, and the request address is the same.
when I use fidder to grab the package, the normal a tag pop-up speed does not pop up in a second, probably because of the agent. The speed of both is basically the same.
has a great god studied it?

Javascript html5 html
Mar.20,2021

in the comments, the landlord said that what he wanted to ask was "is there no way to trigger the pop-up box before downloading asynchronously as it does?"

Let's start with the answer. Yes, but it's pretty dirty. It's a kind of hack.

StreamSaver.js

an example of

The

principle is to abuse the Service Worker, magic to change the response obtained by fetch to deceive the browser, and then send the readableStream directly to the (real) hard disk.

this estimate has something to do with your network.
because you need to receive some data before the save dialog box pops up.

use the build form form to download it. You can achieve a similar effect. The code is as follows: 

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()
}

Previous: How does Ceph subdivide permissions into subdirectories of each bucket?

Next: H5 embedded nail micro-application map api call was not successful

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu