PDF generator (jsPDF)

Created a nice software using SpiderBasic ? Post you link here !
User avatar
eddy
Posts: 124
Joined: Thu Mar 27, 2014 8:34 am

PDF generator (jsPDF)

Post by eddy »

- In this sample, I'm loading dynamically a JS script (jsPDF plugin : https://github.com/MrRio/jsPDF)
- this plugin provides some PDF functions. (preview, generate, export, convert from HTML)

Remark: I didn't use the minified version of this plugin because there's a conflict when SpiderBasic is in debug mode.


Code: Select all

Procedure CloseWindowEvent()
  CloseWindow(EventWindow())
EndProcedure

Procedure ScriptLoaded()
  DisableGadget(1,#False)
EndProcedure 

Procedure LoadScript(script$, *func)
  !$.getScript(v_script$,p_func);
EndProcedure 

Procedure GadgetEvents()
  
  Select EventGadget()      
    Case 1 
      ;save PDF     
      Protected txt$=GetGadgetText(20)
      !var doc = new jsPDF();                                                     
      
      !doc.text(20, 20, v_txt$);  //write text
      
      !doc.setDrawColor(0);
      !doc.setFillColor(255, 0, 0);
      !doc.rect(100, 140, 10, 110, 'F'); // filled red square
      
      !doc.setLineWidth(2);
      !doc.line(20, 240, 60, 230); // line 
      
      !doc.addPage();  //add new page
      !doc.setFontSize(24);
      !doc.setFontType("italic");
      !doc.setTextColor(0,255,0);
      !doc.text(20, 20, 'jsPDF plugin');  
      !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())
  
  CompilerIf #PB_Compiler_OS <> #PB_OS_Web
    Repeat
      Event = WaitWindowEvent()
    Until Event = #PB_Event_CloseWindow
  CompilerEndIf
EndIf

LoadScript("https://rawgit.com/MrRio/jsPDF/master/dist/jspdf.debug.js",@ScriptLoaded())   ;loading plugin asynchronously...
Last edited by eddy on Fri Jun 05, 2015 7:41 pm, edited 1 time in total.
JaviCervera
Posts: 4
Joined: Sat May 30, 2015 12:34 pm

Re: PDF generator (jsPDF)

Post by JaviCervera »

Where does it put the generated "Test.pdf" file? It doesn't seem to save anything on OS X.
User avatar
eddy
Posts: 124
Joined: Thu Mar 27, 2014 8:34 am

Re: PDF generator (jsPDF)

Post by eddy »

JaviCervera wrote:Where does it put the generated "Test.pdf" file? It doesn't seem to save anything on OS X.
It's not an OSX bug. I coded this program with an old beta version of SpiderBasic. :mrgreen:
It was broken because of recent naming rule change : :arrow: http://forums.spiderbasic.com/viewtopic ... +name#p832

I fixed my code.
JaviCervera
Posts: 4
Joined: Sat May 30, 2015 12:34 pm

Re: PDF generator (jsPDF)

Post by JaviCervera »

Yeah, works wonderfully now. Thank you!
MarkOtt
Posts: 14
Joined: Thu Sep 14, 2017 12:59 pm

Re: PDF generator (jsPDF)

Post by MarkOtt »

The actual jsPDF version 1.3 does not work with Spiderbasic 2.2

The last working version i found is jsPDF 1.2.61 , but it displays images with poor quality.

It can be found at:
https://github.com/MrRio/jsPDF/releases
For online linking at:
https://cdnjs.cloudflare.com/ajax/libs/ ... f.debug.js

Many greetings. Markus
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: PDF generator (jsPDF)

Post by Peter »

MarkOtt wrote:The actual jsPDF version 1.3 does not work with Spiderbasic 2.2
try this one:

Code: Select all

Procedure CloseWindowEvent()
  CloseWindow(EventWindow())
EndProcedure

Procedure ScriptLoaded()
  DisableGadget(1, #False)
EndProcedure 

Procedure GadgetEvents()
  
  Select EventGadget()      
      
    Case 1 
      
      ; save PDF     
      Protected txt$ = GetGadgetText(20)

      !var doc = new jsPDF();                                                     
      
      !doc.text(20, 20, v_txt$);  //write text
      
      !doc.setDrawColor(0);
      !doc.setFillColor(255, 0, 0);
      !doc.rect(100, 140, 10, 110, 'F'); // filled red square
      
      !doc.setLineWidth(2);
      !doc.line(20, 240, 60, 230); // line 
      
      !doc.addPage();  //add new page
      !doc.setFontSize(24);
      !doc.setFontType("italic");
      !doc.setTextColor(0,255,0);
      !doc.text(20, 20, 'jsPDF plugin');  
      !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://rawgit.com/MrRio/jsPDF/master/dist/jspdf.debug.js"], function(jsPDF) {
!   window.jsPDF = jsPDF;
ScriptLoaded()
! });   
Greetings ... Peter
falsam
Posts: 280
Joined: Mon May 05, 2014 9:49 pm
Location: France
Contact:

