Angular NG2-PDF浏览器修改SRC

Question

我正在将NG2-PDF观看器用于模态组件来查看PDF。 PDF是用url.createobjecturl指令创建的。 在Init上，我签署了PDF。当我将新值设置为SRC变量时，直到我单击PDF之前，它才显示。

@Component({
  selector: 'app-trip-detail-pdf',
  template: `
  <div class="form-group">
    <div class="row">
        <div class="col-12">
            <pdf-viewer #pdfViewer
              [src]="documentData"
              [render-text]="true"
              [original-size]="false"
              [autoresize]="false"
              [show-all]="true"
              [fit-to-page]="false"
              [zoom]="1"
              [zoom-scale]="'page-width'"
              style="width: 100%;"
              [style.height.vh]="loadingPlanDetail?.IsSigned? 90:  (bs.xs$|async)?70:(bs.sm$|async)&&(bs.handSetLandscape$|async)?40:(bs.tablet$|async)?60:72"
            ></pdf-viewer>
        </div>
        <div class="pt-1 col-12" >
          <app-signature (signed)="signedPdf($event)" *ngIf="!loadingPlanDetail?.IsSigned"></app-signature>
        </div>
    </div>
    </div>
  `,
  styles: [
  ]
})
export class DeliverDetailPdfComponent implements OnInit {
  @ViewChild('pdfViewer', { static: true }) pdfViewer: PdfViewerComponent;
  @Input() documentData: any;
  @Input() loadingPlanDetail: LoadingPlanDetailModel;
  @Input() deliverHeader: DeliverHeaderModel;
  @Output() td: EventEmitter<any> = new EventEmitter();

  pdfArray: any;
  pdfDoc: PDFDocument;


  constructor(public bs: BreakpointService, private store: Store) { }

  ngOnInit() {
    this.drawDriverSign()
  }

   
  async drawDriverSign() {
    console.log("drawDriverSign")
    this.pdfArray = await this.loadingPlanDetail.Pdf.arrayBuffer();
    this.pdfDoc = await PDFDocument.load(this.pdfArray)

    const signDriverImage = await this.pdfDoc.embedPng(this.deliverHeader.Sign);
    const signImageSize = signDriverImage.size();//.scale(0.25)

    //get first page dimension
    const pages = this.pdfDoc.getPages()
    const firstPage = pages[0]

    const { width, height } = firstPage.getSize()

    const page = this.pdfDoc.addPage([width, height]);

    //inizio - firma vettore
    page.drawRectangle({
      x: 20,
      y: 700,
      width: 350,
      height: 100,
      borderColor: rgb(0, 0, 1),
      rotate: degrees(0),
      xSkew: degrees(0),
      ySkew: degrees(0),
    })
    page.drawText('Firma vettore', {
      x: 25, y: 802, size: 10, color: rgb(0, 0, 0)
    })

    page.drawImage(signDriverImage, {
      x: 25, //page.getWidth() / 2 - signImageSize.width / 2,
      y: 680, //page.getHeight() / 2 - signImageSize.height / 2,
      width: signImageSize.width,
      height: signImageSize.height,
    });
    //fine - firma vettore

    const pdfSave = await this.pdfDoc.save()
    const pdfBlob = new Blob([pdfSave], { type: 'application/pdf' });

    this.documentData = URL.createObjectURL(pdfBlob);

  }
}

Answer 1

首先，将DocumentData设置为null，然后将其重新分配新的Blob URL。

this.documentData = null;
this.documentData = url.CreateObjectUrl（pdfblob）;