我发现这个问题是jsPDF经常出现的问题：我在完全加载之前添加了图像，并且由于他的性能低于我的开发计算机，所以在生产中出现了这个问题。
在一个著名的聊天机器人的帮助下，我想出了这个解决方案，其中包括observables和html2canvas。

npm install html2cavas rxjs

字符串
在名为CommonUtils的实用程序类中：

export type ImageWrapper = {
   imagePath : string,
   x : number,
   y : number,
   width : number,
   height : number,
 }

  private static loadImage(url: string): Observable<HTMLImageElement> {
return new Observable((observer) => {
  const img = new Image();
  img.crossOrigin = 'Anonymous'; // Allow loading images from external URLs
  img.onload = () => {
    observer.next(img);
    observer.complete();
  };
  img.src = url;
});

型
}

private static convertImageToCanvas(img: HTMLImageElement, width: number, height: number): Observable<HTMLCanvasElement> {
return from(html2canvas(img, { width, height }));

型
}

public static addImagesAndSave(images: Array<ImageWrapper>, doc : jsPDF, docname:string): void {
const imageObservables = images.map(({ imagePath }) => this.loadImage(imagePath));

forkJoin(imageObservables)
  .pipe(
    map((loadedImages) => {

      return loadedImages.map((img, index) => {
        document.body.appendChild(img);
        return this.convertImageToCanvas(img, images[index].width, images[index].height)
                    
      }
      );
    }),
    switchMap((canvasObservables) => forkJoin(canvasObservables))
  )
  .subscribe((canvases) => {
    canvases.forEach((canvas, index) => {
      const imgData = canvas.toDataURL('image/jpeg');
      const { x, y, width, height } = images[index];
      console.log('add image ' + ' ' + x + ' ' +  y + ' ' + width + ' ' + height  + ' ' +  imgData  )
      doc.addImage(imgData, 'PNG', x, y, width, height);
    });
    doc.save(docname);
  });

型
}
这个服务是这样叫的

var imageList : ImageWrapper[] = []
 // set your path , height, width, x and y accordingly
 imageList.push({
  imagePath : '/assets/images.jpeg',
  height : h,
  width : w,
  x : posX,
  y : posY
 })
 CommonUtils.addImagesAndSave(imageList , doc, 'pdfname.pdf')

型
我仍然要做一些调整，因为与图像的大小问题，但他们加载并显示在PDF格式