Displaying a PDF in an iframe using Angular

In my template, I have 3 buttons:

1. 
   Confirmation,
   
   
2. 
   Simulation,
   
   
3. 
   Download PDF.
   

Is it possible to visualize a PDF (below the 3 buttons)?

Here is the card in question:

<ng-container *ngIf="step == 2">
<div class="home-content wrapper-component pt-5" *ngIf="showSimulationButton">
<div class="breadcrumb d-flex justify-content-between border-bottom pt-5">
<h3 class="text-center alignTitleH3">Title</h3>
<button type="button" (click)="previous()" class="btn-green">Back</button>
</div>
<div class="card">
<div class="card-body text-center pt-4">
<button type="button" class="btn btn-success btn_green_arg my-btn-margin" (click)="openConfirmModal()">Confirmation</button>
<!-- Simulation -->
<button type="button" class="btn btn-secondary my-btn-margin" (click)="newOrderSimulation()">Simulation</button>
<div class="mt-3"></div>
<button type="button" class="btn btn-info my-btn-margin" (click)="pdfExanteBuy()">Download PDF</button>
</div>
</div>
</div>
</ng-container>


"For your information, the PDF I want to visualize is the same PDF that is associated with the Download PDF button.

ts file

export class NewBuyOrderComponent implements OnInit, OnDestroy {
private unsubscribe$ = new Subject<void>();
private unsubscribeLoop$ = new Subject<void>();

private isFromSimulation: boolean = false;

readonly allSense = SenseEnum;
readonly allInstrumentType = InstrumentTypeEnum;

today: Date = new Date();
maxDate?: Date;

pageTitle: string = "";
order: Order;

orderDetails: OrderDetails;

againsts: string[] = [];
infosOrder: string[] = [];
executionPlaces: { name: string; value: string }[] = [];

instrumentType?: InstrumentTypeEnum;
titaut?: Titaut;
devise?: string;

etats?: EtatStatus;
statusList: AchVdnStatus[] = [];

orderCheckMessages: ApiErrorResponse[] = [];
confirmOrderAction: any;
simulation: any;

step = 0;

showSimulationButton: boolean = true;

TIT: SecuritiesResponse[] = [];
isLoading: boolean = true;

trx: any;
regr: number;

checkbox1: boolean = false;
checkbox2: boolean = false;

constructor(
private service: NewBuyOrderService,
private location: Location,
private activatedRoute: ActivatedRoute,
private router: Router,
private createDateTimePipe: CreateDateTimePipe,
private modalService: BsModalService
) {
this.step = 1;
}

ngOnInit(): void {
const svm = this.activatedRoute.snapshot.paramMap.get("svm");
if (!svm) {
this.goBack();
return;
}

this.maxDate = new Date(
this.today.getFullYear() + 1,
this.today.getMonth(),
this.today.getDate()
);

const validityDate = new Date(new Date().getFullYear(), 11, 31);
this.order = new Order(+svm, validityDate);

this.getDetails()
.pipe(
tap(() => {
// Initialise sense en fonction de regr
this.order.sense = [1, 2, 3, 4, 6].includes(this.regr) ? "A" : "S";
}),
concatMap(() => this.getPurchaseSecurities()),
tap(() => {
this.isLoading = false;
}),
takeUntil(this.unsubscribe$)
)
.subscribe();
}

ngOnDestroy(): void {
this.resetSubscriptions(false);
this.unsubscribe$.next();
this.unsubscribe$.complete();
}

private getDetails(): Observable<void> {
return this.service.getInstrumentInfo(this.order!.svm).pipe(
takeUntil(this.unsubscribe$),
concatMap((res) => {
if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
this.pageTitle =
res.TIT.ADVTITRE.BASIQUETITRE.LABEL +
" (" +
res.TIT.ADVTITRE.BASIQUETITRE.PLACELABEL +
")";
this.devise = res.TIT.ADVTITRE.BASIQUETITRE.DEVISE;
this.instrumentType = res.TIT.ADVTITRE.BASIQUETITRE.REGR;
this.regr = res.TIT.ADVTITRE.BASIQUETITRE.REGR;

this.executionPlaces = [
{ name: "Best Execution", value: "Y" },
{ name: res.TIT.ADVTITRE.BASIQUETITRE.PLACELABEL, value: "N" },
];

return this.getOrderTICH().pipe(
concatMap(() => this.getValuationAccounts()),
concatMap(() => this.getLastOpenDate()),
map(() => undefined)
);
} else {
return of(undefined);
}
})
);
}

