Question

187

How encode in base64 a file generated with jspdf and html2canvas?

rated 0 times [ 194] [ 7] / answers: 1 / hits: 35780 / 8 Years ago, mon, july 25, 2016, 12:00:00

i'm trying encode the document generated in the attached code, but nothing happens, not generate error but neither encodes the file, and the ajax request is never executed

what is the correct way?

    html2canvas(document.getElementById(workAreaModel), {

    onrendered: function(canvas)

    {

        var img = canvas.toDataURL(image/png);

        var doc = new jsPDF(l, pt, letter);

        doc.addImage(img, 'JPEG',20,20);

        var fileEncode = btoa(doc.output());

         $.ajax({

              url: '/model/send',

              data: fileEncode,

              dataType: 'text',

              processData: false,

              contentType: false,

              type: 'GET',

              success: function (response) {

                   alter('Exit to send request');

              },

              error: function (jqXHR) {

                  alter('Failure to send request');

              }

             });

    }

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kaceyr

Add To Favorites

Follow

Total Points: 510

Total Questions: 97

Total Answers: 116

Location: Solomon Islands

Member since Fri, Oct 8, 2021

3 Years ago

kaceyr questions

1 TypeScript Expected 1 arguments, but got 2

Wed, Dec 15, 21, 00:00, 2 Years ago

1 How to show input fields based on mat radio button selection in angular material

Wed, Jun 24, 20, 00:00, 4 Years ago

1 How to change variable value in index.html based on the environment in angular

Thu, Feb 6, 20, 00:00, 4 Years ago

1 react dynamic import using a variable doesn't work

Sat, Oct 12, 19, 00:00, 5 Years ago

1 puppeteer-cluster: queue instead of execute

Mon, Aug 5, 19, 00:00, 5 Years ago

View All

answered 8 Years ago halie · Accepted Answer

First, jsPDF is not native in javascript, make sure you have included proper source, and after having a peek on other references, I think you don't need btoa() function to convert doc.output(), just specify like this :

 doc.output('datauri');

Second, base-64 encoded string is possible to contain ' + ' , ' / ' , ' = ', they are not URL safe characters , you need to replace them or you cannot deal with ajax .

However, in my own experience, depending on file's size, it's easy to be hell long ! before reaching the characters' length limit of GET method, encoded string will crash your web developer tool first, and debugging would be difficult.

My suggestion, according to your jquery code

processData: false,

contentType: false

It is common setting to send maybe File or Blob object,
just have a look on jsPDF, it is availible to convert your data to blob :

doc.output('blob');

so revise your code completely :

var img = canvas.toDataURL(image/png);

var doc = new jsPDF(l, pt, letter);

doc.addImage(img, 'JPEG',20,20);

var file = doc.output('blob');

var fd = new FormData();     // To carry on your data  

fd.append('mypdf',file);



$.ajax({

   url: '/model/send',   //here is also a problem, depends on your 

   data: fd,           //backend language, it may looks like '/model/send.php'

   dataType: 'text',

   processData: false,

   contentType: false,

   type: 'POST',

   success: function (response) {

     alter('Exit to send request');

   },

   error: function (jqXHR) {

     alter('Failure to send request');

   }

});

and if you are using php on your backend , you could have a look on your data information:

echo $_FILES['mypdf'];