Re: PDF generator (jsPDF)
Posted: Wed Feb 17, 2021 11:17 am
Thx Peter!
⠀⠀⠀(⠀(
⠀⠀⠀⠀)⠀)
⠀⠀⠀........
⠀⠀|⠀⠀⠀⠀|]
⠀⠀\⠀⠀⠀⠀/
⠀⠀⠀`----'
⠀⠀⠀(⠀(
⠀⠀⠀⠀)⠀)
⠀⠀⠀........
⠀⠀|⠀⠀⠀⠀|]
⠀⠀\⠀⠀⠀⠀/
⠀⠀⠀`----'
Thank you for your donation!Dirk Geppert wrote:Thx Peter!
⠀⠀⠀(⠀(
⠀⠀⠀⠀)⠀)
⠀⠀⠀........
⠀⠀|⠀⠀⠀⠀|]
⠀⠀\⠀⠀⠀⠀/
⠀⠀⠀`----'
And once again: To be able to help you, you need to give us more information.loulou2522 wrote: ↑Thu Aug 26, 2021 6:08 amCan someone have examples of including table or html in jspdf ?
Code: Select all
Procedure CloseWindowEvent()
CloseWindow(EventWindow())
EndProcedure
Procedure ScriptLoaded()
DisableGadget(1, #False)
EndProcedure
Procedure GadgetEvents()
Select EventGadget()
Case 1
!var generateData = function(amount) {
!var result = [];
!var Data = {
!coin: "100",
!game_group: "GameGroup",
!game_name: "XPTO2",
!game_version: "25",
!machine: "20485861",
!vlt: "0"
!};
!For (var i = 0; i < amount; i += 1) {
!Data.id = (i + 1).toString();
!result.push(Object.assign({}, Data));
!}
!return result;
!};
!function createHeaders(keys) {
!var result = [];
!For (var i = 0; i < keys.length; i += 1) {
!result.push({
!id: keys[i],
!name: keys[i],
!prompt: keys[i],
!width: 65,
!align: "center",
!padding: 0
!});
!}
!return result;
!}
!var headers = CreateHeaderRow(["id","coin","game_group","game_name","game_version","machine","vlt"]);
!var doc = new jsPDF();
!doc.table(1, 1, generateData(100), headers, { autoSize: true });
!doc.save('Test.pdf');
Case 2
; convert HTML To PDF
EndSelect
EndProcedure
If OpenWindow(0, 100, 100, 300, 200, "PDF Generator powered by jsPDF")
EditorGadget(20, 5, 5, 280, 150)
SetGadgetText(20,"jsPDF" + #CRLF$ + "Generate PDF files in client-side JavaScript.")
ButtonGadget(1, 5, 160, 190, 32, "Export")
DisableGadget(1, #True)
BindEvent(#PB_Event_Gadget, @GadgetEvents())
BindEvent(#PB_Event_CloseWindow, @CloseWindowEvent())
EndIf
!require(["https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"], function(jsPDF) {
!window.jsPDF = jsPDF.jsPDF;
ScriptLoaded()
! });
Code: Select all
!function demoHTML() {
! !var doc = new jsPDF();
! source = '<html><body><p>test HTML string</p></body></html>';
! margins = { top : 80, bottom : 60, left : 60,width : 522 };
! // all coords And widths are in jsPDF instance's declared units
! // 'inches' in this Case
! doc.fromHTML(source, // HTML string Or DOM elem ref.
! margins.left, // x coord
! margins.top, { // y coord
! 'width' : margins.width, // max width of content on PDF
! },
! function(dispose) {
! // dispose: object With X, Y of the last line add To the PDF
! // this allow the insertion of new lines after html
! doc.save('fileNameOfGeneretedPdf.pdf');
! }, margins);
! });
! });
!};
Code: Select all
<Head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<!--<script src="http://raw.githack.com/MrRio/jsPDF/master/dist/jspdf.umd.js"></script>
<!-->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<Head>
<Body>
<a href="javascript:demoFromHTML()" class="button">Run Code</a>
<div id="content">
<h1>
We support special element handlers. Register them with jQuery-style.
</h1>
</div>
<script>
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
; source = $('#content')[0];
source = "<div class='window' style='max-width: 400px'>" +
" <div class='title-bar'>" +
" <div class='title-bar-text'>Another window with contents</div>" +
" <div class='title-bar-controls'>" +
" <button aria-label='Minimize'></button>" +
" <button aria-label='Maximize'></button>" +
" <button aria-label='Close'></button>" +
" </div>" +
" </div>" +
" <div class='window-body'>" +
" <menu role='tablist' aria-label='Sample Tabs'>" +
" <button role='tab' aria-controls='tab-A' aria-selected='true'>Instruction</button>" +
" <button role='tab' aria-controls='tab-B'>Example</button>" +
" <button role='tab' aria-controls='tab-C'>More instruction</button>" +
" <button role='tab' aria-controls='tab-D' disabled>Disabled Tab</button>" +
" </menu>" +
" <!-- the tab content -->" +
" <article role='tabpanel' id='tab-A'>" +
" <b>Creating tabs</b>" +
" <p>" +
" To create a tab, use a <code>menu</code> element with <code>role='tablist'</code>." +
" Then for the tab titles, use a <code>button</code> with <code>role='tab'</code>, and set the <code>aria-controls</code> attribute to" +
" the corresponding id of the element with <code>role='tabpanel'</code>." +
" </p>" +
" <p>" +
" Read more at <a href='https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role' target='_blank'>MDN Web docs - ARIA: tab role</a>" +
" </p>" +
" </article>" +
" <article role='tabpanel' id='tab-B' hidden>" +
" <b>More...</b>" +
" <p>This tab contains a GroupBox</p>" +
" <fieldset>" +
" <legend>Today's mood</legend>" +
" <div class='field-row'>" +
" <input id='radio17' type='radio' name='fieldset-example2'>" +
" <label for='radio17'>Claire Saffitz</label>" +
" </div>" +
" <div class='field-row'>" +
" <input id='radio18' type='radio' name='fieldset-example2'>" +
" <label for='radio18'>Brad Leone</label>" +
" </div>" +
" <div class='field-row'>" +
" <input id='radio19' type='radio' name='fieldset-example2'>" +
" <label for='radio19'>Chris Morocco</label>" +
" </div>" +
" <div class='field-row'>" +
" <input id='radio20' type='radio' name='fieldset-example2'>" +
" <label for='radio20'>Carla Lalli Music</label>" +
" </div>" +
" </fieldset>" +
" </article>" +
" <article role='tabpanel' id='tab-C' hidden>" +
" <b>Disabling tabs</b>" +
" <p>Simply add a <code>disabled</code> attribute on the tab.</p>" +
" </article>" +
" <article role='tabpanel' id='tab-D' hidden>" +
" <b>Disabled Tab</b>" +
" <p>This tab is disabled, so you should not be able to read this.</p>" +
" </article>"+
" <section class='field-row' style='justify-content: flex-end'>" +
" <button>OK</button>" +
" <button>Cancel</button>" +
" </section>" +
" </div>" +
"</div>"
alert(source);
// we support special element handlers. Register them with jQuery-style
// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
// There is no support for any other type of selectors
// (class, of compound) at this time.
specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
'#bypassme': function (element, renderer) {
// true = "handled elsewhere, bypass text extraction"
return true
}
};
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
// all coords and widths are in jsPDF instance's declared units
// 'inches' in this case
pdf.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
'width': margins.width, // max width of content on PDF
'elementHandlers': specialElementHandlers
},
function (dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save('Test.pdf');
}, margins
);
}
</script>
</body>
Code: Select all
Procedure CloseWindowEvent()
CloseWindow(EventWindow())
EndProcedure
Procedure ScriptLoaded()
DisableGadget(1, #False)
EndProcedure
Procedure demoHTML(HTML.s)
! var pdf = new jsPDF('p', 'pt', 'letter');
! specialElementHandlers = {
! // element with id of "bypass" - jQuery style selector
! '#bypassme': function (element, renderer) {
! // true = "handled elsewhere, bypass text extraction"
! return true
! }
! };
! margins = {
! top: 80,
! bottom: 60,
! left: 40,
! width: 522
! };
! // all coords and widths are in jsPDF instance's declared units
! // 'inches' in this case
! pdf.fromHTML(
! v_html, // HTML string or DOM elem ref.
! margins.left, // x coord
! margins.top, { // y coord
! 'width': margins.width, // max width of content on PDF
! 'elementHandlers': specialElementHandlers
! },
! function (dispose) {
! // dispose: object with X, Y of the last line add to the PDF
! // this allow the insertion of new lines after html
! pdf.save('Test.pdf');
! }, margins
! );
EndProcedure
Procedure GadgetEvents()
Select EventGadget()
Case 1
ShowDebugOutput()
demoHTML("<h1>Hello World</h1>")
Case 2
; convert HTML To PDF
EndSelect
EndProcedure
If OpenWindow(0, 100, 100, 300, 200, "PDF Generator powered by jsPDF")
EditorGadget(20, 5, 5, 280, 150)
SetGadgetText(20,"jsPDF" + #CRLF$ + "Generate PDF files in client-side JavaScript.")
ButtonGadget(1, 5, 160, 190, 32, "Export")
DisableGadget(1, #True)
BindEvent(#PB_Event_Gadget, @GadgetEvents())
BindEvent(#PB_Event_CloseWindow, @CloseWindowEvent())
EndIf
! require(["https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"], function(jsPDF) {
! window.jsPDF = jsPDF;
ScriptLoaded()
! });