private getOrderTICH(): Observable<void> {
return this.service.getOrderTICH(this.order!.svm).pipe(
map((res) => {
if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
this.titaut = res.TITAUT;
}
return;
}),
takeUntil(this.unsubscribe$)
);
}

private getValuationAccounts(): Observable<void> {
return this.service.getValuationAccounts().pipe(
map((res) => {
if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
if (res.PTF.ESPECES.length > 0) {
const tmpAgainst = [
...new Set(res.PTF.ESPECES.map((x) => x.COMPTE.CURRENCY)),
];
this.againsts = this.clearAgainsts(tmpAgainst);

if (!this.isFromSimulation) {
const index = this.againsts.findIndex((x) => x === this.devise);
if (index !== -1) {
this.order!.against = this.againsts[index];
}
}
}
}
return;
}),
takeUntil(this.unsubscribe$)
);
}

private clearAgainsts(array: string[]): string[] {
const indexEur = array.findIndex((x) => x === "EUR");
if (indexEur !== -1 && indexEur > 0) {
const tmp = array[indexEur];
array.splice(indexEur, 1);
array.unshift(tmp);
}
return array;
}

private resetSubscriptions(recreate: boolean = true): void {
this.unsubscribeLoop$.next();
this.unsubscribeLoop$.complete();
if (recreate) {
this.unsubscribeLoop$ = new Subject<void>();
}
}

goBack(): void {
if (this.simulation) {
this.simulation = undefined;
this.resetSubscriptions();
} else {
this.location.back();
}
}

openConfirmModal(): void {
const modalRef = this.modalService.show(NewBuyOrderConfirmModalComponent, {
...NOT_CLOSABLE_MODAL_OPTIONS,
class: "modal-dialog-centered modal-lg",
ariaLabelledBy: "modal-error-title",
initialState: {
orderToConfirm: this.order,
},

providers: [{ provide: NewBuyOrderService }],
});
}

private getPurchaseSecurities(): Observable<void> {
return this.service.getPurchaseSecurities().pipe(
map((res) => {
if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
this.TIT = res["TIT"];
}
return;
})
);
}

newOrderSimulation(): void {
this.resetSubscriptions();
this.service
.newOrderSimulation(this.order!)
.pipe(takeUntil(this.unsubscribe$))
.subscribe((res) => {
if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
this.simulation = res.ORDS;
this.step = 3;
}
});
this.showSimulationButton = false;
}

newSimulationRequest(event: boolean): void {
if (event === true) {
const data = {
quantity: this.order?.quantity,
limit: this.order?.limit,
sense: this.order?.sense,
against: this.order?.against,
};
this.router.navigate([
"/orders/newOrder/" +
this.order!.svm +
"/simulation/" +
JSON.stringify(data),
]);
} else {
this.location.back();
}
}

checkOrder(): void {
this.resetSubscriptions();
this.service
.checkOrder(this.order!, this.trx)
.pipe(takeUntil(this.unsubscribe$))
.subscribe((res) => {
if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
this.orderCheckMessages = res.RETURNLIST;
this.simulation = null;
this.step = 2;
}
});
}

private getLastOpenDate(): Observable<void> {
return this.service.getLastOpenDate().pipe(
map((res) => {
if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
this.order!.validityDate = this.createDateTimePipe.transform({
date: res.TEXTE.COURT,
time: null,
});
}
return;
}),
takeUntil(this.unsubscribe$)
);
}

pdfExanteBuy(): void {
this.service
.getPdfExanteBuyService(this.order!)
.pipe(takeUntil(this.unsubscribe$))
.subscribe((res) => {
convert64AndDownload(res.PDF, res.FULLNAME + res.FINFICHIER, "pdf");
});
}

previous(): void {
this.step--;
if (this.step === 1) {
this.simulation = null;
}
}

goToStep2(): void {
this.step = 2;
this.showSimulationButton = true;
}
}



Thank you for your help, as I have no idea how to solve this problem.

Continue reading...