Schaltfläche „Bild vom Server eines Drittanbieters herunterladen“.

Question

Wenn Sie in einem beliebigen Browser ein Bild sehen, können Sie mit der rechten Maustaste darauf klicken und auf „Speichern unter“ klicken, um es herunterzuladen.

Ich versuche, eine Schaltfläche zum Herunterladen eines Bildes zu erstellen

Der Download-Button sollte das obige Bild und den Barcode herunterladen.

Ich verwende „Reagieren“ und bin mir nicht sicher, ob dies für die Antwort relevant ist.

Ich habe gelesen, dass Sie das Attribut <a/> 标签与 download zusammen verwenden können. Ich verwende jedoch Firefox und es leitet mich zu der Seite weiter, auf der sich das Barcode-Bild befindet, und öffnet das Download-Fenster nicht:

Der Code ist sehr einfach und sieht so aus:

<a href='https://barcode.tec-it.com/barcode.ashx?data=${product.barcode}&code=&multiplebarcodes=true&backcolor=%23ffffff&quietzone=10&quietunit=Px&size=Small' download>click me</a>

Aus der MDN-Dokumentation:

Download funktioniert nur mit derselben Ursprungs-URL oder demselben Blob: und Daten: planen.

Ich möchte das umsetzen, wie mache ich das? Der Server, auf dem das Bild gehostet wird, gehört nicht mir.

Können wir das im Jahr 2023 schaffen?

Andere Probleme sind die Vermischung lokaler Bilder mit Bildern, die auf anderen Servern gehostet werden. Deshalb dachte ich, ich erstelle diesen Thread für diejenigen unter Ihnen, die sich nur für Bilder auf Servern Dritter interessieren. - Wir sind hier also alle Front-End, es gibt keine Back-End-bezogenen Dinge.

Answer 1

我认为你的问题指的是这个老问题。

您需要在服务器上发送 Content-Disposition 标头以将文件设置为附件，以便浏览器不会尝试在内部处理该文件。

请参阅： href 图片链接点击下载