FPDF jQuery WYSIWYG Script Editor

Help / Documentation How to use editor | How to use FPDF editor jQuery plugin

This editor helps you to create a PHP script to create an FPDF. Without any experimentations. Create your PDF, copy the code and paste it into your PHP file. Voila, ready!

How to use the jQuery Plugin

This editor is a jQuery plugin. The following modules are necessary:

Info: Due to the PDF paper size this should be opened with a desktop PC. This editor is not suitable for cell phones or tablets.

The handling is very easy. Simply click on the desired FPDF element in the menu to add it.
Then drag and drop to the desired position and right-click on the element to open the context menu with the setting options.

You can add PHP script and variables too. Just use the format '{:$php_var:}'

All elements have all the settings that are specified by FPDF. Further help can be found on http://www.fpdf.org


Add jQuery, Bootstrap, jQuery Confirm, jQuery Contextmenu and FPDF Designer in the head of your document

<meta charset="utf-8">
<title>FPDF WYSIWYG Script Generator</title>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js" ></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" ></script>
  <script src="libs/jquery-contextmenu/jquery.contextmenu.min.js"></script>
  <script src="libs/jquery-confirm/jquery.confirm.min.js"></script>
  <script src="libs/jquery-wheelcolorpicker/jquery.wheelcolorpicker-3.0.5.min.js"></script>
  <script src="js/fpdf-designer-contextmenus.min.js"></script>
  <script src="js/jquery.fpdf-designer.min.js"></script>

  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >
  <link href="libs/jquery-contextmenu/jquery.contextmenu.min.css" rel="stylesheet">
  <link href="libs/jquery-confirm/jquery.confirm.min.css" rel="stylesheet">
  <link href="libs/jquery-wheelcolorpicker/jquery.wheelcolorpicker.css" rel="stylesheet">
  <link href="css/fpdf-designer-style.min.css" rel="stylesheet">

How to use

Just bind the FPDF Designer to an html element

$(YOUR SELECTOR).fpdf_designer();

Adjust your settings (for example)

$(YOUR SELECTOR).fpdf_designer({
  output_container: 'my_selector', /* standard #output_content */
  fpdf_headers: ["AddPage ('P', 'A4')", "SetAutoPageBreak (true, 10)", "SetFont ('Arial', '', 12)"]

Place your elements button

Every button needs the identifiers. (data-fpdf="ELEMENT TYPE" data-is-new-element="true")

<button class="btn btn-light fdpf-element" data-fpdf="cell" data-is-new-element="true">Cell</button>

possible values for data-fpdf: cell, multicell, text, write, rect, link, line, image, ln, setfillcolor, setdrawcolor, settextcolor


paper_width: pdf paper size width in mm
(default: 210, type: number)

paper_height: pdf paper size height in mm
(default: 290, type: number)

px_per_cm: pixels per centimeter
(default: 37.79, type: number)

px_per_mm: pixel per millimeter
(default: 3.779, type: number)

px_per_point: pixel per point
(default: 1.33, type: number)

decimals: how many decimals to use
(default: 0, type: int)

body_offset: offset if the bady should have a padding to correct the exact position
(default: 0, type: number)

pdf_top_margin: FPDF top margin
(default: 10, type: number)

pdf_left_margin: FPDF left margin
(default: 10, type: number))

pdf_right_margin: FPDF right margin
(default: 10, type: number)

ajax_url: to send the elements in json format to a script for further processing
(default: null, type: url/path)

save_url: path to the script to save the current design
(default: null, type: url/path)

load_url: path to the script to load a design
(default: null, type: url/path)

use_promt: to specifiy a design name for save and load
(default: true, type: boolean)

output_container: selector for the html element showing the output
(default: '#output_content', type: string/jquery selector))

standard_font: FPDF standard font
(default: Arial, type: string/font)

fpdf_headers: Array with header data for the FPDF script
(default: ["AddPage ('P', 'A4')", "SetAutoPageBreak (true, 10)", "SetFont ('Arial', '', 12)"], type: array)

fonts: fonts that can be used and owned by FPDF

fontsizes: fonts which can be used and owned by FPDF


fpdf.send_start: is triggered before the ajax request

fpdf.send_done: is triggered if the ajax request was successful

fpdf.send_failed: is triggered if the ajax request failed

fpdf.cleared: is triggered after the editor was cleared

fpdf.changed: is triggered after the editor has changed

fpdf.save_done: is triggered after save was successful

fpdf.save_failed: is triggered if save failed

fpdf.load_done: is triggered after load was successful

fpdf.load_failed: is triggered if load failed

Methods / Functions:


$(selector).getElements(): returns the elements object

$(selector).sendAjax(): send the elements object to an ajax request / (required options to be set: ajax_url, send format: json, content: full array of elements)

$(selector).getAjaxData(): get the data from the ajax request

$(selector).saveDesign(): save the current design (required options to be set: save_url)

$(selector).loadDesign(): load a design (required options to be set: load_url)

$(selector).clearEditor(): will clear the editor