Alternative for 'download' attribute in Safari/iOS

Question

I have a blob created with a base64, and I need to make this data downloadable as a pdf.

I created this snippet:

    var blob = new Blob([byte]);
    var link = document.createElement('a');

    link.href = window.URL.createObjectURL(blob);
    link.target = '_blank';
    var fileName = name + '.pdf';
    link.download = fileName;
    link.click();

It works on all the browsers, except safari mobile on iOS.

The file gets actually downloaded, but its name is "unknown", then it can't be open since the extension gets lost.

The problem is that the download attribute lacks support on this browser and IE.

There are a lot of workarounds for IE, but I didn't find any for Safari/iOS.

Do you know how can I download a blob got from a base64 (no XHR involved) in this browser?

Thank you

Answer 1

I need to make this data downloadable as a pdf (...) in safari iOS

SHORT ANSWER: you can't. Due this bug is impossible to download the file on safari iOS

---

The alternative is to open the file on the browser with the proper mime type, so it can show its content (and the user can then manually download it if needed).

Make sure to pass mime type when creating the Blob. reference

var blob = new Blob([byte], {type: 'application/pdf'});

---

Lastly, I'd strongly suggest you to use FileSaver.js which that can handle most of the corner cases/multiple browser support for save (or in this case, open) a file in javascript.

Answer 2

As per the below link:-

https://caniuse.com/#feat=download

Safari 13 Beta 3 is released so you can check on the same, whether its working or not?

You can download a blob got from a base64 by using a atob function.

The atob function will decode a base64-encoded string into a new string with a character for each byte of the binary data.

You can save blob locally via FileSaver.js .

You can also check here that would be helpful:- How to open Blob URL on Chrome iOS

Answer 3

This is something I have tried in my project and it is working for me.

import "./styles.css";

var pdfData =
  "JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog" +
  "IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv" +
  "TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K" +
  "Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg" +
  "L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+" +
  "PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u" +
  "dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq" +
  "Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU" +
  "CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu" +
  "ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g" +
  "CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw" +
  "MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v" +
  "dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G";

let download = () => {
  if (pdfData) {
    var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
    var isChrome =
      navigator.userAgent.toLowerCase().indexOf("CriOS") > -1 ||
      navigator.vendor.toLowerCase().indexOf("google") > -1;
    var iOSVersion = [];
    if (iOS) {
      iOSVersion = navigator.userAgent
        .match(/OS [\d_]+/i)[0]
        .substr(3)
        .split("_")
        .map((n) => parseInt(n));
    }
    var attachmentData = pdfData;
    var attachmentName = "Test.pdf";
    var contentType = "application/pdf";

var binary = atob(attachmentData.replace(/\s/g, ""));
var len = binary.length;
var buffer = new ArrayBuffer(len);
var view = new Uint8Array(buffer);
for (var i = 0; i < len; i++) {
  view[i] = binary.charCodeAt(i);
}
var linkElement = document.createElement("a");
try {
  var hrefUrl = "";
  var blob = "";
  if (iOS && !isChrome && iOSVersion[0] <= 12) {
    blob = "data:application/pdf;base64," + pdfData;
    hrefUrl = blob;
  } else {
    if (iOS && !isChrome) {
      contentType = "application/octet-stream";
    }
    blob = new Blob([view], { type: contentType });
    hrefUrl = window.URL.createObjectURL(blob);
  }
  linkElement.setAttribute("href", hrefUrl);
  linkElement.setAttribute("target", "_blank");
  if ((iOS && (iOSVersion[0] > 12 || isChrome)) || !iOS) {
    linkElement.setAttribute("download", attachmentName);
  }
  var clickEvent = new MouseEvent("click", {
    view: window,
    bubbles: true,
    cancelable: false
  });
  linkElement.dispatchEvent(clickEvent);


   } catch (ex) {}
  }
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button onClick={download}>Download</button>
    </div>
  );
}

Answer 4

The "target" attribute in Safari seems to override the "download" attribute. Currently, as to my knowledge, there is no way to solve this. So I think you have to wait for the next Safari version (13) which will be out in a few months.