search

parallax / jsPDF

Client-side JavaScript PDF generation for everyone.
https://parall.ax/products/jspdf
MIT License
29.23k stars 4.67k forks source link

PDF files all downloading blank when following examples in docs #2317

Closed hashoshi closed 5 years ago

hashoshi commented 5 years ago

First of all, thanks in advance for help. I am using jsPDF in my Angular app, and the pdf itself is being created, the pages are being added to the document, and it downloads, but the downloaded file is totally blank. I cannot for the life of me figure out why.

I am loading string data in from a JSON response from my server. I am stringifying it beforehand. Here is an example of the image file:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKQAAACkCAYAAAAZtYVBAAAAAklEQVR4AewaftIAAAYcSURBVO3BQW4ERxLAQLKg/3+Z62OeGmjMSC4vMsL+wVqXOKx1kcNaFzmsdZHDWhc5rHWRw1oXOax1kcNaFzmsdZHDWhc5rHWRw1oXOax1kcNaFzmsdZEfPqTylyomlScVk8pU8URlqnii8qTiicpU8URlqphU/lLFJw5rXeSw1kUOa13khy+r+CaVT6g8UfmEyhsqU8VUMalMFZ+o+CaVbzqsdZHDWhc5rHWRH36ZyhsV31QxqUwVk8pU8aTiDZUnKlPFb1J5o+I3Hda6yGGtixzWusgP/3EVk8qk8pdUnlRMKk9UnlT8PzmsdZHDWhc5rHWRH/7jVJ5UPFGZKiaVqeKNikllqphUnlRMKlPFf9lhrYsc1rrIYa2L/PDLKn5TxaTyCZWp4onKGxVvVEwq31Rxk8NaFzmsdZHDWhf54ctU/pLKVDGpTBVPKiaVqeJJxaQyVUwqU8WkMlVMKm+o3Oyw1kUOa13ksNZFfvhQxb+p4ptU3qh4Q+UTKm9U/Jcc1rrIYa2LHNa6yA8fUpkqnqj8poqp4o2KJypTxaTypOKNijdUpoonKlPFpPJGxScOa13ksNZFDmtd5IdfpjJVfJPKE5WpYqr4hMpU8URlqniicrOKbzqsdZHDWhc5rHUR+wcfUHlSMalMFZPKk4onKlPFN6m8UfFE5UnFpPKkYlKZKiaVJxVPVKaKTxzWushhrYsc1rrID19WMalMFW9UvFExqbxR8Zcqnqi8ofJE5UnFpPKk4psOa13ksNZFDmtd5IfLVEwq31TxROUTFU9Upoo3Kp6ovFExqUwVT1Smik8c1rrIYa2LHNa6yA9/TOVJxVTxRGWq+ETFpDJVTCpPVKaKSWWqeKLypOKJypOKJypTxTcd1rrIYa2LHNa6yA9fpvKk4onKk4o3VKaKSWWqmCreUHmiMlW8UfGXVKaK33RY6yKHtS5yWOsiP3xZxROVqWKqeKNiUvmEyhsVb6h8QuVJxZOKSWWqeENlqvjEYa2LHNa6yGGti/zwZSpTxROVT1R8U8WkMlW8oTJVfFPFpPKk4o2Kv3RY6yKHtS5yWOsiP3yo4hMVb6g8qXijYlKZKiaVqWJSmSomlanijYpJZaqYVD6h8pcOa13ksNZFDmtd5IcPqUwVn1B5Q+WNikllqphU3qj4TSpTxaQyVUwqT1T+TYe1LnJY6yKHtS5i/+AXqTyp+CaVJxVvqEwVb6hMFZPKVPFE5UnFpDJVTCpTxaQyVfymw1oXOax1kcNaF7F/8ItUpoo3VJ5UfEJlqphUnlRMKlPFpDJVPFGZKiaVJxVvqEwVk8pU8U2HtS5yWOsih7Uu8sOHVKaKqWJSmSqeVEwqb6g8qXhS8URlqphUPlExqUwVk8obKlPFpPKXDmtd5LDWRQ5rXeSHP1bxhspU8UTlScWk8qRiUpkqJpUnFU9U3lCZKiaVqeITFZPKVPGJw1oXOax1kcNaF/nhl6lMFZPKVDFV/KaKJypTxaTypOKJylQxqTyp+EsqU8U3Hda6yGGtixzWusgPX6YyVUwqU8UTlScVU8Wk8k0qTyomld+k8obKE5WpYlL5TYe1LnJY6yKHtS5i/+A/TOU3VUwqTyo+ofKkYlKZKt5QeaPiNx3WushhrYsc1rrIDx9S+UsVTyqeqDypmFTeUJkqJpVPqLyhMlV8QmWq+KbDWhc5rHWRw1oX+eHLKr5J5Q2VqeINlScVk8pUMalMFZ9QeaPijYpJZaqYVKaKTxzWushhrYsc1rrID79M5Y2Kb1KZKt5QmVTeqHiiMlVMKm+ofFPFXzqsdZHDWhc5rHWRH/7PVXxTxaQyqfymikllqniiMlVMKv+mw1oXOax1kcNaF/nhP65iUnmi8qRiqphUpoo3VJ6oTBWTyjepTBWTyl86rHWRw1oXOax1kR9+WcVNKv5NFZPKVDGpPKl4ojJVTCo3Oax1kcNaFzmsdZEfvkzlL6k8UZkqJpUnFW+o/KaKSeVJxRsqU8VfOqx1kcNaFzmsdRH7B2td4rDWRQ5rXeSw1kUOa13ksNZFDmtd5LDWRQ5rXeSw1kUOa13ksNZFDmtd5LDWRQ5rXeSw1kX+B8uK725GhKqEAAAAAElFTkSuQmCC

Here is my code:

var doc = new jsPDF({
        orientation: 'p',
        unit: 'in',
        format: 'letter'
      })

for (i = 0; i < collectionSize-1; i++) {

        doc.text('This registration code is for access to files on behalf of '  + response[i].vId, 20, 30)
        doc.addImage(response[i].QR.bId , 'PNG', 15, 40, 180, 160)
        doc.addPage()

      }
      setTimeout(function(){
        const fileName = 'QR_Code_Export_'+ eId;
        doc.save(fileName)
      },5000);

    },
      err => console.error(err)
    );

Issue: PDF is downloaded with the appropriate number of pages, but each page is blank Expected behavior: PDF generated will add the one line of text and one image per page

Uzlopak commented 5 years ago

Can you provide the generated pdf?

hashoshi commented 5 years ago

Yes as soon as I can get back to my computer after travel I will supply the generated document. On Mon, Mar 18, 2019 at 12:23 PM Aras Abbasi notifications@github.com wrote:

Can you provide the generated pdf?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/MrRio/jsPDF/issues/2317#issuecomment-473988071, or mute the thread https://github.com/notifications/unsubscribe-auth/AgJQrL8EIVXIK938aqIkAe79Dmm5pshnks5vX72XgaJpZM4buiPH .

hashoshi commented 5 years ago

QR_Code_Export_test.pdf

hashoshi commented 5 years ago

@arasabbasi here is the pdf attached

Uzlopak commented 5 years ago

I will analyze them this weekend

hashoshi commented 5 years ago

