Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Print title and orientation issue on firefox #391

Closed
NumanArshad opened this issue Jun 29, 2021 · 7 comments
Closed

Print title and orientation issue on firefox #391

NumanArshad opened this issue Jun 29, 2021 · 7 comments
Labels

Comments

@NumanArshad
Copy link

NumanArshad commented Jun 29, 2021

In mozilla firefox print title and page landscape orientation is not working while It's working in microsoft edge and google chrome
Here are screenshot for chrome, edge and mozella
Chrome
Edge
Mozella_FireFox

and here is my code
code

@NumanArshad NumanArshad changed the title Print title, background and orientation issue on firefox Print title and orientation issue on firefox Jun 29, 2021
@MatthewHerbst
Copy link
Owner

The title not working is being tracked in #321

Any chance you can make a working codesandbox with your code that replicates the orientation issue? Everything in your code above looks ok but hard to debug/play around with an image

@NumanArshad
Copy link
Author

Here is codesandbox url, I want to use lg grid system which is working on chrome, edge but not in firefox
but in codesandbox it's working even in firefox but not locally
https://codesandbox.io/s/intelligent-galileo-g2z1g?file=/src/App.js

@NumanArshad
Copy link
Author

Another query related orientation is , how to set default orientation landscape in firefox as @page {size : landscape } is not supported in firefox?

@MatthewHerbst
Copy link
Owner

Apologies for not responding, I've had to focus on work the past few weeks. I hope to have time to get to these issues this weekend

@pgarr
Copy link

pgarr commented Aug 23, 2021

I have similar issue with Firefox, that regardless of documentTitle prop or explicity setting document.title, title displayed in "save as" window is always "blank.pdf".
I made some research and read this somewhere (can't find source now):
Chrome takes default title from most upper html tag, but Firefox from the most bottom one.

As react-to-print creates iframe for printing, I assumed, that Firefox takes title from html inside this iframe.
So I made fast and simple test to check this out:

const handlePrint = useReactToPrint({
    content: () => printContainer.current,
    onBeforePrint: () => {
        const iframe: any = document.getElementById('printWindow');
        iframe!.contentDocument.title  = "iframe innerHtml title";
    },
    documentTitle: "default document title"
});

With this code, in Chrome I have title "default document title", but in Firefox, title is "iframe innerHtml title".
So I think that setting this title for html inside iframe during its creation would fix this one issue.

@MatthewHerbst
Copy link
Owner

Thanks for the research @pgarr!

@MatthewHerbst
Copy link
Owner

After a lot of research and trial/error I've got the page title working for the major desktop browsers (Chrome, Firefox, Safari). I'll be making a release tonight with these changes, here is what it ended up needing to be:

if (documentTitle) {
  // Print filename in Chrome
  target.ownerDocument.title = documentTitle;

  // Print filename in Firefox, Safari
  if (target.contentDocument) {
    target.contentDocument.title = documentTitle;
  }
}

I'll be doing research into mobile browsers later this week, but I believe the above should fix the majority use cases.

MatthewHerbst added a commit that referenced this issue Oct 20, 2021
* Add `logMessages` function, fix small bug

* Style examples, add example using functional component to print

* Added style tip about page orientation

* Added functional ComponentToPrint example, added a styling pitfall

* Add pitfall example regarding printing component arrays (#323)

* Upgrade all `devDependencies`

* Change class-only error to link how to use functional components

* Fix print to PDF filename not working in all major browsers

#391

* Add to README about known issues when printing from mobile WebViews
@MatthewHerbst
Copy link
Owner

Published in v2.14.0. Please let me know if you run into this again, and thanks for the help everyone

geektalent1010 added a commit to geektalent1010/reactjs-print that referenced this issue Oct 26, 2022
* Add `logMessages` function, fix small bug

* Style examples, add example using functional component to print

* Added style tip about page orientation

* Added functional ComponentToPrint example, added a styling pitfall

* Add pitfall example regarding printing component arrays (#323)

* Upgrade all `devDependencies`

* Change class-only error to link how to use functional components

* Fix print to PDF filename not working in all major browsers

MatthewHerbst/react-to-print#391

* Add to README about known issues when printing from mobile WebViews
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants