ng2-pdfjs-viewer 将对象从组件传递到 html
ng2-pdfjs-viewer Pass Object from component to html
我正在使用 ng2-pdfjs-viewer,我可以传递一个 pdf 文件 http url 但我不能使用插值,也不能将变量传递给 html 标签内的 pdfSrc 选项进行渲染来自休息服务响应的 pdf。
如何将 Uint8array 或 base64 对象从 component.ts 传递到 component.html?
此处提供了您的案例示例:https://ng2-pdfjs-viewer.azurewebsites.net/bytearray。
代码摘录
your.component.html
<div style="height: 600px">
<ng2-pdfjs-viewer #pdfViewer></ng2-pdfjs-viewer>
</div>
your.component.ts
@ViewChild('pdfViewer') public pdfViewer;
constructor(private http: HttpClient) {
let url = "api/document/getmypdf";
this.downloadFile(url).subscribe(
(res) => {
this.pdfViewer.pdfSrc = res; // pdfSrc can be Blob or Uint8Array
this.pdfViewer.refresh(); // Ask pdf viewer to load/refresh pdf
}
);
}
private downloadFile(url: string): any {
return this.http.get(url, { responseType: 'blob' })
.pipe(
map((result: any) => {
return result;
})
);
}
我正在使用 ng2-pdfjs-viewer,我可以传递一个 pdf 文件 http url 但我不能使用插值,也不能将变量传递给 html 标签内的 pdfSrc 选项进行渲染来自休息服务响应的 pdf。
如何将 Uint8array 或 base64 对象从 component.ts 传递到 component.html?
此处提供了您的案例示例:https://ng2-pdfjs-viewer.azurewebsites.net/bytearray。
代码摘录
your.component.html
<div style="height: 600px">
<ng2-pdfjs-viewer #pdfViewer></ng2-pdfjs-viewer>
</div>
your.component.ts
@ViewChild('pdfViewer') public pdfViewer;
constructor(private http: HttpClient) {
let url = "api/document/getmypdf";
this.downloadFile(url).subscribe(
(res) => {
this.pdfViewer.pdfSrc = res; // pdfSrc can be Blob or Uint8Array
this.pdfViewer.refresh(); // Ask pdf viewer to load/refresh pdf
}
);
}
private downloadFile(url: string): any {
return this.http.get(url, { responseType: 'blob' })
.pipe(
map((result: any) => {
return result;
})
);
}