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!
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
<head>
<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">
</head>
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)"]
});
...
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
$(selector).functionName()
$(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