jsPDF Integration

I started this out, but be aware of limitations on text clarity. Next step is to convert the image to PDF. Not too hard, but gotta move on to some other things now.


U should concider these instead tbh:


https://docraptor.com/
https://pdflayer.com/product

Self hosted: (on a docker host, f.ex.: https://sloppy.io/ )
https://hub.docker.com/r/traumfewo/docker-wkhtmltopdf-aas/
https://github.com/rposborne/wkhtmltopdf-heroku

Other alternatives for reporting:
https://jsreport.net/

1 Like

Nice documentation,

For me I just want to get a PDF of an invoice that could have a logo.

Don´t know anything about API, code, … but if you have some time and tell where to start I could take a look.

Thanks man.

Bests.

@soeren @mishav @ryanck

If you look at what I did with my implementation, you can just use jsPDF to convert the image to a PDF file, and return it to an imageuploader / string in bubble.

I cant continue on it right now but feel free to collaborate on my preliminary implementation where it takes a bubble report page and creates an image.

Hi there,

I think you´ve set the page as private since I cannot see what you´ve created.

Thanks man.

If anyone is available I would be happy to work with. I´m not a coder but I can help with anything related to this thing.

Have a good day mates.

Did you get any luck with this @jameslusk ?

Just tried the one on the link below and works great. The only problem is that I don´t know how to store it on the database so we can send with the email, also I don´t know how to change the filename and lastly the first time you click on the download button it does not load any data inside the PDF.

Hello guys,

I´ve been trying to make a plugin of this HTML to PDF using the https://www.html2pdfrocket.com/

So for now here´s what it looks like:


And the code inside the body:

   package com.mypackage;
 
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.net.MalformedURLException;
import java.net.URL;
import java.net.URLConnection;
import java.net.URLEncoder;
 
public class RocketAPI {
 
    /**
     * Rocket Java API Example
     * Run thru commandline 
     * Param 1: APIKey
     * Param 2: URL or HTML add quote if you have spaces. use single quotes instead of double
     * Param 3: Any extra params you want to add i.e &extra1=value&extra2=value
     * 
     */
 
    static String BaseURL="http://api.html2pdfrocket.com/pdf";
 
    public static void main(String[] args) {
        String API="<API>";
        String Value="<URL>";
        String FileName="<FileName>";
        String ExtraParams="";
        if(args.length>0) API=args[0];
        if(args.length>1) Value=args[1];
        if(args.length>2) FileName=args[2];
        if(args.length>3) ExtraParams=args[3];
        getFile(API,Value,FileName,ExtraParams);
    }
 
    private static void getFile(String APIKey,String value,String Filename,String ExtraParams){
        URL url;
        String Params="";
        try {
            if(ExtraParams!=null&&!"".equals(ExtraParams)){
                Params=ExtraParams;
                if(!Params.substring(0,1).equals("&")){
                    Params="&"+Params;
                }
            }
             
            value=URLEncoder.encode(value,java.nio.charset.StandardCharsets.UTF_8.toString() );
            value+=Params;
 
            // Validate parameters
            if(APIKey==null||"".equals(APIKey)) throw(new Exception("API key is empty"));
            if(Filename==null||"".equals(Filename)) throw(new Exception("Filename is empty"));
 
            // Append parameters for API call
            url = new URL(BaseURL+"?apikey="+APIKey+"&value="+value);
         
            // Download PDF file
            URLConnection connection = url.openConnection();
            InputStream Instream = connection.getInputStream();
 
            // Write PDF file 
            BufferedInputStream BISin = new BufferedInputStream(Instream);
            FileOutputStream FOSfile = new FileOutputStream(Filename);
            BufferedOutputStream out = new BufferedOutputStream(FOSfile);
             
            int i;
            while ((i = BISin.read()) != -1) {
                out.write(i);
            }
 
            // Clean up
            out.flush();
            out.close();
            System.out.println("File "+Filename+" created");
 
        } catch (MalformedURLException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }catch (Exception e){
            e.printStackTrace();
        }
    }
}

I don´t even know what this does but when initializing the call I get this:

Is it good or bad?, am I going in the right path?

1 Like

Hey @ryanck

I`m sorry for not being able to respond so fast.

You are trying to use JAVA code (not javascript) in the message body. I don`t really understand why you are doing that. Also, the message body should not contain javascript either, only a JSON object (structured data).

Try the following.

  1. Make sure your report page is visible for non-logged in users. You can make a “report” page which is public, and populating the data based on the URL data. Example. mybubbleapp.com/publicreportpage/?reportid=234345345345

  2. Create a HTML block on the reportpage with the following code:
    /**

    • html: HTML string to convert to PDF

    • savePdf: Callback for saving PDF

    • Opens the PDF in a new tab, and returns it as a data URI
      */
      function pdfRocket(html, savePdf) {
      var self = this;

      self.save = savePdf;
      self.req = new XMLHttpRequest();

      var url = “http://api.html2pdfrocket.com/pdf”;
      var apiKey = “ABCD-1234”;

      // Additional parameters can be added here
      var data = “apikey=” + apiKey + “&value=” + encodeURIComponent(html);

      self.req.onload = function(event) {
      self.reader = new FileReader();

          self.reader.addEventListener("loadend", function() {
      
                 // Open in new tab
                 window.open(self.reader.result, "_blank");
                 
                 // return data URI
                 return self.reader.result;
          });
          
          self.reader.readAsDataURL(self.req.response);
      

      };

      self.req.open(“POST”, url, true);
      self.req.setRequestHeader(‘Content-type’, ‘application/x-www-form-urlencoded’);
      self.req.responseType = “blob”;

      self.req.send(data);
      }

After it works you can make the report page secure in one of the following ways.

Either:
-Making sure that the reportpage only is available to be opened for XX minutes. Either by checking timestamp on page load. Plus running a scheduled workflow daily to delete all expired ones.

OR (if you need report to be available for a long time):
-require two datastrings to access the report a unique-id for the reportdata and a secret-key. Or just generate a long hash string. The good thing with using unique-id and secret-key is that you can detect when someone tries multiple times to access a report and you can mitigate further requests from same user.


Note that using javascript means your API key will be visible and if you are worried about another HTML to PDF Rocket customer grabbing it and coding their own service, you should use a server side approach.

2 Likes

@ryanck How’d you do with this? @gurun does your solution work?

Hi there,

I haven´t achieved anything man and this code did not work for me (I´m pretty sure I need some knowledge to get this going and not a code problem). Thought that I was going to be capable of getting something working but it´s kind of difficult for me.

I think that the best way to go is joining forces together, hehe.

2 Likes

Hey guys.

I suggest you use one of the third party PDF generators if this is too technical. They are pretty reasonable for pricing, number of generated PDFs. When Ive achieved a better approach I will let you know.

2 Likes

Hey Guys,
I used the code mentioned in the top post and it worked for me.
However, when i try to use a more recent version, i see this error on the preview page:

The only change i made was to use version 2.0.0 as per

In fact, I cant get it to run with any version after 2.0.0

Screen Shot 2022-09-05 at 5.00.02 PM

Any ideas how to get a newer version to work ?

hi i have been struggling for days. does anybody know how to make just one page landscape? ive tried these and just cant get one page to be landscape they all turn
doc = new jsPDF();
{
doc.addPage(‘l’, ‘ls’, ‘a4’);
doc.addPage();

}
doc.output(‘dataurlnewwindow’);

doc = new jsPDF();

{
doc.addPage(null, ‘l’);
doc.addPage();

}
doc.output(‘dataurlnewwindow’);