I'm working on a webpage that has a different "print to PDF" result (after Ctrl+P -> Save to PDF in Chrome) than the original web display by using #media print in the CSS code.
I'm using a variable font with the parameter font-variation-settings:"wght", but the generated PDF seems to ignore this parameter when used in #media print.
Yet, when using the Chrome tool "Inspector>Rendering>Print emulate CSS media type", changes of this parameter are taken into account in the displayed web page!
Looks like the problem comes from the Ctrl+P interface, any ideas on how to handle this?
Thank you in advance.
Please see https://bugs.chromium.org/p/chromium/issues/detail?id=1070089 - this should be fixed now, you may want to retest with a recent Chrome Canary build and see if the issue is indeed gone.
Related
I am familiar with the data grid in the UWP plat form. we tried to provide the support for printing the results in sheets. we have faced the hurdles while we print the content. In the print preview panel the content looks like blurry to the view, but in the printed sheet the contents look like normal. could your share your ideas to resolve this.
Thanks in advance for your updates.
It seems it is by design.
In UWP, we use the PrintManager to inform Windows that an application wishes to participate in printing.
When we run the ShowPrintUIAsync() method, it will run the "PrintDialog.exe" that the print Preview page will be shown.
We can use the "Inspect" to test the content of the print Preview page. From the following image, we can see the content is a Image control that render by the XAML.
For the performance, it does not render as clear as the printting result. We can not change that.
If you do want this feature, you are welcome to ask on UserVoice.
I have a report page that when you view the page there is a minimal gap between the charts and the headers:
But if the user prints or print previews the page there is a HUGE gap between the some (but not all) of the elements:
I've tried setting Chrome up to use the print media type in the Developer Tools which applies the correct styles but doesn't result in that gap. Can anyone suggest a way to troubleshoot this?
Short Version:
I am using Chrome 27.0.1453.94 on Windows 7 Pro
I go to http://www.try-phpbb.com/30x/ using Chrome
I select Print... | Save as PDF
The print preview looks nothing like the web page - layout, links, fonts all wrong.
Why?
How can I fix this to make the PDF styled the same way as the web site?
Long Version:
I am a member of a secure forum (ie have to log in for access), which is base on the phpBB forum template (https://www.phpbb.com/). Our forum will be cleared of all threads and posts soon to make room for the next round of subscribers.
We have been given permission (even encouraged) by the moderators to download the contents of each topic/thread/post and write them into PDF files so we can keep referencing them in the future. We have to do this ourselves, and I volunteered to do the work as I have an IT background. But its proving harder than I thought.
I was hoping to do the following this process...
Download and add "Stylish" Chrome Extension
(https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe)
Add CSS code to Stylish to modify the appearance of the forum pages ready for PDF migration
In Chrome use Print | Save as PDF option to save styled page as a PDF doc
For multi-page forums, repeat this process for each page and then use PDFMate (or similar) to concatenate the PDF docs together into a single long PDF.
Steps 1, 2 and 4 are working perfectly, but step 3 is not.
The print preview in Chrome screws up the appearance of the forum pages. Layout styling is lost, fonts are completely different, links are missing or look terrible. For example, try printing this page (http://www.try-phpbb.com/30x/) - it looks completely different in print preview to how it looks in the browser.
Is there something I can do to fix this? Can I somehow give the print preview version some CSS code to restyle it? Anyone know why this would be happening?
Or alternatively, can you suggest another solution to convert HTML to PDF? I have tried Chrome extensions "iWeb2x" and "Send to Google Drive", but with no success - because the forum is secured, the PDF file they create is the forum's Login page, not the forum thread page I'm currently looking at.
Any help greatly appreciated - thanks.
Have a look here, maybe it's helpful
http://www.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/
You can set your own css style for the printed page.
Hope it helps, regards
I had a case, where if the iframe is display:none, the css is not loaded, thus not printing the correct CSS style. You can fix it with visibility:hidden; And size zero
I have been experiencing the weirdest problem, that I can't even begin to troubleshoot. It is important that the webpage in this project I am working is 100% printable. As you can see the signature field below and the note field (with the string "erererer") shows great in Google Chromes print preview but not when I actually print it out using the Chrome browser. In fact, the note field just prints out the border and nothing else (looks like a white empty div with a border) and the signature field prints out everything but the actual signature. When I use google chrome to save the document as a PDF and then print it out directly from the PDF everything prints perfect. When I use firefox to print, the signature area prints perfect, but the note problem remains of it only printing the outter border.
I would greatly appreciate any suggestions on how to begin to fix this or any input on why this may be happening.
Many thanks in advance!
If you need accurate & reliable printability, going iText and PDF is a solution. You can render the page as PDF and it will show in the browser, and then print exactly as specified.
HTML is often inexact, has marks (page numbers etc) from the browser, and can be glitchy.
iText (latest versions) are available open-source, or commercially. There's also an older version available free. See: What is latest version of itext that is not AGPL?
As for your note field: maybe there's something weird with backgrounds, non-standard styling? , or fonts that aren't present? Try making it a plain vanilla table.
I have a web database app that runs in IE7+ (customer requirement) It is a shop control system that needs to send forms to the printer.
I've got #media print css set up to format the form properly when going from screen to printer. Mostly everything has been working fine.
I've recently added some jquery code to handle placing a footer at the bottom of the page with a variable size table above it. That works as expected except occasionally the footer is thrown to a second page on the printer even though it displays in the proper place on the screen.
So, my question is how can I get print preview to allow me to inspect the document elements so I can figure out what's throwing things off? I've got the IE Developer Toolbar, but it doesn't seem to give access to the print preview.
Thanks for any help.
I would suggest throwing different colored borders on your elements in your #media print css file. This is always useful in debugging layout issues and should show up in the print preview.