How can I embed a PDF into the template via a web service?

Instead of using a PDF Exante button, I want to embed the PDF directly into the HTML. Is it possible to do that?

template

<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">{{ pageTitle }}</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>
<button type="button" class="btn btn-secondary my-btn-margin" (click)="newOrderSimulation()">Simulation</button>
<div class="mt-3"></div>
<!-- PDF Exante -->
<button type="button" class="btn btn-info my-btn-margin" (click)="pdfExanteBuy()">PDF Exante</button>
</div>
</div>
</div>
</ng-container>


Previously, I downloaded the PDF like this:

pdfExanteBuy(): void {
this.service.getPdfExanteBuyService(this.order!).pipe(
takeUntil(this.unsubscribe$)
).subscribe(res => {

convert64AndDownload(res.PDF, res.FULLNAME + res.FINFICHIER, "pdf");
});
}


How can I embed it directly into the template, please?

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;
}

}

Continue reading...