9

I'm using jsPDF to generate a pdf on client-side. With the function doc.save('filename.pdf') I can download it. Now I need to save it on the server, so I'm sending the pdf data with .ajax() and receiving it with a PHP script but the images on the generated pdfURL doesn't show (http://mydomain/tmp/test.pdf); only shows the text.

Can you give me a hand please?

My js code:

//doc.save('test.pdf');  WORKS WELL
var pdf = doc.output();
$.ajax({
  method: "POST",
  url: "inc/test.php",
  data: {data: pdf},
}).done(function(data){
   console.log(data);
});

The PHP script:

<?php
if(!empty($_POST['data'])){

    $data = $_POST['data'];
    print_r($data);

    file_put_contents( "../tmp/test.pdf", $data );
} else {
    echo "No Data Sent"; 
}
exit();
?>

This is the pdf generated after the php scripting proccess: http://control.edge-cdn.com.ar/tmp/test.pdf

And this is the generated with the doc.save() function: http://control.edge-cdn.com.ar/repo/all.pdf Regards!

nlopez
  • 528
  • 1
  • 6
  • 14
  • So test.pdf does open as a pdf, it just contains only text with broken images? – Daniel Von Fange Jun 18 '15 at 14:52
  • Are you opening the two pdfs (the one from the server, and the one saved using js) with the same software, on the same computer? – ianis Jun 18 '15 at 14:53
  • -> Can you generate using js a pdf file from the doc.output(); datas ? Maybe it's that method that's responsible for that bug (and the doc.save() maybe ok)... – ianis Jun 18 '15 at 14:55
  • @lanis Rieuf I'm opening both with the same software (browser and adobe reader) – nlopez Jun 18 '15 at 14:55
  • @DanielVonFange this is the pdf generated after the php scripting proccess: http://control.edge-cdn.com.ar/tmp/test.pdf And this is the generated with the doc.save() function: http://control.edge-cdn.com.ar/repo/all.pdf – nlopez Jun 18 '15 at 14:56
  • Seems that there is normally 6 images on the PDF (4 in 600x500 and 2 in 600x400). That's it? edit: a bit late ;) – ianis Jun 18 '15 at 15:00
  • @IanisRieuf I hope not. I am optimistic of finding a solution or an alternative way to do it! – nlopez Jun 18 '15 at 15:02
  • A strange thing it that the working pdf is lighter than the broken one... @nlopez : apparently, they solved a similar problem here! hope it works for you: http://stackoverflow.com/questions/22485931/image-in-generated-pdf-corrupts-pdf-sent-to-server?answertab=active#tab-top – ianis Jun 18 '15 at 15:03
  • @IanisRieuf thanks, I've just tried it with no good news. I tried removing + character, replacing + with whitespace, and the other way around – nlopez Jun 18 '15 at 15:39

3 Answers3

23

SOLUTION:

I was trying to send the pdf data as binary. I just base64 encode the string, send it and them decode that on the php.

JS: 

    var pdf = btoa(doc.output()); 
    $.ajax({
      method: "POST",
      url: "inc/test.php",
      data: {data: pdf},
    }).done(function(data){
       console.log(data);
    });

PHP:

if(!empty($_POST['data'])){
$data = base64_decode($_POST['data']);
// print_r($data);
file_put_contents( "../tmp/test.pdf", $data );
} else {
echo "No Data Sent";
}
exit();
nlopez
  • 528
  • 1
  • 6
  • 14
2
var reader = new window.FileReader();
reader.readAsDataURL(doc.output("blob"));
reader.onloadend = function () 
{
    ...
    method: 'POST',
    data: {
        attachment: reader.result
    }
    ...
}
Alexandr Sulimov
  • 1,894
  • 2
  • 24
  • 48
2

JS

var pdf =doc.output(); 
    var data = new FormData();
    data.append("data" , pdf);
    var xhr = new XMLHttpRequest();
    xhr.open( 'post', 'inc/test.php', true ); 
    xhr.send(data);

PHP

if(!empty($_POST['data'])){
    $data = $_POST['data'];
    $fname = "test.pdf"; 
    $file = fopen("test/pdf/" .$fname, 'r'); 
    fwrite($file, $data);
    fclose($file);
} else {
    echo "No Data Sent";
}
Suwarnakumar Kanapathipillai
  • 375
  • 3
  • 6