Issue with Maintaining Summernote Design When Converting to PDF using Dompdf

Hi everyone, I'm currently working on a project where I use Summernote to create rich-text content and store it in a database (in a column called content). The problem arises when I attempt to convert the content into a PDF using Dompdf.

While the content displays perfectly in the Summernote editor (i.e., with the correct design and formatting), once I generate the PDF, the design/formatting (such as tables, fonts, etc.) doesn't carry over, and the layout is lost. I can only see the plain text, and the formatting is not preserved.

However, when I re-edit the content using Summernote, the design is back to normal.

Steps I've Taken:

Stored Summernote HTML in a database.
Used Dompdf to convert the HTML content into a PDF.
The HTML in the database is correctly formatted, but the design is lost after converting to PDF.

What I’ve Tried:

Ensuring proper inline CSS is added to the HTML when generating the PDF.
Testing with different CSS styles for the Summernote content, but nothing seems to work.

The Problem:

The content appears as expected in Summernote but loses its design (e.g. tables, fonts) after being converted to PDF using Dompdf.
The PDF is plain text without the formatting.

Has anyone faced a similar issue? Can anyone suggest a way to preserve the Summernote design (or styles) when generating a PDF?

I would appreciate any help, suggestions, or workarounds to ensure that the content generated in Summernote is perfectly replicated in the PDF output.

Thanks in advance!

Izak00

1 year ago

Level 2

Hello! As for the fonts, in dompdf you need to set it in PHP:

use Dompdf\Options;
$options = new Options();
$options->set('defaultFont', 'Helvetica');
$dompdf = new Dompdf($options);

That way you can use a custom font.

I played around a bit and found out the tables are rendered, but no default styling is applied. You would need to set in using CSS. For example, I've managed to set a border for the table and make it take up entire width of the page by adding:

style="width:100%;border:1px solid black;"

I guess what is rendered by Summernote is fine for browsers, while Dompdf is limited to certain option you would need to read about or explore them. A long-term solution would be to account for the differences between html rendered by Summernote and the Dompdf ready html.

1 like

Please or to participate in this conversation.