Page 2 of 3

Re: PDF generator (jsPDF)

Posted: Wed Feb 17, 2021 11:17 am
by Dirk Geppert
Thx Peter!

⠀⠀⠀(⠀(
⠀⠀⠀⠀)⠀)
⠀⠀⠀........
⠀⠀|⠀⠀⠀⠀|]
⠀⠀\⠀⠀⠀⠀/
⠀⠀⠀`----'

Re: PDF generator (jsPDF)

Posted: Wed Feb 17, 2021 11:34 am
by Peter
Dirk Geppert wrote:Thx Peter!

⠀⠀⠀(⠀(
⠀⠀⠀⠀)⠀)
⠀⠀⠀........
⠀⠀|⠀⠀⠀⠀|]
⠀⠀\⠀⠀⠀⠀/
⠀⠀⠀`----'
Thank you for your donation! :)

Re: PDF generator (jsPDF)

Posted: Thu Aug 26, 2021 6:08 am
by loulou2522
Can someone have examples of including table or html in jspdf ?
Thanks

Re: PDF generator (jsPDF)

Posted: Thu Aug 26, 2021 10:08 am
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.

Re: PDF generator (jsPDF)

Posted: Fri Aug 27, 2021 10:55 am
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

Re: PDF generator (jsPDF)

Posted: Fri Aug 27, 2021 11:31 am
by Peter
You were close to it. :-)

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

2.) replace "CreateHeaderRow" with "createHeaders"

Re: PDF generator (jsPDF)

Posted: Fri Aug 27, 2021 1:12 pm
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

Re: PDF generator (jsPDF)

Posted: Sun Aug 29, 2021 5:11 am
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

Re: PDF generator (jsPDF)

Posted: Sun Aug 29, 2021 2:39 pm
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()
! });

Re: PDF generator (jsPDF)

Posted: Mon Aug 30, 2021 6:20 am
by loulou2522
Hi Peter,
Is-it possible to control row height with doc.table ?
Thnaks