Save causes open in Firefox

[AndrewPixel]

On Windows 10 using the latest Firefox this pdfdoc.save("sample.pdf"); only causes the PDF to be opened as a blob in the current window. No file gets saved to the computer.

I thought it was my code but the same thing happens from your demo page on Github.

It works fine with Chrome (and Edge).

[phuocdh90]

My web application also uses jsPDF and encountered this problem on latest Firefox. It is critical for my application use cases because users will lost their progress...

[HackbrettXXX]

A pull request fixing this would be very welcome.

[thebrownfox]

I think it's the FF settings involved. You can use this though

window.open(pdf.output("bloburl", { filename: "my.pdf" }));

[GitHubRulesOK]

@HackbrettXXX

I think this is user confusion thus not a FireFox or jsPDF issue (though words may differ here is the stated intent blob.save will show in ChromEdgium the blobs given name

Here is ONE FireFox output method in windows

Here is ANOTHER VIA a plugin extension

And YET Another because the user has half a dozen or more possible settings,

And the perfectly natural user choice of settings which is the OP beef

[jarmalo]

I have the same problem. With the default Firefox settings a blob is opened instead of a file. But there is one oddity. In jsFiddle this is not the case.

https://jsfiddle.net/awk6hd7t/

Because it says somewhere here that question should be asked on stackoverflow, I did it there instead of here. https://stackoverflow.com/questions/71895717/invalid-absolute-docbaseurl-blob

The PDF created with jsPDF should be opened with the default Firefox settings not as a blob but as a file.

[longinius]

I don't think it has anything to do with the Firefox setting. Version 97 of Firefox and before downloaded the file like all other browsers, as you would expect. From version 98 we have the behavior described here, with the blob opening in the same window. Thus, there must have been a change within Firefox, maybe it was intentional, I don't know.

You can download an older version of Firefox here and try it out. The setting for PDF files is the same. Behavior of version 97.0.2 and before:

Behavior of version 98.0.2 and later:

[GitHubRulesOK]

@longinius you are correct that version 97.0 behaves different but my take is that was a bug in 97 since when downloaded as suggested from your link on windows 11 and set to show in Firefox mine does not have that preview option to override Edge and will only open with any other user preferred method including Edge but that was clearly fixed in more recent versions.

There is a war in the wings as Win 11 and Edge are pushing other browsers into submission and it is the browsing client that decides what is right for them Statcounter has Firefox with a 7.5% slice of the pie,

"Mozilla, the maker of Firefox, was equally unimpressed by the Redmond firm. "People should have the ability to simply and easily set defaults and all operating systems should offer official developer support for default status."

"In practice, we'd like to also see progress on reducing the number of steps required to set a new browser as default, and on opening and making APIs available for apps to set default that other Microsoft applications use.""

Foxit Adobe and Tracker made default changes recently to combat Edge PDF dominance

Thus I surmise Firefox is taking back some lost ground and letting users again default open in Firefox not Edge unless you choose that routing.

[longinius]

The release notes for Firefox 98 state that a new optimized download flow has been implemented. @GitHubRulesOK you're right, it was changed and this was intentional, so this will be the new default for Firefox.

Firefox has a new optimized download flow. Instead of prompting every time, files will download automatically.

Thus the setting for PDF files is used, if it is set to "Open in Firefox" the PDF will be opened. You can change this setting and get the old behavior, where it will always ask or download the file.

Currently, there are also a bug report on this topic: PDF downloads (<a> with download attribute, or Content-Disposition: attachment) opens in the same tab rather than as a download. It looks like it affects a lot of apps in their function, if you read the comments.

As a temporary solution the mimetype can be set to application/octet-stream, as described in the comments. This leads to a download and opens the pdf file in a new tab, since target="_blank" seems to be ignored when there's also a download attribute, as described in bug 1759916. The solution with the mimetype should be used with caution, because the FileSaver.js page says that Safari has problems with the mimetype. I don't know if the problem still exists in current versions of Safari.

[jarmalo]

There is a Warning in the Firefox console:
Invalid absolute docBaseUrl: "blob:https://www.example.com/25dao98-787zhz98-098kiio54" and
PDF 7a55842e15bbd5545545114f2211 [1.3 jsPDF 2.5.1 / example.com] (PDF.js: 2.14.13) and
The name of the function is save() and not open().

There is also a problem for which a solution is being searched. It is absolutely not a solution to display my website visitors an info instructing them to change their browser settings. The save() function must work as save with default browser settings. I am not a fan of temporary solutions. I'm waiting for a new version where the problem is fixed.

[GitHubRulesOK]

@jarmalo note I have been most careful to use /show blobdoc.save() (as per your usage) since save means offer to client for download and view blob or download blob according to user preference. As to waiting for a fix my observation is new behaviour is the "fix" for previous Windows bad behavior to not allow view in Firefox but only allow viewing blob in Edge

[jarmalo]

Uh-huh. OK, it's just a warning in the Browser Console. However, it is not optimal.

The problem is this. The website returns a result after a form field is filled in. A calculation is performed, which is very server heavy. The result can be saved in a PDF. The PDF is created by clicking on a button with onclick="". The PDF opens in the same window as a blob and it is not saved. When the user clicks the back button in the browser it doesn't work because it wants to resend the form field request. So the user has to send it again and gets the same result. It is a useless form field request and a useless server load (CPU). Open the form field result in a new tab/window is not wanted because the website is a onepager.

[1aerostorm]

Solution with MIME-type:

1. Install file-saver package into your dependencies (since we cannot use FileSaver from jspdf; also, it will be better to have possibility of update file-saver without forking of jspdf).

import FileSaver from 'file-saver'

3. Get Blob from jspdf, change MIME-type using hack with slice(), and use FileSaver to save it as a file:

if (navigator.userAgent.toLowerCase().includes('firefox')) {
	console.warn('Firefox detected - using alternative PDF save way...')
	let blob = pdf.output('blob')
	blob = blob.slice(0, blob.size, 'application/octet-stream') 
	FileSaver.saveAs(blob, this.fileName)
	return
}
pdf.save(this.fileName)

Result: Firefox opens new tab with your PDF document (and it is confusing), but it also downloads the PDF file.

bloburl way is even worse (opens new tab and not downloads).

[longinius]

Today Firefox version 101 was released. This version fixes the problem with opening the PDF in the same tab. PDF files are opened in a new tab when there is a download attribute or a Content-Disposition Header present, but not saved automatically. The user must manually click on the "Download" icon and save the file.

You can checkout the link in Comment 62 of the bug report for a site with different Content-Disposition Headers and download attributes to see the behavior of Firefox or any other browser.

The current behavior can only be adjusted by changing the settings in Firefox by the user. I don't think that there is a possibility that jsPDF or FileSaver can change the behavior of Firefox here.

[AndrewPixel]

It's not ideal though having a situation users "know" how to deal with is much better than it was.

[saptarshimondal]

Solution with MIME-type:

1. Install `file-saver` package into your dependencies (since we cannot use FileSaver from jspdf; also, it will be better to have possibility of update `file-saver` without forking of `jspdf`).

import FileSaver from 'file-saver'

3. Get `Blob` from jspdf, change MIME-type using hack with `slice()`, and use `FileSaver` to save it as a file:

if (navigator.userAgent.toLowerCase().includes('firefox')) {
	console.warn('Firefox detected - using alternative PDF save way...')
	let blob = pdf.output('blob')
	blob = blob.slice(0, blob.size, 'application/octet-stream') 
	FileSaver.saveAs(blob, this.fileName)
	return
}
pdf.save(this.fileName)

Result: Firefox opens new tab with your PDF document (and it is confusing), but it also downloads the PDF file.

bloburl way is even worse (opens new tab and not downloads).

This hack is working! Thanks. Although it is confusing for a user as it is downloading the file and instantly opening in new tab, but it served its purpose. It would be good if there is a better way.