DEV Community

IderaDevTools
IderaDevTools

Posted on

A Step-by-Step Guide to Froala WYSIWYG Editor PDF Export

#froala #programming #webdev #javascript

As a tech-savvy user or entry-level developer, you’re always on the lookout for tools that can streamline your workflow and enhance your productivity. Today, we’re excited to introduce you to the Froala WYSIWYG Editor and its powerful PDF export feature.

Froala is a feature-rich, user-friendly text editor that allows you to create and format content with ease. Whether you’re writing blog posts, drafting technical documentation, or designing marketing materials, Froala’s intuitive interface and robust functionality make it a valuable asset in your content creation arsenal.

In this blog post, we’ll dive deep into the PDF export feature of the Froala WYSIWYG Editor, guiding you step-by-step on how to set it up and leverage it to your advantage.

Key Takeaways:

  • Froala Editor offers a built-in PDF export feature for professional documents.

  • Relies on html2pdf.js library for functionality.

  • Customize PDF output with page size, orientation, margins, and more.

  • CSS page-break rules give you precise control over document layout.

  • Boosts productivity for bloggers, developers, and content teams.

Downloading and Setting Up Froala WYSIWYG Editor

To get started, you’ll need to download the Froala WYSIWYG Editor. You can visit the pricing page and choose the plan that best suits your needs. Whether you’re a solo developer or part of a larger team, Froala offers a range of licensing options to accommodate your requirements. If you want to test the editor first, you can also take advantage of the free trial option.

Once you’ve downloaded and installed the Froala WYSIWYG Editor, it’s time to set it up. The process is straightforward and can be completed in a few simple steps:

  1. Include the necessary CSS and JavaScript files in your HTML document.

  2. Initialize the Froala Editor by adding the appropriate HTML element and JavaScript code.

  3. Customize the editor’s appearance and functionality by configuring the available options.

Here’s an example of how you can set up the Froala WYSIWYG Editor:

<!DOCTYPE html>
<html>

<head>
    <title>Froala WYSIWYG Editor</title>
    <!-- Include Froala CSS -->
    <link href="{{editor__download__folder}}/css/froala_editor.pkgd.min.css" rel="stylesheet"
        type="text/css" />
</head>

<body>
    <!-- HTML element where the editor will be initialized -->
    <div id="editor">
        <p>This is the initial content of the editor.</p>
    </div>


    <!-- Include Froala Editor JS files -->
    <script type="text/javascript" src="{{editor__download__folder}}/js/froala_editor.pkgd.min.js"></script>

    <script>
        // Initialize the Froala Editor
        new FroalaEditor('#editor');
    </script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

This example demonstrates the basic setup for the Froala WYSIWYG Editor. You can further customize the editor by adding additional configurations to suit your specific needs.

Exploring the PDF Export Feature

Now that you have the Froala WYSIWYG Editor set up, let’s dive into the PDF export feature. This powerful functionality allows you to seamlessly convert your content into a professional-looking PDF document, making it easy to share, print, or archive your work.

Since we are using the packaged version of Froala “froala_editor.pkgd.min.js“, this feature is included by default.

If you’re using the basic version of Froala (froala_editor.min.js), you’ll need to include the Froala PDF export plugin in your project.

<script type="text/javascript" src="{{editor__download__folder}}/js/froala_editor.min.js"></script>
<script type="text/javascript" src="{{editor__download__folder}}/js/plugins/print.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Make sure to include the “print” plugin in the list of enabled plugins:

new FroalaEditor('#editor', { 
       pluginsEnabled: ['print'],
});
Enter fullscreen mode Exit fullscreen mode

With the plugin in place, you can now add the PDF export button to your Froala Editor toolbar. Here’s an example of how to do that:

new FroalaEditor('#editor', { 
       pluginsEnabled: ['print'],
       toolbarButtons: ['getPDF'],
});
Enter fullscreen mode Exit fullscreen mode

This configuration will add an “Export PDF” button to your Froala Editor toolbar. However, users will still be unable to export the content as PDF documents. That’s because the PDF export feature depends on the “html2pdf.js“ open-source library. You’ll need to include this library in your project as well. The “html2pdf.js” script must be included before the Froala scripts.

    <!-- Include js2htm library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js"
        integrity="sha512-YcsIPGdhPK4P/uRW6/sruonlYj+Q7UHWeKfTAkBW+g83NKM+jMJFJ4iAPfSnVp7BKD4dKMHmVSvICUbE/V1sSw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- Include Froala Editor JS files -->
    <script type="text/javascript" src="{{editor__download__folder}}/js/froala_editor.min.js"></script>
    <script type="text/javascript" src="{{editor__download__folder}}/js/plugins/print.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Note that, as mentioned on html2pdf.js site, there have been some issues reported with the latest version of html2pdf.js (v0.10), so it’s recommended to use version 0.9.3 for now.

Exporting Content as PDF

Now that you have the PDF export feature set up, let’s walk through the process of exporting your content as a PDF document.

  1. Add Content to the Froala Editor: Start by adding your desired content to the Froala WYSIWYG Editor. This could be a blog post, a technical guide, or any other type of content you want to export as a PDF.

  2. Click the PDF Export Button: Once you’ve finished editing your content, locate the “PDF Export” button in the Froala Editor toolbar and click it.

