Web-Frontend
Front-End-Fragen und Antworten
So implementieren Sie die Download-Funktion in Javascript
So implementieren Sie die Download-Funktion in Javascript
Methoden zum Implementieren der Download-Funktion in JavaScript: 1. Herunterladen über das Tag „window.open“; 3. Herunterladen über die Methode „location.href“; Blob-Objektfunktion.
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 = 'http:www.xxx.com/download?name=file.pdf', fileName = '未知文件') {
const a = document.createElement('a');
a.style.display = 'none';
a.setAttribute('target', '_blank');
/*
* download的属性是HTML5新增的属性
* href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。
* 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式
* 所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)
*/
fileName && a.setAttribute('download', fileName);
a.href = url;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
</script>
</body>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. . Vorteile: Einfach und praktisch Vorteile:
<body> <button onclick="download('http://www.xxx.com/download?name=file.pdf')">window.open下载</button> <script> function download(url) { window.open(url, '_self'); /** * _blank：在新窗口显示目标网页 * _self：在当前窗口显示目标网页 * _top：框架网页中在上部窗口中显示目标网页 /** } </script> </body>Nach dem Login kopieren
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
- 3. location.href-DownloadVorteile
<body> <button onclick="download('http://www.xxx.com/download?name=file.pdf')">location.href下载 </button> <script> function download(url) { window.location.href = url; } </script> </body>Nach dem Login kopieren
- 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.
Sie können beurteilen, ob die Schnittstelle erfolgreich zurückkehrt
Nachteile:
-
Empfohlenes Lernen: „
JavaScript-Video-Tutorial “
<button onclick="download()">文件流转blob对象下载</button>
<script>
download() {
axios({
url: 'http://www.xxx.com/download',
method: 'get',
responseType: 'blob',
}).then(res => {
const fileName = res.headers.content-disposition.split(';')[1].split('filename=')[1];
const filestream = res.data; // 返回的文件流
// {type: 'application/vnd.ms-excel'}指定对应文件类型为.XLS (.XLS的缩写就为application/vnd.ms-excel)
const blob = new Blob([filestream], {type: 'application/vnd.ms-excel'});
const a = document.createElement('a');
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>Sie können den Datei-Download-Fortschritt abrufen
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
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
So verwenden Sie Magnetlinks
Feb 18, 2024 am 10:02 AM
Magnet-Link ist eine Link-Methode zum Herunterladen von Ressourcen, die bequemer und effizienter ist als herkömmliche Download-Methoden. Mit Magnet-Links können Sie Ressourcen im Peer-to-Peer-Verfahren herunterladen, ohne auf einen Zwischenserver angewiesen zu sein. In diesem Artikel erfahren Sie, wie Sie Magnetlinks verwenden und worauf Sie achten sollten. 1. Was ist ein Magnet-Link? Ein Magnet-Link ist eine Download-Methode, die auf dem P2P-Protokoll (Peer-to-Peer) basiert. Über Magnet-Links können Benutzer eine direkte Verbindung zum Herausgeber der Ressource herstellen, um die gemeinsame Nutzung und das Herunterladen von Ressourcen abzuschließen. Im Vergleich zu herkömmlichen Download-Methoden magnetisch
So laden Sie Episoden des Hongguo-Kurzdramas herunter
Mar 11, 2024 pm 09:16 PM
Hongguo Short Play ist nicht nur eine Plattform zum Ansehen von Kurzstücken, sondern auch eine Fundgrube an reichhaltigen Inhalten, darunter Romane und andere spannende Inhalte. Für viele lesebegeisterte Nutzer ist das zweifellos eine große Überraschung. Viele Benutzer wissen jedoch immer noch nicht, wie sie diese Romane in Hongguo Short Play herunterladen und ansehen können. Im Folgenden stellt Ihnen der Herausgeber dieser Website detaillierte Download-Schritte vor, in der Hoffnung, allen bedürftigen Partnern zu helfen. Wie kann ich das Hongguo-Kurzspiel herunterladen und ansehen? Antwort: [Hongguo-Kurzspiel] – [Hörbuch] – [Artikel] – [Download]. Spezifische Schritte: 1. Öffnen Sie zuerst die Hongguo Short Drama-Software, rufen Sie die Startseite auf und klicken Sie oben auf der Seite auf die Schaltfläche [Bücher anhören]. 2. Dann können wir hier auf der Romanseite viele Artikelinhalte sehen
Was soll ich tun, wenn ich das Hintergrundbild einer anderen Person herunterlade, nachdem ich mich bei WallpaperEngine bei einem anderen Konto angemeldet habe?
Mar 19, 2024 pm 02:00 PM
Wenn Sie sich auf Ihrem Computer beim Steam-Konto einer anderen Person anmelden und das Konto dieser anderen Person über eine Hintergrundsoftware verfügt, lädt Steam automatisch die Hintergrundbilder herunter, die für das Konto der anderen Person abonniert wurden, nachdem Sie zu Ihrem eigenen Konto zurückgewechselt haben Deaktivieren der Steam-Cloud-Synchronisierung. Was tun, wenn WallpaperEngine die Hintergrundbilder anderer Personen herunterlädt, nachdem Sie sich bei einem anderen Konto angemeldet haben? 1. Melden Sie sich bei Ihrem eigenen Steam-Konto an, suchen Sie in den Einstellungen nach der Cloud-Synchronisierung und deaktivieren Sie die Steam-Cloud-Synchronisierung. 2. Melden Sie sich bei dem Steam-Konto einer anderen Person an, bei dem Sie sich zuvor angemeldet haben, öffnen Sie den Wallpaper Creative Workshop, suchen Sie nach den Abonnementinhalten und kündigen Sie dann alle Abonnements. (Falls Sie das Hintergrundbild in Zukunft nicht mehr finden, können Sie es zunächst abholen und dann das Abonnement kündigen.) 3. Wechseln Sie zurück zu Ihrem eigenen Steam
So laden Sie Videos von einem Videokonto herunter „Muss man gesehen haben: Eine einfache Möglichkeit, Videos von einem Videokonto zu speichern'
Feb 06, 2024 pm 06:42 PM
Jetzt fangen immer mehr Menschen an, Videokonten zu nutzen, die auch eine kurze Videoplattform sind, auf der sie ihr tägliches Leben teilen und mit Videokonten Geld verdienen können. Kürzlich sah ich, wie einige Freunde fragten, warum die Videos vom WeChat-Videokonto nicht heruntergeladen wurden, und es gab tatsächlich keinen Download-Button, sodass er das Video nur auf andere Weise extrahieren konnte mit dir eine dumme Methode, komm und schau es dir an. So extrahieren Sie Videos aus WeChat-Videokonten 1. Öffnen Sie unsere Computerversion von WeChat und suchen Sie auf der linken Seite nach dem Videokonto, das Sie herunterladen möchten. 3. Verwenden Sie abschließend das Bildschirmaufzeichnungstool, um es anzupassen Größe des aufgenommenen Videos. Nehmen Sie es einfach auf und bearbeiten Sie es am Ende. PS: 1. Diese Methode kann nur auf der Computerversion aufgezeichnet werden, nicht auf dem Mobiltelefon.
Wie lade ich Links herunter, die mit 115:// beginnen? Methodeneinführung herunterladen
Mar 14, 2024 am 11:58 AM
In letzter Zeit haben viele Benutzer den Editor gefragt, wie man Links herunterlädt, die mit 115:// beginnen? Wenn Sie Links herunterladen möchten, die mit 115:// beginnen, müssen Sie den 115-Browser verwenden. Nachdem Sie den 115-Browser heruntergeladen haben, schauen wir uns das unten vom Herausgeber zusammengestellte Download-Tutorial an. Einführung zum Herunterladen von Links, die mit 115:// beginnen. 1. Melden Sie sich bei 115.com an, laden Sie den 115-Browser herunter und installieren Sie ihn. 2. Geben Sie Folgendes ein: chrome://extensions/ in die Adressleiste des 115-Browsers, rufen Sie das Extension Center auf, suchen Sie nach Tampermonkey und installieren Sie das entsprechende Plug-in. 3. Geben Sie in die Adressleiste des Browsers 115 ein: Grease Monkey Script: https://greasyfork.org/en/
So laden Sie Dateien von der 123-Cloud-Festplatte herunter
Feb 23, 2024 pm 08:58 PM
123 Cloud Disk kann viele Dateien herunterladen. Wie lade ich Dateien konkret herunter? Benutzer können die Datei auswählen, die sie herunterladen möchten, und zum Herunterladen klicken, oder mit der rechten Maustaste auf die Datei klicken und „Herunterladen“ auswählen. In dieser Einführung in die Methode zum Herunterladen von Dateien von der 123-Cloud-Festplatte erfahren Sie, wie Sie sie herunterladen. Freunde, die nicht viel darüber wissen, sollten sich beeilen und einen Blick darauf werfen! So laden Sie Dateien von 123 Cloud Disk herunter 1. Öffnen Sie zuerst die Software, klicken Sie auf die Software, die heruntergeladen werden muss, und dann wird darauf ein Download-Button angezeigt. 2. Oder klicken Sie mit der rechten Maustaste auf die Software und Sie können die Download-Schaltfläche in der Liste sehen. 3. Es erscheint ein Download-Fenster. Wählen Sie den Speicherort aus, den Sie herunterladen möchten. 4. Klicken Sie nach der Auswahl auf „Herunterladen“, um diese Dateien herunterzuladen.
So laden Sie Baidu Netdisk-Dateien herunter
Feb 23, 2024 pm 06:20 PM
Wie lade ich Baidu Netdisk-Dateien herunter? Sie können die erforderlichen Dateien in Baidu Netdisk herunterladen, aber die meisten Benutzer wissen nicht, wie sie Baidu Netdisk-Dateien herunterladen. Text-Tutorial, interessierte User kommen vorbei und schauen vorbei! So laden Sie Baidu Netdisk-Dateien herunter: 1. Öffnen Sie zunächst Baidu Netdisk und suchen Sie die Datei, die heruntergeladen werden muss. 2. Klicken Sie dann wie unten gezeigt auf die Schaltfläche [Herunterladen]. 3. Schließlich wird ein Fenster angezeigt. Wählen Sie [; Download] zum Abschließen. Datei-Downloads können jederzeit geöffnet werden.
Einführung in das Herunterladen und Installieren des Superpeople-Spiels
Mar 30, 2024 pm 04:01 PM
Das Superpeople-Spiel kann über den Steam-Client heruntergeladen werden. Die Größe dieses Spiels beträgt normalerweise eineinhalb Stunden. Hier ist ein spezielles Download- und Installations-Tutorial. Neue Methode zur Beantragung globaler geschlossener Tests 1) Suchen Sie nach „SUPERPEOPLE“ im Steam-Store (Steam-Client-Download) 2) Klicken Sie unten auf der „SUPERPEOPLE“-Store-Seite auf „Zugriff auf geschlossene SUPERPEOPLE-Tests anfordern“ 3) Nachdem Sie auf geklickt haben Schaltfläche „Zugriff anfordern“. Das Spiel „SUPERPEOPLECBT“ kann in der Steam-Bibliothek bestätigt werden. 4) Klicken Sie auf die Schaltfläche „Installieren“ in „SUPERPEOPLECBT“ und laden Sie es herunter
