PDF generator (jsPDF)

Created a nice software using SpiderBasic ? Post you link here !
Post Reply
Dirk Geppert
Posts: 250
Joined: Fri Sep 22, 2017 7:02 am

Re: PDF generator (jsPDF)

Post by Dirk Geppert »

Thx Peter!

⠀⠀⠀(⠀(
⠀⠀⠀⠀)⠀)
⠀⠀⠀........
⠀⠀|⠀⠀⠀⠀|]
⠀⠀\⠀⠀⠀⠀/
⠀⠀⠀`----'
Top
User avatar
Peter
Posts: 1032
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:
Contact Peter

Re: PDF generator (jsPDF)

Post by Peter »

Dirk Geppert wrote:Thx Peter!

⠀⠀⠀(⠀(
⠀⠀⠀⠀)⠀)
⠀⠀⠀........
⠀⠀|⠀⠀⠀⠀|]
⠀⠀\⠀⠀⠀⠀/
⠀⠀⠀`----'
Thank you for your donation! :)
Top
loulou2522
Posts: 52
Joined: Wed Mar 18, 2015 5:52 am

Re: PDF generator (jsPDF)

Post by loulou2522 »

Can someone have examples of including table or html in jspdf ?
Thanks
Top
User avatar
Peter
Posts: 1032
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:
Contact Peter

Re: PDF generator (jsPDF)

Post by Peter »

loulou2522 wrote: ↑Thu Aug 26, 2021 6:08 amCan someone have examples of including table or html in jspdf ?
And once again: To be able to help you, you need to give us more information.

It would be an advantage if you could provide a small sample code to show what you want to do.
Top
loulou2522
Posts: 52
Joined: Wed Mar 18, 2015 5:52 am

Re: PDF generator (jsPDF)

Post by loulou2522 »

Here is my needed.

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()
! });
When i launch this programm i obtain just a blue screen without any error
Top
User avatar
Peter
Posts: 1032
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:
Contact Peter

Re: PDF generator (jsPDF)

Post by Peter »

You were close to it. :-)

1.) JS is case sensitive. replace all "For (var" with "for (var"

2.) replace "CreateHeaderRow" with "createHeaders"
Top
loulou2522
Posts: 52
Joined: Wed Mar 18, 2015 5:52 am

Re: PDF generator (jsPDF)

Post by loulou2522 »

THanks that's work
What if I want the table to print in the PDF on each page starting at 10 from the top of the page and ending at 20 from the bottom of the page ?
I try whith that but it seems not working

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);
      ! });
            ! });
         
      !};
directly from launching in browser

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>
it's work well
Top
loulou2522
Posts: 52
Joined: Wed Mar 18, 2015 5:52 am

Re: PDF generator (jsPDF)

Post by loulou2522 »

Cab someone help me to solve that's problem ? all my eveolpment is blocked by that, and i f don't solve it i will be onliged to stop
Thanks
Top
User avatar
Peter
Posts: 1032
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:
Contact Peter

Re: PDF generator (jsPDF)

Post by Peter »

In newer versions of jsPDF there is no longer a fromHTML() function.

In your first example you are using the latest version of jsPDF (currently 2.3.1). In your second example you are using version 1.3.2.

Here is an example for version 1.3.2 using fromHTML():

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()
! });
Top
loulou2522
Posts: 52
Joined: Wed Mar 18, 2015 5:52 am

Re: PDF generator (jsPDF)

Post by loulou2522 »

Hi Peter,
Is-it possible to control row height with doc.table ?
Thnaks
Top
Post Reply

Return to “Showcase”