So implementieren Sie die Download-Funktion in Javascript-Front-End-Fragen und Antworten-php.cn

So implementieren Sie die Download-Funktion in Javascript

藏色散人

Freigeben： 2023-02-10 09:57:09

Original

3751 Leute haben es durchsucht

Methoden zum Implementieren der Download-Funktion in JavaScript: 1. Herunterladen über das Tag „window.open“; 3. Herunterladen über die Methode „location.href“; Blob-Objektfunktion.

So implementieren Sie die Download-Funktion in Javascript

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Javascript-Version 1.8.5, Dell G3-Computer.

Wie implementiert man die Download-Funktion in Javascript?

js implementiert die Datei-Download-Funktion

1. ein Tag-Download

<body>
<button onClick="download()">a标签下载</button>
<script>
function download(url = &#39;http:www.xxx.com/download?name=file.pdf&#39;, fileName = &#39;未知文件&#39;) {
      const a = document.createElement(&#39;a&#39;);
      a.style.display = &#39;none&#39;;
      a.setAttribute(&#39;target&#39;, &#39;_blank&#39;);
      /*
       * download的属性是HTML5新增的属性
       * href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。
       * 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式
       * 所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)
       */
      fileName && a.setAttribute(&#39;download&#39;, fileName);
      a.href = url;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
</script>
</body>

Nach dem Login kopieren

Vorteile:

Sie können TXT-, PNG-, PDF-, EXE-, XLSX- und andere Dateitypen direkt herunterladen.

Nachteil Tage:

...

Schnittstelle kann nicht ermittelt werden. Ist es erfolgreich? IE-Kompatibilitätsproblem. 2. Fenster öffnen. Download.

<body>
  <button onclick="download(&#39;http://www.xxx.com/download?name=file.pdf&#39;)">window.open下载</button>
  <script>
    function download(url) {
      window.open(url, &#39;_self&#39;);
      /**
       *  _blank：在新窗口显示目标网页
       *  _self：在当前窗口显示目标网页
       *  _top：框架网页中在上部窗口中显示目标网页
      /**
    }
  </script>
</body>

Nach dem Login kopieren

. Vorteile: Einfach und praktisch Vorteile:

Es wird Probleme mit der URL-Längenbegrenzung geben
Das URL-Codierungsproblem muss beachtet werden
Download-Fortschritt kann nicht abgerufen werden
Token kann nicht im Header für den Authentifizierungsvorgang übertragen werden
Kann nicht bestimmt werden ob die Schnittstelle erfolgreich ist

Dateien, die direkt vom Browser in der Vorschau angezeigt werden können, können nicht direkt heruntergeladen werden. Typ (TXT, PNG, PDF werden direkt in der Vorschau angezeigt)

3. location.href-Download

<body>
  <button onclick="download(&#39;http://www.xxx.com/download?name=file.pdf&#39;)">location.href下载
  </button>
  <script>
    function download(url) {
      window.location.href = url;
    }
  </script>
</body>

Nach dem Login kopieren

Vorteile

Einfach, bequem und direkt

Kann große Dateien herunterladen (G oder höher)
Nachteile
Es wird ein Problem mit der URL-Längenbegrenzung geben
Sie müssen auf die URL-Kodierung achten Problem: Download-Fortschritt kann nicht abgerufen werden
Es ist unmöglich zu beurteilen, ob die Schnittstelle erfolgreich zurückkehrt.
Drei. Dateiübertragungs-Blob-Objekt-Download.

 <button onclick="download()">文件流转blob对象下载</button>
 <script>
 download() {
 axios({
 url: &#39;http://www.xxx.com/download&#39;,
 method: &#39;get&#39;,
 responseType: &#39;blob&#39;,
 }).then(res => {
 const fileName = res.headers.content-disposition.split(&#39;;&#39;)[1].split(&#39;filename=&#39;)[1];
 const filestream = res.data;  // 返回的文件流
 // {type: &#39;application/vnd.ms-excel&#39;}指定对应文件类型为.XLS (.XLS的缩写就为application/vnd.ms-excel)
 const blob = new Blob([filestream], {type: &#39;application/vnd.ms-excel&#39;});
 const a = document.createElement(&#39;a&#39;);
 const href = window.URL.createObjectURL(blob); // 创建下载连接
    a.href = href;
    a.download = decodeURL(fileName );
    document.body.appendChild(a);
        a.click();
        document.body.removeChild(a); // 下载完移除元素
        window.URL.revokeObjectURL(href); // 释放掉blob对象
 })
 }
 </script>

Nach dem Login kopieren

Sie können den Datei-Download-Fortschritt abrufen

Sie können beurteilen, ob die Schnittstelle erfolgreich zurückkehrt
Nachteile:

Kompatibilitätsproblem, das ist nicht der Fall Verfügbar unter IE10. Bitte achten Sie auf den Safari-Browser. Auf der offiziellen Website heißt es, dass Safari ein ernstes Problem mit Blobs vom Typ application/octet-stream hat. Der vom Backend zurückgegebene Dateistream wird nur vor dem Herunterladen abgerufen

Empfohlenes Lernen: „
JavaScript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Download-Funktion in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!