Comment créer une exportation et un téléchargement dans un navigateur HTML à l'aide de JS

Cet article partage principalement avec vous la méthode de création de téléchargement d'exportation de navigateur HTML avec JS. Il utilise principalement l'attribut de téléchargement et le Blob de HTML5. La méthode

URL.createObjectURL

URL.createObjectURL() créera une URL pointant vers l'objet paramètre en fonction des paramètres transmis. La vie de cette URL n'existe que dans le document dans lequel elle est. est créé. . La nouvelle URL de l'objet pointe vers l'objet File ou l'objet Blob exécuté.

objectURL = URL.createObjectURL(blob || file);1

Objet File ou Blob. object
Ici, nous parlons brièvement des objets File et des objets Blob :
L'objet File est un fichier. Par exemple, si j'utilise la balise input type="file" pour télécharger des fichiers, alors chaque fichier à l'intérieur est un objet File. .
Les objets Blob sont des données binaires. Par exemple, les objets créés via new Blob() sont des objets Blob. Pour un autre exemple, dans XMLHttpRequest, si le type de réponse est spécifié comme blob, la valeur de retour obtenue est également un objet blob. 🎜>*Remarque
Chaque fois que createObjectURL est appelé, un nouvel objet URL est créé Même si vous avez déjà créé une URL pour le même fichier. Si vous n'avez plus besoin de l'objet, pour le libérer, vous devez utiliser le. Méthode URL.revokeObjectURL() . Lorsque la page est fermée, le navigateur la libère automatiquement, mais pour des performances et une utilisation de la mémoire optimales, elle doit être publiée lorsqu'il est assuré qu'elle n'est plus nécessaire

URL. La méthode .revokeObjectURL

URL.revokeObjectURL() libérera une URL d'objet créée par URL.createObjectURL(). Lorsque vous avez utilisé cette URL d'objet, vous devez informer le navigateur que cette URL n'a plus besoin de pointer. au fichier correspondant.time, vous devez appeler cette méthode.

La signification spécifique est qu'une URL d'objet peut être utilisée pour accéder au fichier spécifié, mais je n'aurai peut-être besoin d'y accéder qu'une seule fois. will S'il n'est plus nécessaire, il sera publié. Après sa publication, l'URL de l'objet ne pointera plus vers le fichier spécifié
Par exemple, pour une image, j'ai créé une URL d'objet, puis via celle-ci. URL de l'objet, ma page Cette image est chargée. Puisqu'elle a été chargée et qu'il n'est pas nécessaire de charger à nouveau cette image, je publierai l'URL de l'objet, et cette URL ne pointera plus vers cette image
.

fenêtre.URL.revokeObjectURL(objectURL);1

Méthode de téléchargement du fichier

var funDownload = function (content, filename) {
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';    // 字符内容转变成blob地址
    var blob = new Blob([content]);
    eleLink.href = URL.createObjectURL(blob);    // 触发点击
    document.body.appendChild(eleLink);
    eleLink.click();    // 然后移除
    document.body.removeChild(eleLink);
};

Recommandations associées :

l'affichage du navigateur HTML est tronqué code_html/css_WEB -ITnez

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!