When a website visitor uses their computer's "Microsoft Print to PDF" printer (or some other PDF printer on their computer) to print content from a website, the text of the resulting pdf is not selectable, almost as if it is a scanned image, not printed text. I came across this issue when a user of a website I managed asked about this. We had recently launched a new site and this behavior became apparent to the user. However, as I dig into it further, it doesn't appear to be specifically related to our site as I was just able to repeat it using Chrome and Microsoft's Print to PDF function. Is this pdf printer issue, CSS issue or something else?
Sample pdf (Windows 10, Chrome, Microsoft Print to PDF)
Proven solution: instead of choosing 'print to pdf', use 'save as pdf' from the drop-down list after right-clicking 'print' on the web page
It's not a problem with the CSS - this is a known bug in Microsoft's Print to PDF feature.
As of right now it is recommended that you use some other tool, such as Adobe Reader which tends to work better than Edge or other PDF readers and has a print function explained in tutorial.
Additional Material:
Microsoft Print to PDF makes text unselectable in Vector PDF and Hyperlinks unclickable.
Print to PDF generating bloated but unsearchable PDF files
Related
I have created a html page with bootstrap control and my own css. I am running the page through visual studio in chrome. I want this page to get converted into pdf with colours as it is displayed in chrome. I have not connected any printer to my system. If i give ctrl+P, my page is getting displayed without colours.
I have used 'save as pdf' extension of chrome for conversion.
It is saying 'cant access your local url'. Is there a way to print the page in the same way as it is seen in browser as a pdf
Bootstrap controls like progress bar not getting appeared in print.
Chrome “Save As PDF” works fine. You need to tick the “print background graphics” checkbox otherwise by default backgrounds are ignored.
However, the problem is that Bootstrap has included a reset for print media. What it does is to overwrite all background to white and foreground color to black, with !important.
What kills is the !important
I would recommend you to use one of the free online HTML-to-PDF conversion solutions.
Here's one for example: http://www.htmlpdf.com/
Keep in mind that some solutions may not give you the expected results. In this case just try another.
After you have found a working solution, just print the converted-HTML-to-PDF file that you downloaded.
Chrome itself acts as a pdf writer and reader, as we already know. I'm not sure why the colours are missing in the preview for printing, still, give this a try:
After Ctrl+P, you'll see the Print - Cancel options, below which there is a Destination for you to choose.
It has Recent, Local and Cloud destinations with a choice from the local ones being displayed. Go ahead and change it to Save as pdf.
Now you can save the whole webpage with the colours too.
Take a look at this
I had the same issue but found an easy solution.
Simply get the google chrome extension called : FireShot
Get it here: https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=en
It will take full page screenshot of your HTML page and even local Html pages.
Then capture the full page.
After it will lead you to a new page with saving option.
Beside “Email” I suggest you to click on “PDF”. Then it will lead you to Gmail so you can send yourself the PDF.
I don’t suggest to click on print, because in my case when I saved it, there was an issue with the pixels.
Very easy.
GoFullPage - Full Page Screen Capture — works great for this case.
So here's the story. At my company, you can access previous pay statements online via a payroll website. When you go to look at a statement, it will open the statement in-browser via a pdf viewer. When working properly, it will usually ask if you want to blank out all the data or not (which... why would you want to? the point is to look at your statement). Now, this worked fine when checking it out in Adobe Reader; you'd just click "yes, show data" and everything displays fine, it can be printed, etc. But the company decided that instead of getting Acrobat for editing pdf files, that the better (cheaper) option is to get a cheap/free alternative called "Nuance" something or other. Two users installed this program, and now the browsers open pdfs in-browser with Nuance instead of Adobe Reader. This is a problem, because Nuance doesn't show the option of hiding or showing data like Reader did; rather, it just chooses the "no" option, which results in a blank template pdf coming up.
Now, this whole problem could be solved if we could just get the browsers to use Reader to open pdf files in-browser... obviously it's not a problem if you could download the pdf, but the site doesn't seem to allow you to download the pdf files. We've tried just about everything we could think of, short of uninstalling Nuance altogether, to get IE or Chrome to open pdf files with Reader, but even with a full IE reset, it uses Nuance to open pdfs inside the browser. Changing the default program for pdfs has yielded no results, IE still uses Nuance in-browser.
Anyone have any thoughts on how to change IE or Chrome to default to using Reader to show pdf files instead of Nuance?
Thanks!
just change the default programs or applications that opens pdf files, make it the adobe reader. You'll have to configure it in Windows, the Default Programs in Control Panel. You'll have to do this in each computer.
My company has a web application that outputs a PDF which we print on label paper (stickers with product data).
Chrome is the default browser around here. Unfortunately, when we try to print from Chrome the "Fit to Page" checkbox is automatically selected. This screws up the alignment and prints data in the wrong places. If we uncheck 'Fit to Page', it prints perfectly on all machines.
If I skip the Chrome Print dialog and use the system one, it works fine on a Mac, but poorly on Windows machines.
I would really like a way to disable the "Fit to Page" option.
What I've looked at:
Printing Avery 5160 labels with FPDF - I added /ViewerPreferences << /PrintScaling /None >> to my pdf, but this article Set PDF to print with no scaling says that it's controlled by the application (Chrome in my case).
http://productforums.google.com/forum/#!topic/chrome/REy2n67B1fM --not helpful
https://code.google.com/p/chromium/issues/detail?id=158752 --not helpful
So I'm afraid that I may need to find or make a Chrome extension to do this. Before I dig into that, does anyone know if it's even possible?
Other Facts:
PDF is being generated by fpdf in php. All computers should be using latest vs of Chrome.
I hate to say this but, could you try opening the PDF in a different browser, or use a standalone PDF reader application?
Since the Chromium team has labelled this as a WontFix, Chrome simply might not suffice for your needs.
I am developing a .Net MVC 3.0 Web application. There is a part I have to display invoice details like this.
On the top right corner I need to give Print, PDF & Copy to Clipboard function.
How to add those three button with above functions. Please Help ME......
Thanks In Advance.....!!!
Note: (I added this part later). There is a whole page. But this preview invoice is just a part of page wrapped by div tag. I don't want to print the whole page. I just want give three buttons only to that invoice div tag. Thanks :)
pdf = simply link to the URL of the PDF (Or the URL that generates the PDF)
print = what are you printing? The PDF? If so, this is redundant, as a person just needs to click the PDF and can print from there. Is it to print the web page? Again, redundant, as the web browser already has a print feature.
copy to clipboard = what are you copying to clipboard? For now, this is can only be accomplished via Flash, and, likely in the future not something you can do at all. This question's answers list some options: How do I copy to the clipboard in JavaScript?
Bottom line is that the image you provided appears to be a wireframe created by an IA or UX person that doesn't understand how web pages work. Not an uncommon thing, but really this is an UX issue, not a development issue. The problem needs to be addressed by the UX team first.
UPDATE based on question's UPDATE:
Regarding only wanting to deal with the contents of a particular div, the PDF and COPY TO CLIPBOARD comments above still stand.
What changes is the PRINT option. This can get messy. You could try swapping out the CSS via JS to only display the part you want to print, then triggering a print dialogue via JS, but that's going to be somewhat messy. I'd maybe consider instead making the PRINT icon a 'PRINT FRIENDLY' icon. Upon clicking that update the CSS to only display the content you want to print. Then let users use the PRINT feature in the browser, or you could try triggering the print dialogue with another bit of JS (though I'm not sure where browsers are at in supporting you printing from JS directly).
I have a html table. Inside the table are images, links (different font colors, etc). What is the easiest way to get this exported into an ms office format (powerpoint, excel, word, pdf)? I was going to start hand writing this but figured I would throw out this question if there was any thing that would help with this conversion . . . my really low budget solution is to take a screen shot and resize to fit on a page!
You can install a PDF printer and open the html in a browser, then choose print, as if to a normal printer, and the output is converted into a pdf.
For windows you can download and install from this page:
http://www.cutepdf.com/products/cutepdf/writer.asp
This software:
http://www.cutepdf.com/download/converter.exe
http://www.cutepdf.com/download/CuteWriter.exe
For other operating systems it is probably a built in feature when you try to print.
It doesn't always work perfectly, but most of the time I can open any html files I have in adobe, and it will auto convert them to pdf and you can save, usually everything looks the way it should. You can also just open the html in word, but it doesn't work so well if you are using any css.
This page has information on transforming XML to Word XML format: http://www.linkwerk.com/pub/xml/invitation/xml2wordml/
I haven't used it, but perhaps it will be helpful.