Re: PDF generator (jsPDF)

Post by falsam »

It's a good idea to refresh this topic. Thank.

➽ Windows 11 - JDK 1.8 - SB 2.40 - Android 13
http://falsam.com

Sorry for my poor english
MarkOtt
Posts: 14
Joined: Thu Sep 14, 2017 12:59 pm

Re: PDF generator (jsPDF)

Post by MarkOtt »

Peter, thank you very much, this works very well.

Here is another example showing the generated PDF in a WebGadget. It works very well in Firefox, but not in IE, Edge, Chrome.
It seems that blob and string data of doc.output() works in Firefox only. Or am I overseeing something?

Code: Select all


Procedure CloseWindowEvent()
  CloseWindow(EventWindow())
EndProcedure

Procedure ScriptLoaded()
  DisableGadget(1,#False)
  Debug "Script loaded."
EndProcedure

Procedure GadgetEvents()
  
  Select EventGadget()    
      
    Case 1
      Debug "Button pressed."
      
      OpenWindow(99, 200, 200, 600, 600, "Show PDF in WebGadget")
      WebGadget(98,  10, 10, 580, 580, "")
      BindEvent(#PB_Event_CloseWindow, @CloseWindowEvent())

      Protected txt$=GetGadgetText(20)
      
      !   var doc = new jsPDF();    
      
      !   doc.setProperties({
      !     title: 'PDF Title - - - - - - - - - - - - - - - - - - - ',
      !     subject: 'Info about PDF',
      !     author: 'PDFAuthor',
      !     keywords: 'generated, javascript, web 2.0, ajax',
      !     creator: 'My Company'
      !   });
      
      !   doc.text(20, 20, v_txt$);  //write text
     
      !   doc.setDrawColor(0);
      !   doc.setFillColor(255, 0, 0);
      !   doc.rect(100, 140, 10, 110, 'F'); // filled red square
     
      !   doc.setLineWidth(2);
      !   doc.line(20, 240, 60, 230); // line
     
      !   doc.addPage();  //add new page
      !   doc.setFontSize(24);
      !   doc.setFontType("italic");
      !   doc.setTextColor(0,255,0);
      !   doc.text(20, 20, 'jsPDF plugin');
      
      
;       ;save PDF     (works in all browsers)
;       !   doc.save('Test.pdf');
      
;       ;open PDF in new tab     (works in Firefox only ?)
;       !   doc.output('dataurlnewwindow');
      
;       ;open PDF in same tab      (works in Firefox only ?)
;       !   doc.output('datauri');
      
      ;open PDF in WebGadget      (works in Firefox only ?)
      Protected outstring.s = ""
      ;! v_outstring = doc.output('datauristring');   //works in Firefox only
      ! v_outstring = doc.output('bloburl');          //works in Firefox only
      Debug outstring
      SetGadgetText(98, outstring)
      ! window.URL.revokeObjectURL(v_outstring);      //if bloburl
      
  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

;load jsPDF
! require(["https://rawgit.com/MrRio/jsPDF/master/dist/jspdf.debug.js"], function(jsPDF) {
!   window.jsPDF = jsPDF;
    ScriptLoaded()
! }); 
Regards. Markus
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Re: PDF generator (jsPDF)

Post by Dirk Geppert »

Unfortunately the JS link no longer works. Maybe this is the correct project: https://github.com/MrRio/jsPDF ?
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: PDF generator (jsPDF)

Post by Peter »

Dirk Geppert wrote:Unfortunately the JS link no longer works.
the current version is 2.3.0. Here is the adjusted code:

Code: Select all

Procedure CloseWindowEvent()
  CloseWindow(EventWindow())
EndProcedure

Procedure ScriptLoaded()
  DisableGadget(1, #False)
EndProcedure

Procedure GadgetEvents()
  
  Select EventGadget()     
      
    Case 1
      
      ; save PDF     
      Protected txt$ = GetGadgetText(20)
      
      !var doc = new jsPDF();                                                     
      
      !doc.text(20, 20, v_txt$);  //write text
      
      !doc.setDrawColor(0);
      !doc.setFillColor(255, 0, 0);
      !doc.rect(100, 140, 10, 110, 'F'); // filled red square
      
      !doc.setLineWidth(2);
      !doc.line(20, 240, 60, 230); // line
      
      !doc.addPage();  //add new page
      !doc.setFontSize(24);
      ! // doc.setFontType("italic"); doesn't work anymore?
      !doc.setTextColor(0,255,0);
      !doc.text(20, 20, 'jsPDF plugin'); 
      !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()
! });
Post Reply