I'm using ngx-extended-pdf-viewer ( npm ) to render a PDF and it works when i set directly the path+fileName, as below:
<ngx-extended-pdf-viewer [src]="'assets/example.pdf'"
[showPrintButton]="false" [showBookmarkButton]="false"
[showOpenFileButton]="false"
[showSidebarOnLoad]="false"
[showSidebarButton]="true"
delayFirstView="6000" useBrowserLocale="false">
</ngx-extended-pdf-viewer>
I'd like to create a variable in .TS and binding it in [src] like below:
Typescript
...
ngOnInit() {
this.filePathAndName = "'assets/example.pdf'";
...
HTML
<ngx-extended-pdf-viewer [src]="{{filePathAndName}}"
[showPrintButton]="false" [showBookmarkButton]="false"
[showOpenFileButton]="false"
[showSidebarOnLoad]="false"
[showSidebarButton]="true"
delayFirstView="6000" useBrowserLocale="false">
</ngx-extended-pdf-viewer>
But It doesn't work.
The major problem is the [ src ] needs to have the two symbols: Quotation marks ( " ) following by Apostrophe ( ' ) ... " ' path+name ' " (without the spaces)
My question is : How can I put a valid value in a variable in Typescript to render properly in HTML in this specific scenario ?
It doesn't need those quotation marks. Those are only for literal string bindings. Try this:
this.filePathAndName = "assets/example.pdf";
<ngx-extended-pdf-viewer *ngIf="filePathAndName" [src]="filePathAndName"
May be am late to reply, will be helpful for someone in future.
HTML code :
<ngx-extended-pdf-viewer *ngIf="currentPdf"
[src]="currentPdf" useBrowserLocale="false"
style="height: 100%; width: 100%"
[delayFirstView]="1000"
[showHandToolButton]="true"
[handTool] = false>
</ngx-extended-pdf-viewer>
Typescript code:
public currentPdf: string
displayPdf() {
// setTimeout(() => {
this.service.getPdfExtractedContent(this.id)
.pipe(first())
.subscribe(
data => {
this.currentPdf = URL.createObjectURL(this.b64toBlob(data.ExtractedByte,'data:application/pdf;base64', 1024));
},
error => {
console.log(error);
}
);
// }, 500);
}
b64toBlob(b64Data, contentType, sliceSize) {
const byteCharacters = atob(b64Data);
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
const blob = new Blob(byteArrays, {type: contentType});
return blob;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.