On iOS, in both Chrome and Firefox, saving a blob to a file, using the technique of embedding an object URL in a hidden link in the DOM and programmatically clicking on it, does not work. The following happens:
- JSON (blob of type application/json) displays the JSON in plain text but does not download it.
- An XLSX spreadsheet (blob of type application/octet-stream) does nothing.
- PNG (blob of type image/png) displays the image but does not download it.
- SVG (blob of type image/svg+xml) displays the image but does not download it.
The download technique works on iOS Safari as well as all the following desktop browsers: Chrome, Firefox, Safari and Edge.
Here is the code:
const blobURL = URL.createObjectURL(blob);
const tempLink = document.createElement("a");
tempLink.style.display = "none";
tempLink.href = blobURL;
tempLink.setAttribute("download", filename);
tempLink.setAttribute("target", "_blank");
document.body.appendChild(tempLink);
tempLink.click();
tempLink.remove();
URL.revokeObjectURL(blobURL);
What can I do to enable the user to download data created in the browser on iOS Chrome and Firefox?