Tips
Comprehensive guide to integrating PagedJS with Ruby on Rails
Comprehensive guide to integrating PagedJS with Ruby on Rails
Comprehensive guide to integrating PagedJS with Ruby on Rails
Create a nice PDF with Ruby On Rails and PagedJS
Are you looking to create stunning print layouts directly from your web application? Integrating PagedJS with Ruby on Rails can help you achieve high-quality HTML to PDF conversions effortlessly. This guide walks you through the process of setting up PagedJS in your Rails application and highlights the benefits of using an API for dynamic PDF generation.
Why Choose PagedJS for HTML to PDF Conversion?
PagedJS is a powerful JavaScript library designed to handle complex page layouts. It allows you to convert HTML content into beautifully formatted PDF documents, making it an ideal choice for applications that require print-ready outputs. By integrating PagedJS with Ruby on Rails, you can leverage the flexibility of an API to create dynamic, customized PDFs for your users.
Step-by-Step Integration of PagedJS with Ruby on Rails
Set up a Ruby On Rails project
Check out the Ruby On Rails documentation to set up a project.
Add the PagedJS CDN
For our views to be able to load the PagedJS module through CDN, we add the following line to the file application.html.erb
<head>
...
<%= yield :head %> // <-- Add this
...
</head>Then in our views, at the top of the file, we can add the following code to load the PagedJS module
<% content_for :head do %>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<
The CDN url comes from the official documentation of PagedJS
Create a view
Create a new view with the following code
<% content_for :head do %>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<% end %>
<div class="App">
<section class="chapter" id="about-page">
<h2 class="title" id="label-title">About</h2>
<p class="text">Lorem ipsum dolor sit amet consectetur adipiscing elit. Duis nibh tortor</p>
</section>
<section class="chapter" id="chapter1-page">
<h2 class="title">Chapter 1</h2>
<p class="text">Lorem ipsum dolor sit amet</p>
</section>
<section class="chapter" id="chapter2-page">
<h2 class="title">Chapter 2</h2>
<p class="text">consectetur adipiscing elit</p>
</section>
<section class="chapter" id="chapter3-page">
<h2 class="title">Chapter 3</h2>
<p class="text">Duis nibh tortor, pellentesque eu suscipit vel</p>
</section>
</div>Styling the page
Create a new css file app/assets/stylesheets/main.css
Add a require of this new css file in app/assets/stylesheets/application.css
*= require_tree .
*= require_self
*= require main // <-- add this
Add the following code to your view, at the top of the file, to load the css file with the view
<% content_for :head do %>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<%= stylesheet_link_tag "main", "data-turbo-track": "reload" %> // <-- add this
<
Now you are ready to add style for PagedJS to create your beautiful PDF.
Add this code to your css file
This is just general styling for your page, it has nothing to do with PagedJS.
Now in this same css file, add the following code to separate each chapter on a new page.
.chapter {
break-after: page;
}Add the following to format the page
@page {
size: 8.5in 11in;
margin: 20mm 25mm;
}And finally, add the following to add text at the top of the first page
@page:first {
@top-center { content: 'START'; }
}Display custom content through "named strings"
What if you want to display the name of the chapter you are in at the bottom of the PDF ?
Let's add the following css.
@page {
@bottom-center { content: string(title); }
}
.chapter > h2 {
string-set: title content(text);
}The first block, is used to tell PagedJS to add content in the margin of the PDF, at the bottom center position (check all the positions available).
The second block, is used to make available the title of the chapter to PagedJS, we use the named strings feature from PagedJS to give the content of the h2 tag from every chapter into the named string "title".
Generate PDFs
Now that you have created a webpage that displays as a PDF using PagedJS, you can easily generate PDF files out of this page using Doppio.
What's next
Be sure to check out the PagedJS documentation to see all the features available and how you can use them to render beautiful PDFs !
Are you looking to create stunning print layouts directly from your web application? Integrating PagedJS with Ruby on Rails can help you achieve high-quality HTML to PDF conversions effortlessly. This guide walks you through the process of setting up PagedJS in your Rails application and highlights the benefits of using an API for dynamic PDF generation.
Why Choose PagedJS for HTML to PDF Conversion?
PagedJS is a powerful JavaScript library designed to handle complex page layouts. It allows you to convert HTML content into beautifully formatted PDF documents, making it an ideal choice for applications that require print-ready outputs. By integrating PagedJS with Ruby on Rails, you can leverage the flexibility of an API to create dynamic, customized PDFs for your users.
Step-by-Step Integration of PagedJS with Ruby on Rails
Set up a Ruby On Rails project
Check out the Ruby On Rails documentation to set up a project.
Add the PagedJS CDN
For our views to be able to load the PagedJS module through CDN, we add the following line to the file application.html.erb
<head>
...
<%= yield :head %> // <-- Add this
...
</head>Then in our views, at the top of the file, we can add the following code to load the PagedJS module
<% content_for :head do %>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<
The CDN url comes from the official documentation of PagedJS
Create a view
Create a new view with the following code
<% content_for :head do %>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<% end %>
<div class="App">
<section class="chapter" id="about-page">
<h2 class="title" id="label-title">About</h2>
<p class="text">Lorem ipsum dolor sit amet consectetur adipiscing elit. Duis nibh tortor</p>
</section>
<section class="chapter" id="chapter1-page">
<h2 class="title">Chapter 1</h2>
<p class="text">Lorem ipsum dolor sit amet</p>
</section>
<section class="chapter" id="chapter2-page">
<h2 class="title">Chapter 2</h2>
<p class="text">consectetur adipiscing elit</p>
</section>
<section class="chapter" id="chapter3-page">
<h2 class="title">Chapter 3</h2>
<p class="text">Duis nibh tortor, pellentesque eu suscipit vel</p>
</section>
</div>Styling the page
Create a new css file app/assets/stylesheets/main.css
Add a require of this new css file in app/assets/stylesheets/application.css
*= require_tree .
*= require_self
*= require main // <-- add this
Add the following code to your view, at the top of the file, to load the css file with the view
<% content_for :head do %>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<%= stylesheet_link_tag "main", "data-turbo-track": "reload" %> // <-- add this
<
Now you are ready to add style for PagedJS to create your beautiful PDF.
Add this code to your css file
This is just general styling for your page, it has nothing to do with PagedJS.
Now in this same css file, add the following code to separate each chapter on a new page.
.chapter {
break-after: page;
}Add the following to format the page
@page {
size: 8.5in 11in;
margin: 20mm 25mm;
}And finally, add the following to add text at the top of the first page
@page:first {
@top-center { content: 'START'; }
}Display custom content through "named strings"
What if you want to display the name of the chapter you are in at the bottom of the PDF ?
Let's add the following css.
@page {
@bottom-center { content: string(title); }
}
.chapter > h2 {
string-set: title content(text);
}The first block, is used to tell PagedJS to add content in the margin of the PDF, at the bottom center position (check all the positions available).
The second block, is used to make available the title of the chapter to PagedJS, we use the named strings feature from PagedJS to give the content of the h2 tag from every chapter into the named string "title".
Generate PDFs
Now that you have created a webpage that displays as a PDF using PagedJS, you can easily generate PDF files out of this page using Doppio.
What's next
Be sure to check out the PagedJS documentation to see all the features available and how you can use them to render beautiful PDFs !
By Frédéric Llorca
June 5, 2024