That’s it! You’ve successfully exported your Froala WYSIWYG Editor content as a PDF document. This feature is particularly useful when you need to share your work with others, print it, or archive it for future reference.

Export Editor Content to PDF Programmatically

The Froala Editor’s Print plugin provides a toPDF() method that allows you to export the editor’s content to a PDF document programmatically. This can be useful when you want to trigger the PDF export after a specific event, such as when the editor initializes.

Here’s an example of how to export the content to PDF right after the editor is initialized:

// Initialize the Froala Editor
        new FroalaEditor('#editor', {
            pluginsEnabled: ['print'],
            toolbarButtons: ['getPDF'],
        }, function () {
            this.print.toPDF();


        });
Enter fullscreen mode Exit fullscreen mode

The toPDF() method uses the default Froala PDF export options.

Customizing the PDF Export

If you want to customize the exported PDF, such as setting the orientation to portrait instead of landscape, you can use the html2pdf option provided by the Froala Editor.

The html2pdf option returns a function that gives you access to the html2pdf.js Worker object. With this object, you can trigger any html2pdf methods. Read more about how to use it in the html2pdf documentation.

You can use this object to configure the PDF settings and then export the editor’s content following this format editor.opts.html2pdf().set(configration).from(editor.el).save();.

Here’s an example:

        // Initialize the Froala Editor
        new FroalaEditor('#editor', {
            pluginsEnabled: ['print'],
            toolbarButtons: ['getPDF'],
        }, function () {

            let editor = this;

            editor.opts.html2pdf().set({
                margin: [10, 20],
                html2canvas: { useCORS: !0 },
                filename: 'new name.pdf',
                jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
            }).from(editor.el).save();
        });
Enter fullscreen mode Exit fullscreen mode

In this example, we’re setting the following PDF options:

  • margin: Specifies the PDF margins in points.

  • html2canvas.useCORS: Enables CORS (Cross-Origin Resource Sharing) for the HTML2Canvas library, which is used to capture the editor’s content.

  • filename: Sets the name of the exported PDF file.

  • jsPDF: Configures the PDF document settings, such as the unit, page format, and orientation.

After setting the options, we use the from(editor.el) method to specify the editor element as the content to be converted to PDF, and then call the save() method to generate and download the PDF file.

Remember, setting the configuration incorrectly could result in an empty or incorrectly formatted PDF file, so be cautious when customizing the PDF export.

Adding Page Breaks

The html2pdf.js library automatically adds page breaks based on your CSS styles. You can use the break-before, break-after, and break-inside CSS properties to control where the page breaks should occur.

For example, you can add a page break before a specific element by applying the break-before: always style to it. This ensures that the element starts on a new page when you export the content to PDF.

Additionally, you can add the html2pdf__page-break class to any element, and html2pdf.js will insert a page break after that element. This is a legacy feature, but it can still be useful in some cases.

To summarize, make sure to add the appropriate CSS page break styles to your content. When you export the Froala Editor’s content to PDF, html2pdf.js will automatically insert the page breaks based on your CSS rules, resulting in a well-formatted PDF document.

Troubleshooting Common PDF Export Issues

Even with the correct setup, you may encounter issues when using the PDF export feature in Froala. Here are some common problems and fixes:

  • Blank or Empty PDF Output

  • Cause: Missing or misconfigured html2pdf.js library.

  • Fix: Ensure you’re using version 0.9.3 (not 0.10, which has known issues) and that it’s loaded before Froala scripts.

  • Incorrect Page Breaks

  • Cause: Missing CSS break rules.

  • Fix: Use break-before, break-after, or break-inside CSS properties. For finer control, apply the html2pdf__page-break class to elements.

.my-section {
  break-before: always; /* Forces this section to start on a new page */
}
Enter fullscreen mode Exit fullscreen mode

  • Fonts or Images Not Loading

  • Cause: CORS restrictions.

  • Fix: Enable html2canvas: { useCORS: true } in your configuration and ensure external assets allow cross-origin requests.

editor.opts.html2pdf().set({
  html2canvas: { useCORS: true }
}).from(editor.el).save();
Enter fullscreen mode Exit fullscreen mode

  • File Name Issues

  • Cause: No filename specified in config.

  • Fix: Add filename: ‘yourfile.pdf’ to the html2pdf().set() options.

  • Large File Sizes

  • Cause: High-resolution images or uncompressed content.

  • Fix: Reduce image size before uploading, or use Filestack transformations to optimize assets before export.

Conclusion

In this blog post, we’ve explored the powerful PDF export feature of the Froala WYSIWYG Editor. By following the step-by-step guide, you now know how to download and set up the Froala Editor, as well as how to leverage the PDF export functionality to streamline your content creation and sharing workflows.

Whether you’re a tech-savvy user or an entry-level developer, the Froala WYSIWYG Editor and its PDF export feature can be a valuable asset in your content creation toolkit. By mastering these tools, your users will be able to create professional-looking documents, enhance your productivity, and deliver high-quality content to their audience.

Originally published on the Froala blog.

Top comments (0)