[英]Can't bind to 'src' since it isn't a known property of 'ngx-extended-pdf-viewer' Angular8+
[英]Angular 6+ binding [src] in ngx-extended-pdf-viewer
我正在使用ngx-extended-pdf-viewer ( npm )渲染PDF,当我直接设置path + fileName时,它可以工作,如下所示:
<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>
我想在.TS中创建一个变量,并在[src]中将其绑定,如下所示:
打字稿
...
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>
但这行不通。
主要问题是[ src ]需要具有两个符号:引号(“)后跟撇号(')...”'path + name'“(不带空格)
我的问题是:在这种特定情况下,如何在Typescript中的变量中放入有效值以正确显示为HTML?
它不需要那些引号。 这些仅用于文字字符串绑定。 尝试这个:
this.filePathAndName = "assets/example.pdf";
<ngx-extended-pdf-viewer *ngIf="filePathAndName" [src]="filePathAndName"
可能迟到了答复,将对以后的某个人有所帮助。
HTML代码:
<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>
打字稿代码:
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.