Issue with Image rendering.

[Amarnath510]

Thanks for the Plugin. It made my work so easy. I am facing only one issue. I have created a pdf for a HTML table and added an image as header. It is working fine. But I have another feature where I need to send the pdf via email. So I am doing the following,

1. Create a pdf on the client side side using jspdf and jspdf-autotable.
2. Sending it to server (NodeJS) using FormData.
3. When I send the image all the elements in the pdf are intact except the header image which is not getting rendered properly.

Clinet side: (AngularJS)

  var doc = pdfService.createPdf( ... ); // This steps gives me the pdf in expected format.
  var fileName = "Expense_Reporting.pdf";
  var uploadData = new Blob([doc.output()], {
                    type: 'application/pdf'
                });
  var formData = new FormData();
  formData.append("pdf", uploadData, fileName);
  var request = new XMLHttpRequest();
  request.open("POST", "/mailapi/sendmail");
  request.send(formData);

Server Side (NodeJS)

var fs = require('fs');
var formidable = require('formidable');
// other code 
form.parse(req, function(err, fields, files) {
   mFileName = files.pdf.name;
   mFileType = files.pdf.type;
});

form.on('end', function() {
   mFilePath = this.openedFiles[0].path;
}

When I open the file it looks as below,

Note: When the same pdf doc is downloaded on client side it working great.

[simonbengtsson]

Interesting problem! Although I don't think this is an issue with this plugin, but rather jspdf or node. Some further questions, does it work if you download the pdf first and then upload it with the node script you posted? If not, do you see the same problem uploading a pdf not generated by jspdf?

[simonbengtsson]

Closing this for now. Feel free to reopen with more info.

[ChandniGondhiya]

@Amarnath510 and @simonbengtsson .. I am exactly facing the same issue with same client/server code. Can you help me, if you are able to resolve it at your end. I can post my code if you want.

[simonbengtsson]

I posted some questions above that might make it easier to understand this issue. Can you take a look at those and write your findings herr?

[ChandniGondhiya]

@simonbengtsson : Thanks for your time. After rigorous R n D, I came to solution using var data = doc.output("blob"); instead of var data = new Blob([doc.output()], { type: 'application/pdf' }); But with this solution, I am able to generate pdf and save on server successfully only once. The second time I try to call createPDF(), I get _http_outgoing.js:335 throw new Error('Can\'t set headers after they are sent.'); Not able to understand where is the loophole.

[simonbengtsson]

Interesting! Let me know if you find a solution!

[ChandniGondhiya]

@simonbengtsson : I found the solution as below from : http://www.codediesel.com/nodejs/processing-file-uploads-in-node-js/

var express = require('express'); var app = express(); var fs = require('fs-extra'); var http = require('http'); var bodyParser = require('body-parser'); var util = require('util'); var formidable = require('formidable'), form = new formidable.IncomingForm();

http.createServer(function(req,res){ if (req.url == '/' && req.method.toLowerCase() == 'post') {
var form = new formidable.IncomingForm(); form.parse(req, function(err, fields, files) { res.writeHead(200, {'content-type': 'application/pdf',"Access-Control-Allow-Origin": "*"}); res.write('received upload:\n\n'); res.end(util.inspect({fields: fields, files: files})); });

     form.on('end', function(fields, files) {         

        var temp_path = this.openedFiles[0].path;           
        var file_name = this.openedFiles[0].name;            
        var new_location = 'C:/wamp/www/pdfs/';

        fs.copy(temp_path, new_location + file_name, function(err) {  
            if (err) {
                console.error(err);
            } else {
                console.log("Successfully copied to destination folder!")
            }
        });
    }); 
    return;
}

}) .listen(3000, function() { console.log('Server app listening'); });

With this code, I am able to perfectly save a pdf generated by jsPDF and html2canvas on the server.

[sureeebabu]

how to Generate same autoTable in two different places