HTML to PDF renderer using Prawn PDF.
Features:
Notice: render HTML documents properly is not an easy task, this gem support only some HTML tags and a small set of CSS attributes. If you need more rendering accuracy take a look at other projects like WickedPDF or PDFKit.
prawn-styled-text rewritten from scratch, finally!
Please ⭐ if you like it.
gem 'prawn-html'
(and execute bundle
)PrawnHtml.append_html
on a Prawn::Document
instance (see the examples)require 'prawn-html'
pdf = Prawn::Document.new(page_size: 'A4')
PrawnHtml.append_html(pdf, '<h1 style="text-align: center">Just a test</h1>')
pdf.render_file('test.pdf')
To check some examples with the PDF output see examples folder.
Alternative form using PrawnHtml::Instance to preserve the context:
require 'prawn-html'
pdf = Prawn::Document.new(page_size: 'A4')
phtml = PrawnHtml::Instance.new(pdf)
css = <<~CSS
h1 { color: green }
i { color: red }
CSS
phtml.append(css: css)
phtml.append(html: '<h1>Some <i>HTML</i> before</h1>')
pdf.text 'Some Prawn text'
phtml.append(html: '<h1>Some <i>HTML</i> after</h1>')
pdf.render_file('test.pdf')
HTML tags (using MDN definitions):
CSS attributes (dimensional units are ignored and considered in pixel):
style="background: #FECD08"
style="break-after: auto"
style="break-before: auto"
style="color: #FB1"
style="font-family: Courier"
style="font-size: 20px"
style="font-style: italic"
style="font-weight: bold"
<img src="image.jpg" style="height: 200px"/>
<a href="http://www.google.com/">Google</a>
style="letter-spacing: 1.5"
style="line-height: 10px"
style="list-style-type: '- '"
style="margin-bottom: 10px"
style="margin-left: 15px"
style="margin-top: 20px"
absolute
, ex. style="position: absolute; left: 20px; top: 100px"
<img src="image.jpg"/>
left
| center
| right
| justify
, ex. style="text-align: center"
underline
, ex. style="text-decoration: underline"
<img src="image.jpg" style="width: 50%; height: 200px"/>
The above attributes supports the initial
value to reset them to their original value.
For colors, the supported formats are:
color: #FB1
;color: #abcdef
;color: RGB(64, 0, 128)
;color: yellow
.Some custom data attributes are used to pass options:
data-data="2, 4, 3"
data-mode="stroke"
You can define document CSS rules inside an head tag. Example:
<!DOCTYPE html>
<html>
<head>
<title>A test</title>
<style>
body { color: #abbccc }
.green {
color: #0f0;
font-family: Courier;
}
#test-1 { font-weight: bold }
</style>
</head>
<body>
<div class="green">
Div content
<span id="test-1">Span content</span>
</div>
</body>
</html>
Sample controller's action to create a PDF from Rails:
class SomeController < ApplicationController
def sample_action
respond_to do |format|
format.pdf do
pdf = Prawn::Document.new
PrawnHtml.append_html(pdf, '<h1 style="text-align: center">Just a test</h1>')
send_data(pdf.render, filename: 'sample.pdf', type: 'application/pdf')
end
end
end
end
More details in this blogpost: generate PDF from HTML
If you use this component just star it. A developer is more motivated to improve a project when there is some interest.
Or consider offering me a coffee, it's a small thing but it is greatly appreciated: about me.
The gem is available as open-source under the terms of the MIT.