Javascript 使用jspdf&；angularfire2存储

我使用AngularCLI 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);
  }
}

我有一个错误：

错误：未捕获（承诺中）： FirebaseStorageError： {“代码”：“存储/无效参数”， “消息”： “Firebase存储：索引0处的

put

中的参数无效： 应为Blob或文件。“， “serverResponse\：null，“name\：”FirebaseError“}

---

而不是const task=this.storage.upload（'/test/'+filePath，file） 例如，您需要传递给具有扩展名的名称 const task=this.storage.upload（'/test/'+filePath+'myfile.pdf'，file）；

---

因为filepath不是blob，也不是文件，而是字符串，所以这个答案对我很有用

html2canvas（数据）。然后（画布=>{

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

---

我想问题出在doc.output（）中，不是吗？

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