2

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.

Vaishali
  • 117
  • 1
  • 2
  • 9
  • 1
    Possible duplicate of [Print Background colours in Chrome](http://stackoverflow.com/questions/2392366/print-background-colours-in-chrome) – Alexander O'Mara May 12 '16 at 03:57
  • 1
    yes. -webkit-print-color-adjust:exact; is mentioned as an answer. I added that to my html page. But still my bootstrap controls like progress bar is appearing colourless in pdf. They are not visible at all. – Vaishali May 12 '16 at 04:08
  • 1
    Use Fullpage screen capture to convert to image and then print. https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl – Giri May 12 '16 at 04:55

5 Answers5

3

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

Xinchao
  • 2,929
  • 1
  • 24
  • 39
1

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.

Nick Gatzouli
  • 376
  • 2
  • 8
  • 1
    But this works only for the hosted sites. Not for the sites run from localhost. Is it right ? – Vaishali May 12 '16 at 04:14
  • 1
    Yes, I'm afraid that this is for hosted sites. However, you can still try an _offline_ solution which is **Adobe Acrobat DC**. Take a look here: https://acrobat.adobe.com/us/en/acrobat/how-to/convert-html-to-pdf.html – Nick Gatzouli May 12 '16 at 05:15
1

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

Sunil Garg
  • 14,608
  • 25
  • 132
  • 189
Priyatham Raj
  • 11
  • 3
1

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.

ric
  • 11
  • 1
-1

GoFullPage - Full Page Screen Capture — works great for this case.

Alexander Shtang
  • 1,819
  • 4
  • 15
  • 24