Différentes manières pour le frontal de télécharger des fichiers

Il existe encore de nombreux scénarios d'application pour les téléchargements de fichiers impliqués dans le frontal, alors combien de façons existe-t-il pour les téléchargements de fichiers frontaux ? Quels sont les avantages et les inconvénients de chaque méthode ? Présentons-les un par un.

1. une étiquette

C'est le moyen le plus simple de réaliser le téléchargement de fichiers via l'attribut ade l'étiquette , et c'est aussi un moyen courant que nous utilisons. Regardons d'abord l'exemple de code :download

<a href="http://www.baidu.com" download="baidu.html">下载</a>

Pour l'exemple ci-dessus, nous avons cliqué sur Télécharger et avons constaté qu'il sautait sur la page d'accueil de Baidu et n'avait pas réellement téléchargé le fichier.

Étant donné que ale téléchargement de balises ne peut télécharger que des fichiers de la même origine, s'il s'agit d'un fichier interdomaine, il inclut des fichiers multimédias tels que des images, de l'audio et de la vidéo, qui sont tous des aperçus et ne peuvent pas être téléchargés.

Le code ci-dessus consiste aà réaliser le téléchargement du fichier directement en écrivant l'étiquette, on peut aussi jsle réaliser en écrivant, le code est le suivant :

const a = document.createElement('a')
a.href = 'http://www.baidu.com'
a.download = 'baidu.html'
a.click()

L'effet est le même que ci-dessus, tous sautent sur la page d'accueil de Baidu sans télécharger de fichiers.

Le point clé ici est l'attribut adu label , qui vient d'être ajouté.downloadHTML5

Content-DispositionSa fonction est de spécifier le nom du fichier téléchargé. S'il n'est pas spécifié, le nom du fichier téléchargé sera déterminé en fonction du contenu de la requête . Sinon Content-Disposition, URLla dernière partie de la requête sera utilisée comme nom de fichier.

2. fenêtre.ouverte

aLe cas ci-dessus d'utilisation de balises peut également window.openêtre réalisé en utilisant le même effet, le code est le suivant :

window.open('http://www.baidu.com', '_blank')

Voici _blankla méthode d'ouverture spécifiée, si elle n'est pas spécifiée, elle sera ouverte sur la page en cours, si spécifiée ici _blank, elle sera ouverte sur une nouvelle page.

Les attributs d' une même abalise downloadpeuvent également être utilisés, le code est le suivant :

window.open('http://www.baidu.com', '_blank', 'download=baidu.html')

Bien sûr, cette méthode est également défectueuse. Par rapport aux abalises, cette méthode ne peut pas télécharger les fichiers .html, .htm, .xml, .xhtmlet autres, car ces fichiers seront htmltraités comme des fichiers, ils seront donc ouverts directement sur la page en cours.

De même, les fichiers inter-domaines ne peuvent pas être téléchargés, après tout, oui window.open, non window.download( window.downloadhypothétique).

3. location.href

Cette méthode est window.open(url)la même que celle-là, le code est le suivant :

location.href = 'http://www.baidu.com'

Cette méthode a window.opentous les défauts, il n'est donc pas recommandé de l'utiliser, ici c'est uniquement pour comprendre, donc je ne vais pas trop m'expliquer.

4. emplacement.? autres attributs

D'autres ici font référence aux propriétés qui peuvent accéder à la page, telles que location.assign, location.replace, location.reloadetc. Ces propriétés peuvent réaliser le téléchargement de fichiers. Le code est le suivant :

location.assign('http://www.baidu.com')
location.replace('http://www.baidu.com')
location.reload('http://www.baidu.com')

Là location.reloadc'est un peu spécial, sa fonction est de recharger la page en cours, mais il peut aussi accepter un paramètre, ce paramètre est la page à sauter, donc il peut aussi réaliser le téléchargement de fichier.

Bien sûr location.href, les inconvénients de ces méthodes sont les mêmes, et il y a aussi les caractéristiques de chaque attribut.Ce n'est que pour approfondir les connaissances, pas pour trop expliquer.

5. XMLHttpRequest

Cette méthode est ce que nous appelons souvent ajaxle téléchargement, y compris axios, fetchetc. sont les mêmes, le code est le suivant :

const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://www.baidu.com')
xhr.send()

