Using jspdf & angularfire2 storage

Question

I use angular cli 1.6 angularfire2 and firebase storage.

I want to register my html template in pdf to do this I use:

    html2canvas( data ).then(canvas => {  

      var imgWidth =297;
      var pageHeight = 210;    
      var imgHeight = canvas.height * imgWidth / canvas.width;  
      var heightLeft = imgHeight;  
      const contentDataURL = canvas.toDataURL('image/png')  
      var file = new jspdf('l', 'mm', 'a4'); // A4 size page of PDF  
      var position = 2;  
     pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)  
}

and I use angularfire2 to save it in firebase storage: the documentation gives this:

import { Component } from '@angular/core';
import { AngularFireStorage } from 'angularfire2/storage';

@Component({
  selector: 'app-root',
  template: `
  <input type="file" (change)="uploadFile($event)">
  `
})
export class AppComponent {
  constructor(private storage: AngularFireStorage) { }
  uploadFile(event) {
    const file = event.target.files[0];
    const filePath = 'name-your-file-path-here';
    const task = this.storage.upload(filePath, file);
  }
}

I tried this:

    public captureScreen()  {  
var data = document.getElementById('contentToConvert'); 

html2canvas( data ).then(canvas => {  

  var imgWidth =297;
  var pageHeight = 210;    
  var imgHeight = canvas.height * imgWidth / canvas.width;  
  var heightLeft = imgHeight;  
  const contentDataURL = canvas.toDataURL('image/png')  
  var doc = new jspdf('l', 'mm', 'a4'); // A4 size page of PDF  
  var position = 2;  
  doc.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);

  const file = doc.output('datauristring');

  const filePath = Date.now().toString();
  const fileRef = this.storage.ref('/test/' + filePath);
  const task = this.storage.upload('/test/' + filePath, file);
  this.uploadPercent = task.percentageChanges();
  task.snapshotChanges().pipe(
  finalize(() => {
  this.downloadURL = fileRef.getDownloadURL();
  this.downloadURL.subscribe(url => this.url = url
  )
  }))
  .subscribe();
  });  
  }   
  }

I have this error :

Error: Uncaught (in promise): FirebaseStorageError: {"code_":"storage/invalid-argument", "message_": "Firebase Storage: Invalid argument in put at index 0: Expected Blob or File.", "serverResponse_":null,"name_":"FirebaseError"}

Newbiiiie Newbiiiie · Accepted Answer · 2018-07-23T13:49:00

This answer works for me.

html2canvas( data ).then(canvas => {

  var imgWidth =297;
  var pageHeight = 210;    
  var imgHeight = canvas.height * imgWidth / canvas.width;  
  var heightLeft = imgHeight;  
  const contentDataURL = canvas.toDataURL('image/png')  
  var doc = new jspdf('l', 'mm', 'a4'); // A4 size page of PDF  
  var position = 2;  
  doc.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);

  const file = doc.output("blob");

  const filePath = Date.now().toString();
  const fileRef = this.storage.ref('/test/' + filePath+'.pdf');
  const task = this.storage.upload('/test/' + filePath+'.pdf', file);
  this.uploadPercent = task.percentageChanges();
  task.snapshotChanges().pipe(
  finalize(() => {
  this.downloadURL = fileRef.getDownloadURL();
  this.downloadURL.subscribe(url => this.url = url
  )
  }))
  .subscribe();
  });  
  }   
  }

Using jspdf & angularfire2 storage

2 Answers