jsPDF filename not showing for iOS using .output() instead of .save()

1k views Asked by At

I'm on the latest iOS 14.0.1 and jsPDF 2.1.1. Here are 3 scenarios for Safari and Chrome:

Safari:

  1. Use jsPDF.save('myfilename.pdf'). No issues here, the PDF opens in the same page and then when you hit the browser share button, the share dialog pops up with preview icon showing the PDF and the title "1 Link and 1 Document" with the blob url underneath. If you select "Save to Files" then you see the right name myfilename.pdf.

  2. Use window.open(jsPDF.output('bloburl', 'myfilename.pdf')) or window.open(jsPDF.output('bloburl', filename: { 'myfilename.pdf' })) and everything is the same as above, except that "Save to Files" shows Unknown.pdf

  3. Use the navigator.share() API:

    navigator.share({ title: 'my title', url: jsPDF.output('bloburl', 'myfilename.pdf') })

    This pops up the native share dialog right away, but it's as if the file is not recognized because there are almost no menu options. On a semi-related note, I call navigator.share() on a click event, the first time it shows up but all subsequent clicks nothing happens.

Chrome: All 3 scenarios produce the same share dialog, seems like the PDF is not recognized and if you try to share with a friend through text message it sends the blob link text.

I'm trying to look for a unified download/share solution. I looked into <a download="filename.pdf" href="bloblinkgoeshere"> but that presented a new batch of cross-browser compatibility issues for iOS. Chrome seemed to work with a dataurlstring instead of bloburl but it took like 10 seconds for a ~6MB pdf file to produce a download link. Safari didn't work with either. However, I tried a base64 string of a gif file and that seemed to work with safari, but not a pdf data uri.

0

There are 0 answers