Set the default save as name for a an or that uses a Blob [duplicate]

by

Note:
This answer is outdated.
The behavior described below did change since it was posted, and it may still change in the future.
Since this question has been asked elsewhere, with better responses, I invite you to read these instead: Can I set the filename of a PDF object displayed in Chrome?

I didn’t find, yet, for chrome’s default plugin.
I’ve got something that works for Firefox though, and which will default to download.pdf in chrome, for some odd reason…

By passing a dataURI in the form of

'data:application/pdf;headers=filename%3D' + FILE_NAME + ';base64,...'

Firefox accepts FILE_NAME as the name of your file, but chrome doesn’t…

A plnkr to show a better download.pdf in chrome, which doesn’t like nested iframes…

And an snippet which will only work in FF :

const FILE_NAME = 'myCoolFileName.pdf';
const file_header=";headers=filename%3D";

fetch('https://dl.dropboxusercontent.com/s/rtktu1zwurgd43q/simplePDF.pdf?dl=0').then(r => r.blob())
.then(blob=>{
  const f = new FileReader();
  f.onload = () => myPdfViewer.src = f.result.replace(';', file_header + encodeURIComponent(FILE_NAME) + ';');
  f.readAsDataURL(blob);
  });
<iframe id="myPdfViewer" width="500" height="500"></iframe>

But note that if it is really important to you, you could of course not rely on browser’s own plugins, and use e.g Mozilla’s PDF.js over which you’ll get an extended control.

More Related Contents:

  1. How to open a PDF file in an ?
  2. Save a pre element as PDF with CSS
  3. Silent print an embedded PDF
  4. How to print a PDF from the browser
  5. how to display base64 encoded pdf?
  6. convert HTML ( having Javascript ) to PDF using JavaScript [closed]
  7. Displaying Javascript variables in HTML
  8. Single event handler for four button clicks
  9. In JavaScript can I make a “click” event fire programmatically for a file input element?
  10. jQuery document.createElement equivalent?
  11. How to get the raw value an field?
  12. How to fix getImageData() error The canvas has been tainted by cross-origin data?
  13. Losing scope when using ng-include
  14. Change label text using JavaScript
  15. Detect click event inside iframe
  16. JS: Get array of all selected nodes in contentEditable div
  17. Uploading Image to Amazon s3 with HTML, javascript & jQuery with Ajax Request (No PHP)
  18. Store jquery selector in variable
  19. How to add DOM element script to head section?
  20. Change how fast “title” attribute’s tooltip appears
  21. Writing data to a local text file with javascript
  22. Detect failure to load contents of an iframe
  23. Change placeholder text
  24. Changing cursor to waiting in javascript/jquery
  25. Returning value from confirmation dialog using JQuery UI dialog
  26. Change form action on select option
  27. HTML5 Video autoplay with sound unmuted
  28. How do I dynamically adjust css stylesheet based on browser width?
  29. How to get and set the current web page scroll position?
  30. How do I put a clear button inside my HTML text input box like the iPhone does?

Leave a Comment