我正在使用 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 ]需要具有两个符号: 引号(“)后跟撇号(')...”'路径+名称'“(不带空格)
我的问题是:如何在此特定情况下在Typescript中的变量中放入有效值以正确显示在HTML中?
答案 0 :(得分:2)
它不需要那些引号。这些仅用于文字字符串绑定。试试这个:
Result<Value, ErrorType>
答案 1 :(得分:0)
回复可能会很晚,将来会对某人有所帮助。
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:字符串
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;
}