Maison > Article > interface Web > Comment implémenter la fonction de téléchargement en javascript

Comment implémenter la fonction de téléchargement en javascript

藏色散人original: 2023-02-10 09:18:193692parcourir

Méthodes pour implémenter la fonction de téléchargement en JavaScript : 1. Téléchargez via la balise a ; 2. Téléchargez via la méthode "window.open" ; 3. Téléchargez via la méthode "location.href" ; 4. Téléchargez via le transfert de fichier ; Fonction de l’objet blob.

L'environnement d'exploitation de ce tutoriel : système Windows 10, javascript version 1.8.5, ordinateur Dell G3.

Comment implémenter la fonction de téléchargement en javascript ?

js implémente la fonction de téléchargement de fichiers

1. un téléchargement de balise

<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>

Avantages :

Vous pouvez télécharger directement des fichiers txt, png, pdf, exe, xlsx et d'autres types de fichiers

Inconvénients :

une balise ne peut recevoir que des requêtes, l'URL a donc une limite de longueur
Impossible d'obtenir la progression du téléchargement
Restrictions inter-domaines
Impossible de transporter un jeton dans l'en-tête pour l'opération d'authentification
Impossible de déterminer l'interface Est-ce réussi
Problème de compatibilité IE

2. window.open 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>

Avantages:

Simple et pratique

Inconvénient âges :

Il y aura des problèmes de limite de longueur d'URL
Il faut faire attention au problème d'encodage de l'URL
Impossible d'obtenir la progression du téléchargement
Impossible de transporter le jeton dans l'en-tête pour l'opération d'authentification
Impossible de déterminer si l'interface réussit
Impossible de télécharger directement les fichiers qui peuvent être prévisualisés directement par le navigateur Tapez (txt, png, pdf seront prévisualisés directement)

3. téléchargement location.href

<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>

Avantages

Simple, pratique et direct
Peut télécharger des fichiers volumineux (G ou supérieur)

Inconvénients

Il y aura un problème de limite de longueur d'URL
Vous devez faire attention à l'encodage de l'URL problème
Impossible d'obtenir la progression du téléchargement
Impossible de transporter le jeton dans l'en-tête pour l'opération d'authentification
Impossible de télécharger directement avec le navigateur Types de fichiers prévisualisés directement (txt, png et pdf seront prévisualisés directement)
Il est impossible de juger si l'interface revient avec succès

Trois. Téléchargement d'objet blob de transfert de fichiers

 <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>

Avantages :

Peut télécharger des fichiers txt, png, pdf et d'autres types de fichiers
Vous pouvez porter le jeton dans l'en-tête pour les opérations d'authentification
Vous pouvez obtenir la progression du téléchargement du fichier
Vous pouvez juger si l'interface revient avec succès

Inconvénients :

Problème de compatibilité, ce n'est pas le cas disponible sous IE10. Veuillez faire attention au navigateur Safari. Le site officiel indique que Safari a un problème sérieux avec les blobs de type application/octet-stream
Le flux de fichiers renvoyé par le backend ne sera obtenu qu'avant le téléchargement.

Apprentissage recommandé : "Tutoriel vidéo JavaScript"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript safari Token 接口 JS 对象 location href issue

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment convertir une date en nombre en javascriptArticle suivant：Comment convertir une date en nombre en javascript

Articles Liés

Voir plus