通过表单数据在 s3 存储桶上上传 html2pdf 生成的 pdf 文件

Question

我当前的脚本是

exportPDF(id) {
const options = {
  filename: 'INV' + id + '.pdf',
  image: { type: 'jpeg', quality: 0.98 },
  html2canvas: {
    scale: 2, dpi: 300,
    letterRendering: true,
    useCORS: true
  },
  jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
}
var element = document.getElementById('export-content');
var d = html2pdf().from(element).set(options).save();

const formData: FormData = new FormData();
formData.append('file', d);

// Service for upload file in s3 bucket
this._uploadService.upload('invoice', formData).subscribe(res => {
  console.log(res);
}, (error: any) => { 
  console.log(error, 'error');
});}

我想将此生成的 pdf 文件存储到 s3 存储桶，并从 s3 我想通过附件通过电子邮件发送。我不想在 db 上存储任何 blob 数据，只想在 db 中存储 s3 url。请帮忙。

提前致谢。

通过将 blob 字符串转换为文件找到了一些解决方案，但无法将响应字符串存储在全局变量中以便在文件中转换并通过 api 调用发送。

this.blobString: any;
html2pdf().from(element).set(options).toPdf().output('datauristring').then(function (res) {
  this.blobString = res;

 // Service for upload file in s3 bucket
 this._uploadService.upload('invoice', this.blobString).subscribe(res => {
   console.log(res);
 }, (error: any) => { 
   console.log(error, 'error');
 });

});
console.log(this.blobString);

在控制台中未定义。或者如何在全局中设置 Worker 数据。

Answer 1

您正在使用 Promise，您的 console.log 在 Promise 响应之前触发，如下所示：

this.blobString: any;
html2pdf().from(element).set(options).toPdf().output('datauristring').then(function (res) {
  this.blobString = res;
  console.log(this.blobString);
});