我必须生成一个PDF文件与我的Angular 组件的视图.我使用domtoimage将组件呈现为PNG图像,使用jsPDF将生成的图像添加到PDF.

But in rendered PDF I noticed some gray stripes (the half of the text was hidden because it's a special effect in my application, it's not a bug): enter image description here

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

如何go 除这些条纹?

以下是我生成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));
  }

推荐答案

bgcolor选项传递给toPng函数.这将用您传递的 colored颜色 替换灰色:

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

And you will get this result: enter image description here

Angular相关问答推荐

Angular - MSAL用户缺少角色

*ngFor循环中令人困惑的Angular 行为

RXJS运算符用于combineLatest,不含空值

Angular :将动态创建的零部件附加为目标元素的子项

PrimeNG面包屑组件生成奇怪的&

Angular中的Bootstrap carousel动态属性

我们应该在Angular 从14升级到15的过程中也升级茉莉花和业力相关的依赖吗?

如何在Primeng中实现自定义排序

当快速拖动光标时会丢失元素 - Angular

ngRouterOutlet和组件生命周期使用自定义模板渲染的问题

如何在独立组件中导入Angular innerHTML

通过 SignalR 事件组件重定向Angular 页面后不起作用

如何从 RxJS 重试中排除某些 url

Angular SPA 和 .Net 6 API 之间未连接 Application Insights Map

如何在 Angular 2 中正确设置 Http 请求标头

Angular Material 模态对话框周围的空白

Angular 中 polyfills.ts 文件有什么用

@HostBinding 与 Angular 中的变量类

无法在 RxJs 6 和 Angular 6 中使用 Observable.of

如何在 Angular 2 中跟踪路由?