xhr.onload = function () {
  const blob = new Blob([xhr.response], { type: 'text/html' })
  const a = document.createElement('a')
  a.href = URL.createObjectURL(blob)
  a.download = 'baidu.html'
  a.click()
}

XMLHttpRequestJe ne parlerai pas des connaissances connexes ici , mais seulement de la partie liée au téléchargement de fichiers.

La logique principale ici est que lorsque notre requête aboutit, nous obtenons le corps de la réponse response, qui responseest le contenu que nous voulons télécharger, puis nous le convertissons en un blobobjet , puis URL.createObjectURLcréons un fichier via l'attribut de la baliseurladownload

Il y a deux points de connaissance ici, l'un est blobl'objet et l'autre est l'objet URL.createObjectURL.

5.1 goutte

Voici blobla définition de l'objet, issue de MDN [2] :

BlobL'objet représente un objet semblable à un fichier de données primitives immuables. Ses données peuvent être lues au format texte ou binaire, et peuvent également être converties ReadableStream pour la manipulation de données.

BlobNe représente pas nécessairement JavaScriptles données dans leur format natif. File L'interface est basée sur Blob, blobune fonctionnalité héritée de et étendue pour prendre en charge les fichiers sur le système de l'utilisateur.

blobObject est html5un objet nouvellement ajouté et sa fonction est de stocker des données binaires, telles que des images, des vidéos, de l'audio, etc. Son utilisation est la suivante :

/**
 * @param {Array} array 二进制数据
 * @param {Object} options 配置项
 * @param {String} options.type 文件类型，它代表了将会被放入到 blob 中的数组内容的 MIME 类型。
 * @param {String} options.endings 用于指定包含行结束符\n的字符串如何被写入。默认为transparent，表示不会修改行结束符。还可以指定为native，表示会将\n转换为\r\n。
 */
const blob = new Blob([], { type: '' })

La principale préoccupation ici est typel'attribut. Par défaut, blobl'objet n'a pas typed'attribut, il s'agit donc Blobd'un fichier sans type Blob. Le fichier ne sera pas endommagé, mais il ne pourra pas être reconnu normalement.

5.2 URL.createObjectURL

Ce qui suit provient de MDN [3] :

La méthode statique URL.createObjectURL() crée un DOMString contenant une URL représentant l'objet donné en paramètre. La durée de vie de cette URL est liée au document dans la fenêtre qui l'a créée. Ce nouvel objet URL représente l'objet File ou l'objet Blob spécifié.

Cette méthode est utilisée pour en créer un url. Sa fonction est de blobconvertir un objet en un seul url. Cette méthode urlpeut être utilisée pour télécharger des fichiers ou prévisualiser des fichiers. Le code est le suivant :

const url = URL.createObjectURL(blob)

Ce qu'il faut noter ici, c'est que urlle cycle de vie de ceci est lié à la fenêtre qui l'a créé document, c'est-à-dire que lorsque la nôtre documentest détruite, celle-ci urldeviendra invalide, il faut donc la détruire au bon moment. est comme suit:

URL.revokeObjectURL(url)

Pour en revenir au problème que nous venons de télécharger, nous bloble résolvons via des objets, mais nos typeattributs sont codés en dur. Si le type de fichier est déterminé, il n'y a pas de problème, mais si cette interface est l'interface de téléchargement de fichiers, le fichier peut y avoir sont de différents types, comment devrions-nous y faire face?

Il n'y a pas de bonne réponse ici. La première peut être négociée avec le fournisseur d'interface. Le plan de négociation est incertain. La seconde consiste à obtenir le fichier par responseson intermédiaire , c'est de cela dont nous voulons parler :headertype

const type = response.headers['content-type']

const blob = new Blob([response.data], { type })

Ici, nous le faisons responsepasser par , puis créons l'objet, afin que le fichier puisse être téléchargé correctement.headertypeblob

En fait , content-typeil se peut qu'à application/octet-streamce moment nous devions file-typefaire passer le dossier type.

Le code suivant est passé file-typepour obtenir le fichiertype :

import {fileTypeFromStream} from 'file-type';

const type = await fileTypeFromStream(response.body);
const blob = new Blob([response.data], { type })

6. Résumé

Il y a tellement de solutions ci-dessus, en fait, cela tombe toujours sur al'étiquette à la fin, donc qu'il soit téléchargé via le comportement intégré du navigateur ou via ajaxle téléchargement, le téléchargement final du fichier est le comportement du navigateur.

---FIN---