Here is my package.json just in case it helps identify the issue: "dependencies": { "@angular/animations": "6.1.9", "@angular/common": "6.1.9", "@angular/compiler": "6.1.9", "@angular/core": "6.1.9", "@angular/forms": "6.1.9", "@angular/http": "6.1.9", "@angular/platform-browser": "6.1.9", "@angular/platform-browser-dynamic": "6.1.9", "@angular/platform-server": "6.1.9", "@angular/router": "6.1.9", "@nativescript/schematics": "^0.4.0", "@ng-bootstrap/ng-bootstrap": "^3.2.2", "@ng-idle/core": "6.0.0-beta.3", "@types/jspdf": "1.5.3", "angular2-qrcode": "^2.0.1", "bootstrap": "^4.0.0", "canvas": "^2.3.1", "classlist.js": "^1.1.20150312", "core-js": "^2.5.3", "crypto-js": "^3.1.9-1", "jquery": "^3.3.1", "jspdf": "^1.5.3", "lodash": "^4.17.5", "moment": "^2.20.1", "nativescript-angular": "^6.0.0", "nativescript-checkbox": "^3.0.3", "nativescript-drawingpad": "^3.0.4", "nativescript-orientation": "^2.2.1", "nativescript-screen-orientation": "^2.0.0", "nativescript-theme-core": "~1.0.4", "nativescript-ui-sidedrawer": "^4.3.0", "ngx-toastr": "^9.1.0", "open-iconic": "^1.1.1", "pkg-config": "^1.1.1", "popper.js": "^1.13.0", "reflect-metadata": "~0.1.8", "rxjs": "^6.3.3", "rxjs-compat": "^6.3.3", "rxjs-tslint": "^0.1.5", "tns-core-modules": "^4.0.0", "zone.js": "~0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.8.0", "@angular/cli": "^6.2.2", "@angular/compiler-cli": "6.1.9", "@angular/language-service": "6.1.9", "@nativescript/schematics": "~0.4.0", "@types/jasmine": "^2.8.6", "@types/jasminewd2": "^2.0.3", "@types/lodash": "^4.14.101", "@types/node": "^6.0.116", "codelyzer": "^4.1.0", "jasmine-core": "~2.6.4", "jasmine-spec-reporter": "~4.1.1", "karma": "^1.7.1", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.4.1", "karma-jasmine": "^1.1.1", "karma-jasmine-html-reporter": "^0.2.2", "nativescript-dev-webpack": "^0.17.0", "node-sass": "^4.7.2", "protractor": "~5.1.2", "ts-node": "^3.0.6", "tslint": "^5.3.2", "typescript": "2.9.2", "webpack": "^4.20.2"

Uzlopak commented 5 years ago

Ok, I checked the pdf and the offsets of the text and the images are wrong.

hashoshi commented 5 years ago

Thanks. Any advice on how I can fix them? On Sat, Mar 23, 2019 at 4:05 AM Aras Abbasi notifications@github.com wrote:

Ok, I checked the pdf and the offsets of the text and the images are wrong.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/MrRio/jsPDF/issues/2317#issuecomment-475849610, or mute the thread https://github.com/notifications/unsubscribe-auth/AgJQrFsA3es91xR0DEtCIcxd_LLq9bJcks5vZeA1gaJpZM4buiPH .

Uzlopak commented 5 years ago

Wait for bugfixes

hashoshi commented 5 years ago

Is there a timeline for that? Or can I revert to an older version? I have to finish this up soon.

Messing with the offset numbers in the code won’t help? On Sat, Mar 23, 2019 at 11:50 AM Aras Abbasi notifications@github.com wrote:

Wait for bugfixes

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/MrRio/jsPDF/issues/2317#issuecomment-475880459, or mute the thread https://github.com/notifications/unsubscribe-auth/AgJQrLzypI-vWLnDD92V0d4Ud4Hfcsx9ks5vZk0sgaJpZM4buiPH .

Uzlopak commented 5 years ago

Wait a second.... I was building a testcase for your problem and realized, that you are setting inch as base unit. You have a letter-format, meaning you have 8,5 inch wide and 11 inch tall. If you do

doc.addImage(response[i].QR.bId , 'PNG', 15, 40, 180, 160)

You are telling the engine to position the image at 15 inch from left, 40 inch from top and make it 180 inch wide and 160 inch tall.

Change unit: 'in', to unit: 'pt' or unit: 'px',

hashoshi commented 5 years ago

Oh my goodness. What a dumb mistake. Thanks for catching that. That would surely explain the issue. Let me give that a try real fast On Sat, Mar 23, 2019 at 12:13 PM Aras Abbasi notifications@github.com wrote:

Wait a second.... I was building a testcase for your problem and realized, that you are setting inch as base unit. You have a letter-format, meaning you have 8,5 inch wide and 11 inch tall. If you do

doc.addImage(response[i].QR.bId , 'PNG', 15, 40, 180, 160)

You are telling the engine to position the image at 15 inch from left, 40 inch from top and make it 180 inch wide and 160 inch tall.

Change unit: 'in', to unit: 'pt' or unit: 'px',

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/MrRio/jsPDF/issues/2317#issuecomment-475882458, or mute the thread https://github.com/notifications/unsubscribe-auth/AgJQrIDJj2zf9yNUw_PU2sbqu-EOboMCks5vZlKygaJpZM4buiPH .

Uzlopak commented 5 years ago

I consider this as solved. ;)

hashoshi commented 5 years ago

thank you! silly mistake but silver linings, it's working now

TechCollaboration commented 3 years ago

Hello, I am having the same issue using jsPDF in my React app, and the pdf itself is being created, and getting rendered but is totally blank. Here is an example of the image file: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAB4ElEQVR4Ae3BQQGAQAACMORlaMPY1CsgDbZd9/t8AX41wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMDTA1wNQAUwNMB9jEA7Mzjk1LAAAAAElFTkSuQmCC

Here is my code- if (fileExt == "tiff" ){ let urlCreator = window.URL || window.webkitURL; let imgData = urlCreator.createObjectURL(file); let base64Data = ''

  Jimp.read(imgData, function (err, image) {
    image.resize(200,200);
    image.getBase64(Jimp.MIME_PNG, function(err, data) {
    //  image.getBuffer(Jimp.MIME_PNG, function(err, data) {
      console.log(data);
      base64Data=data

      // BASE 64
      //callback(data)

    });
  });

  let doc = new jsPDF({
    orientation: 'p',
    unit: 'pt',
    format: 'letter'
  })

 onload = function(){
  doc.addImage(base64Data, 'PNG', 15, 40, 558, 600)
  };

 let pdfURL = doc.output("bloburl");
  console.log("PDFURL:",pdfURL)
  this.setDocumentUrl(pdfURL)

}