How can I set the default filename for the Chrome print dialog from within an iframe?

430
February 03, 2017, at 10:31 AM

I'm working on a project where my part of the project is a dashboard within an iframe. I have a request to make just the iframe I'm working on exportable as a PDF (that is, only show the iframe contents and not the wrapper stuff around it). I've gotten that to work using some jQuery, but I'm now stumped at setting a default filename for saving as PDF. This SO answer was helpful (setting document.title works when the page is not in an iframe), but it doesn't work when the export button is clicked when it is in the iframe view. Here's an example of what I've tried:

$('#export-button').click(function() {
    $('#iframe-contents').show();
    document.title = 'default_filename';
    window.print();
});

Does anyone know how to set the default filename in the Chrome print dialog when calling on window.print() from within an iframe?

Answer 1

Firefox does set the pdf name directly to the iframe's document's name, weird that chrome doesn't.

For a workaround, if your iframe shares the same origin as your parent page, you can use :

document.title = window.parent.document.title = "yourTitle";

If they don't share the same origin, you're stuck.

Actually there is an hack, even for cross-origin frames involving window.open(), hence not working in sand-boxed iframes without 'allow-popups' permission.

function renameIframedPrint(title) {
  var title = "myFile";
  try {
    // same-origin frame
    document.title = window.parent.document.title = title;
    print();
  } catch (e) { // cross-origin frame
    // we could instead grab the current content of the page
    // but for the demo, location.href will do
    var p = window.open(location.href);
    p.onload = function() {
      // no more frame so we don't care ;-)
      p.document.title = "myFile";
      // a bit more hack to close the popup once printed...
      function closePopup() {
        p.close();
      }
      if ('onafterprint' in p) {
        // FF and IE
        p.onafterprint = closePopup
      } else {
        // webkit don't support onafterprint
        var mediaQueryList = p.matchMedia('print');
        mediaQueryList.addListener(mqlListener);
        function mqlListener(mql) {
          if (!mql.matches) {
            closePopup();
            mediaQueryList.removeListener(mqlListener);
          }
        }
      }
    }
    // we're ready
    p.print();
  };
}

External Live Demo, since open() won't work in stack-snippet's sand-boxed iframe.

Rent Charter Buses Company
READ ALSO
Generating Email Links with String Interpolation in Angular 2

Generating Email Links with String Interpolation in Angular 2

In my Angular 2 app I am using md-menu and md-icon-button to show a pop-up with an email addressI'd like the email address that pops up to actually trigger the user's default email setup when clicked on

583
Delaying function not working?

Delaying function not working?

I am trying to delay this function

407
I am thinking about creating a 'hybrid' mobile communications app, like whatsapp, what technologies should i be aware of

I am thinking about creating a 'hybrid' mobile communications app, like whatsapp, what technologies should i be aware of

I am pretty 'noob' at making apps, and a relatively basic programmerI wish to know how the app will send msgs over internet to another user using the same app, pretty much the same way whatsapp works

397