Force a download via browser
Mia Lopez 
I'm looking for a way to force a download on a URL you put in your browser (preferably your browser's address field but without hitting enter, so the URL doesn't get loaded first). This should work for any link, not just certain file types. Basically it should be the analog to right-clicking a link and choosing the "save as"-option.
My current "first" workaround is a bookmark with the following javascript code:
javascript:document.body.innerHTML="<a download" + "sitelink".link(window.location.href).substring(1);It will create an empty page with just a link to the site I was on while clicking on the bookmark. From there I can then use it with the right click and "save as" option. Works fine for all sorts of file eg. mp4 files, textfiles, htmlfiles etc.
However, this does not work all the time, currently I have the following problem(s):
if the browser has to "load" a large file before creating the link which take time with some large files. I have a current issue, where a PFD file does not get recognized as PDF and get parsed as text into the browser window which gets displayed sort of like this
%PDF-1.5 %�50obj<>x��...my workarounds works, but it's not very performant if the file has several MB. (And because of the parsing saving the content of the browser window does not create a correct PDF file anymore)with files that get stored locally (e.g. PDF files inside the Firefox PDF viewer). But PDF files are not that bad since the viewer gives me a download button.
My current solution does not work well for big files (as stated above). So I currently use my "second" workaround: I create a simple website file with just the link (I always use the same HTML-file just exchanging the link), I open the html which includes the link in the browser and then I right-click on it etc.
I wonder if there is a more elegant way to do that? I want to get rid of the necessity for my second workaround (to open my "manual" HTML file, update the link, and then go through the right-click, etc). Although I am happy about any workaround that saves time and can be accessed from within the browser (e.g. by a bookmark etc.), I'd prefer solutions that can be implemented without browser addons. If an addon is necessary I would prefer open source.
Currently, my main browser is Firefox, but feel free to add additional solutions for other browser types as well.
1 Answer
Intro
I was able to achieve a one-click bookmark that downloads the current browser url. I was able to test this in both Chrome and Firefox for both html files and images, and PDF files.
The code will first ask you what to name the file (including the file's extension) using the browser's prompt built in, you can also cancel the download at this point in time.
Here is the code that you can paste into the Location field of a newly created bookmark:
EDIT: For files hosted on Intranet use this bookmark. Now works for internet as well.
javascript:fetch(window.location.href).then(resp => resp.blob()) .then(blob => { const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = prompt("Enter filename and extension (e.g. myImage.jpg):", window.location.href.split('\/').pop() === "" ? window.location.hostname + ".html" : window.location.href.split('\/').pop()); document.body.appendChild(a); if(a.download !== "null") { a.click(); alert('Your file ' + a.download + ' has downloaded!'); } window.URL.revokeObjectURL(url); }) .catch(() => alert('Could not download file.'));Breakdown
Here is the code on multiple lines so we can break it down
fetch(window.location.href) .then(resp => resp.blob()) .then(blob => { const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = prompt("Enter filename and extension (e.g. myImage.jpg):", window.location.href.split('\/').pop() === "" ? window.location.hostname + ".html" : window.location.href.split('\/').pop()); document.body.appendChild(a); if(a.download !== "null") { a.click(); alert('Your file ' + a.download + ' has downloaded!'); } window.URL.revokeObjectURL(url); }) .catch(() => alert('Could not download file.'));1) Using the Fetch browser API
fetch(window.location.href)In this bookmark, we are using the brower's built-in fetch API to download the file contents located at the url of the current tab's address bar.
2) Using a Blob
.then(resp => resp.blob()) .then(blob => { const url = window.URL.createObjectURL(blob);We construct a Blob from the response that we receive. This will allow us to download the file.
3) Creating the anchor tag
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = prompt("Enter filename and extension (e.g. myImage.jpg):", window.location.href.split('\/').pop() === "" ? window.location.hostname + ".html" : window.location.href.split('\/').pop());We create an anchor tag and here we have the option to ask the user to set the filename. It is important to do this so we can get the correct file extension. Note: If you would like to remove this prompt, you can set a.download to whatever you would like. For example: a.download = "downloaded_file";
However, by using a prompt we can allow the user to cancel the operation before it downloads.
4) Downloading the file and giving feedback with alerts
document.body.appendChild(a);
if(a.download !== "null")
{ a.click(); alert('Your file ' + a.download + ' has downloaded!');
}
window.URL.revokeObjectURL(url);
})
.catch(() => alert('Could not download file.'));If a.download is a string that equals "null" (an actual string and not the type null), it means the user pressed cancel on the prompt, so we skip over automatically clicking our anchor tag.
At this point in the script, you can remove the alert lines if you don't want them to pop up.
