search

Nicholaiii / handlebars-pdf

Render PDF from handlebars
7 stars 4 forks source link

Changing PDF Properties #1

Open iamgokul opened 7 years ago

iamgokul commented 7 years ago

Can we change the properties of the pdf like linespacing, font-family, etc... I tried changing the font-family in default options. But it didnt work out.

Thanks in advance.

Nicholaiii commented 7 years ago

You can use inline style (eg <p style="line-height: 90%; font-family: Helvetica">Hello world</p>), or a style tag in the <head>, whichever you prefer. You have full CSS support.

iamgokul commented 7 years ago

Can we add watermark to this pdf?

Nicholaiii commented 7 years ago

I suggest you try a CSS background, either on a containing element or 

@page {
  background: url('./watermark.png')
}
capndave commented 6 years ago

I'm able to adjust much of the style - font-family, font-size, background-color, etc, but for some reason I'm unable touse pdf-handlebars to:

  1. Float a div to the right (maybe because float is a reserved word in javascript), and

  2. Use CSS grid.

Is there something I'm missing? A template of this is at [https://codepen.io/capndavet/pen/eMmdJV], which works fine but doesn't use handelbars-pdf. Relevant code is below.

  <style>
    html, body {
      font-family: "Open Sans", Arial, sans-serif;
   }
   .title-main {
     text-align: center;
  }
  .grid {
    display: grid;
    grid-template-columns: 300px 1fr 1fr; 
    font-size: 24px;
    text-align: left;
  }
  .grid-title {
    font-weight: bold;
  }
  .grid-content {
    grid-column: 2/4;
  }
  .float-right {
    float: right; 
  }
</head>
<body>
    <h1 class="title-main">Pull Sheet</h1>
    <p>
        <span>Feb 17th, 1977, 2:23am</span>  
        <span class="float-right">Red Desk Lane: 1</span>
    </p>
    <div class="grid">
        <p class="grid-title">Primary Property:</p>
        <p class="grid-content">123456</p>
        <p class="grid-title">Additional Properties:</p>
        <p class="grid-content">
            <span>123456<br></span>
            <span>567890<br></span>
        </p>
    </div>
</body>
Nicholaiii commented 6 years ago

This is strange to me. We've successfully used Bootstrap 3 with this and that's definitely using float. Have you tried with !important? I'm not the sharpest CSS guru out there, but that seems to make silly things be less silly sometimes.

capndave commented 6 years ago

Does your package rely on Phantom.js, perchance? I found this discussion about Phantom.js's inability to deal with css grid and some other style elements. I'll try bootstrap!

capndave commented 6 years ago

Also, any advice on how to call bootstrap? It doesn't seem to be working when I include a ref to local bootsrap js and css files from the template head!

Nicholaiii commented 6 years ago

Yes, it's using Phantom to render. I'll push an update after the weekend sometime that will make it a lot easier to include local files. A little makeover is due anyway.