使用jsPDF生成带有图像的PDF时出现灰色条纹

问题描述 投票:0回答:1

我必须生成一个包含 Angular 组件视图的 PDF 文件。我使用

domtoimage
将组件渲染为 PNG 图像,并使用
jsPDF
将生成的图像添加到 PDF。

但是在渲染的 PDF 中我注意到一些灰色条纹:

它们不存在于我截图的原始组件中。

如何去除这个条纹?

这是我生成 PDF 的代码:

openPDF(): void {
    this.generatingPDF = true;
    const DATA = this.textContainerRef.nativeElement!;

    domtoimage
      .toPng(DATA)
      .then((png) => {
        const w = DATA.clientWidth;
        const h = DATA.clientHeight;
        const hpng = (h / w) * 190;
        const doc = new jsPDF('p', 'mm', 'a4');
        try {
          let name = 'untitled_text';
          if (this.text?.title) {
            name = this.text.title;
          }
          doc.addImage(png, 'png', 10, 10, 190, hpng, 'SLOW').save(name);
          this.generatingPDF = false;
          this._cdr.markForCheck();
        } catch (e) {
          this.generatingPDF = false;
          this._cdr.markForCheck();
        }
      })
      .catch((err) => console.log(err));
  }
angular jspdf dom-to-image
1个回答
0
投票

bgcolor
选项传递给
toPng
函数。这会将灰色替换为您传递的颜色:

domtoimage.toPng(DATA, { bgcolor: '#fff' })

你会得到这样的结果:

© www.soinside.com 2019 - 2024. All rights reserved.