Question

我在Firestore中有一个上传的图片，并且可以在Angular应用程序中获取下载URL。

下载网址如下：

https://firebasestorage.googleapis.com/v0/b/appname.appspot.com/o/clinica%2Flogo?alt=media&token=123456789-2bf7-4711-ba17-d12345678

当我单击它时，Web浏览器将显示图像，但是如何将其包含在jsPDF文档中？我尝试这样做：

mkdir c:\certs #temporary folder where the certificates will be installed/updated
cd c:\certs 
certutil.exe -generateSSTFromWU roots.sst
$sstStore = ( Get-ChildItem -Path C:\certs\roots.sst )
$sstStore | Import-Certificate -CertStoreLocation Cert:\LocalMachine\Root

但是我得到这个错误：

const doc = new jsPDF('portrait', 'mm', 'a4');
doc.addImage(this.downloadURL, 'JPEG', 30, 20);

谢谢！

Answer 1

根据jsPDF documentation，addImage method接受以下格式的imageData：

imageData：string | HTMLImageElement | HTMLCanvasElement | Uint8Array

imageData作为base64编码的DataUrl或Image-HTMLElement或Canvas-HTMLElement

因此，您不能简单地传递指向图像的URL。

使图像成为支持格式的一种简单方法是在代码中创建一个img元素：

var img = document.createElement('img');
imd.src = this.downloadURL;
doc.addImage(img, 'JPEG', 30, 20);

Answer 2

我按照以下步骤进行操作：

首先，按照这个解决方案Set CORS in your firebase Storage

我使用了以下 cors.json

[
 {
   "origin": [
       "*"
   ],
   "method": [
       "GET"
   ],
   "maxAgeSeconds": 3600
 }
]

然后只需使用以下代码读取您的网址并将其添加到您的 pdf 中：

async generatePDF(your_image_url: string) {
  let imageLoaded: HTMLImageElement = await this.getDataUri(your_image_url);
  let pdf = new jsPDF('p', 'pt', 'a4');
  pdf.addImage(imageLoaded, 0, 0, 250, 250);
  pdf.save('test.pdf');
}



async getDataUri(url): Promise<HTMLImageElement> {
    return new Promise(resolve => {
      var image = new Image();

      image.onload = () => {
        resolve(image);
      };

      image.src = url;
    })
 }

希望这对你有帮助，我一直在寻找这个解决方案，所以尽可能多地分享。

问候。

在jsPDF中插入firestore上传的图像

2 个答案: