使用 jspdf 和 angularfire2 存储

Question

我使用 angular cli 1.6 angularfire2 和 firebase 存储。

我想在 pdf 中注册我的 html 模板来执行此操作我使用：

    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)  
}

我使用 angularfire2 将其保存在 firebase 存储中：文档给出了这个：

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);
  }
}

我试过这个：

    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();
  });  
  }   
  }

我有这个错误：

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"}

Answer 1

代替const task = this.storage.upload('/test/' + filePath, file) 例如，您需要传递给带有扩展名的名称 const task = this.storage.upload('/test/' + filePath+'myfile.pdf',file); 因为文件路径不是 blob 或文件，它是一个字符串

Answer 2

这个答案对我有用。

html2canvas( 数据 ).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();
  });  
  }   
  }

使用 jspdf 和 angularfire2 存储

Using jspdf & angularfire2 storage

javascript

jspdf

firebase-storage

angularfire2

angular