Exporting Reports from the HTML WYSIWYG Tool EditorJS

Convert the JSON output of Editor.js to a PDF with Carbone

Download Template

Download data sample

  • Template type document docx medium
  • Carbone min. v5.0.0+
  • Features array filter
  • Target editorjs conversion custom

Objectives

Convert the JSON output of Editor.js to a PDF seamlessly wiht Carbone. This example manages

  • Header, title, subtitle
  • Paragraph, Html
  • List, table
  • Annex, image

Solution

The best approach is to display table rows conditionally, depending on the type of data being shown (e.g., title, image, etc.).

Here’s how you can achieve this using Carbone:

  1. Create a global table

    Create a table with a single column that spans the full width of the page. Configure it with no borders for better integration.

  2. Create a row per style

    For each style (e.g., paragraph, header, list, table...), define a row to specify the format settings, such as the font, indentation and spacing of the paragraph on the Carbone tag `{d.blocks[i].data.text}

  3. Test the type to keep the line if it matches

    In each cell, use ifEQ to test the type and control the display : {d.blocks[i].type:ifEQ('paragraph'):keep(row)}

And there you go!

Trusted by 600+ paid customers in 40+ countries

Finance
Healthcare
Public
Retail
Industries
Energy
Software
Telecom
1dior.png
22thales.png
23younited.png
2danfoss.png
3cma-cgm.png
3illumina.svg
4KparK.png
6scalingo.png
7defense.png
8bmw.png
8telus.png
bestseller.png
flagship_bioscience.png
insly.png
ninox.png
sodexo.png