CODEWITHSUNDEEP
htmlcssprintingcolorsbackground-color
tush
tush

Reputation: 71

Front end printing emulator `paper.css` not working with background color

I am using a solution, called paper.css, to emulate a printed text which is type-set in html using these css rules.

I noticed that when I create an element with background-color, and then use my Chromium Print menu to "Save as PDF", the background color becomes white, just like the whole page.

How one can print the html file to pdf and still keep the background color?

A MMW, based on the A4 example in the project's repository, is this:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.4.1/paper.css">
  <style>
    @page {
      size: A4
    }
  </style>
</head>

<body class="A4">

  <!-- Each sheet element should have the class "sheet" -->
  <!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
  <section class="sheet padding-10mm">

    <!-- Write HTML just like a web page -->
    <article style="background-color: red;">This is an A4 document.</article>

  </section>

</body>

</html>

Compare with the printed PDF:

enter image description here

Upvotes: 1

Views: 255

Answers (1)

Rob Moll
Rob Moll

Reputation: 3453

Make sure you have the More settings > Options > Background graphics option checked in the Chrome print dialog.

Upvotes: 1

Related Questions