Das Herunterladen der Datei bei Bedarf führt zu einem Netzwerkfehler ⇐ JavaScript

[Anonymous]

Ich erstelle ein Webspiel in React und eine der Funktionen wird sein, dass Sie über eine Schnittstelle Ihre eigene Spieldatei erstellen können. Ich würde die Datei gerne als .json herunterladen können, damit Sie sie entweder laden und abspielen oder sie erneut laden und später daran arbeiten können.
Wenn ich jedoch eine Schaltfläche zum Herunterladen der Datei eingebe, erhalte ich einen Netzwerkfehler und die Datei wird nicht heruntergeladen. Ich habe das JSON-Objekt (ca. 160 KB), das das Spiel darstellt, genommen und es codiert:

Code: Select all

const dataStr = 'data:text/json;charset=utf-8' + encodeURIComponent(JSON.stringify({ rounds: [...stuff] }));

Dann habe ich versucht, ein Ankerelement zu erstellen, dessen „href“ auf dataStr zu setzen und dann programmgesteuert darauf zu klicken. Basierend auf diesem Hinweis habe ich auch versucht, eine Zeitüberschreitung hinzuzufügen:

Code: Select all

const dlAnchorElem = document.createElement('a');
dlAnchorElem.setAttribute('href', dataStr);
dlAnchorElem.setAttribute('download', 'game.json');
setTimeout(() => {
dlAnchorElem.click();
dlAnchorElem.remove();
}, 100);

Was auch immer es wert ist, in einer Vanilla-JS-App hat dieser Ansatz funktioniert.
Ich habe auch versucht, das Paket „file-saver“ zu importieren und saveAs zu verwenden. Bei beiden Ansätzen kam es zu einem „Netzwerkfehler“, was seltsam ist, da das Frontend dabei keine Anfrage an das Backend sendet – alle Daten befinden sich bereits im Frontend.
Weiß jemand, warum das passiert und wie man damit umgeht?
Vielen Dank im Voraus!