Lösen Sie das domänenübergreifende Problem des Herunterladens von Dateien auf den Dienst mithilfe des Download-Attributs des H5-a-Tags

Der einfachste Weg:

 <a href='url' download=filename.ext>Datei herunterladen</a>

Wenn die URL auf dieselbe Quellressource verweist, ist das normal.

Wenn die URL auf eine Ressource eines Drittanbieters verweist, schlägt der Download fehl und das Verhalten ist das gleiche wie bei Nichtverwendung des Downloads: Dateien, die vom Browser geöffnet werden können, werden direkt vom Browser geöffnet, Dateien, die nicht geöffnet werden können geöffnet werden, werden direkt heruntergeladen. Vom Browser geöffnete Dateien können manuell heruntergeladen werden.

Lösung 1: Packen Sie die Datei in eine .zip/.rar-Datei, die nicht vom Browser geöffnet werden kann, und laden Sie sie herunter.

Lösung 2: Durch Back-End-Weiterleitung fordert das Back-End Ressourcen von Drittanbietern an und gibt sie an das Front-End zurück. Das Front-End verwendet Tools wie File-Saver, um die Datei zu speichern.

Wenn die Drittanbieterressource, auf die die URL verweist, mit CORS konfiguriert ist, ist das Download-Attribut ungültig, aber die Datei kann lokal abgerufen und heruntergeladen werden und der Dateiname kann nicht geändert werden.

 const downloadRes = async (url, name) => { let Response =wait fetch(url) // Konvertieren Sie den Inhalt in eine Blob-Adresse let blob = waiting Response.blob() // Erstellen Sie einen versteckten herunterladbaren Link let objectUrl = window. URL .createObjectURL(blob) let a = document.createElement('a') //Adresse a.href = objectUrl //Dateinamen ändern a.download = Name // Klick auslösen document.body.appendChild(a) a.click() //Entferne setTimeout(() => document.body.removeChild(a), 1000)}

Wenn wir ein Bild herunterladen möchten, können wir das Bild in das Base64-Format konvertieren und es dann herunterladen.

 „export const downloadImg = async (url, name) => { var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), img = new Image(); img.crossOrigin = 'Anonymous'; img.onload = function() { canvas.height = img.height; ctx.drawImage(img, 0, 0); var dataURL = canvas.toDataURL('image/png'); let a = document.createElement('a'); .body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); canvas = null; }, 1000); }; img.src = url;};```

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.