我们如何在angular应用中打开一个已经上传到同一个angular应用中的pdf文件?

Question

我正在开发一个angular应用程序，我在其中上传了一个pdf文件。我需要在模态窗口中打开相同的pdf文件，在相同的应用程序中单击它。我试过使用，但没有用。我不应该使用任何pdf查看器

Answer 1

是的，你可以重复使用你上传的pdf文件，比如blob，然后在一个新的选项卡中打开它:

var blob = new Blob([pdfBuffer], {type: 'application/pdf'});
var blobURL = URL.createObjectURL(blob);
window.open(blobURL);

如果你不想在一个新的选项卡中打开它，你需要找到一个插件来显示blob在你的html中。或者使用iframe

尝试使用元素，请求资源作为Blob

html

<div id="my-container" class="ng-scope pdfobject-container">
<iframe src="" type="application/pdf" width="100%" height="100%" style="overflow: auto;">
</iframe>
</div>

javascript

var xhr = new XMLHttpRequest();
// load `document` from `cache`
xhr.open("GET", "/path/to/file.pdf", true); 
xhr.responseType = "blob";
xhr.onload = function (e) {
if (this.status === 200) {
// `blob` response
console.log(this.response);
var file = window.URL.createObjectURL(this.response);
document.querySelector("iframe").src = file;
}
};
xhr.send();

→也看到使用PDFObject嵌入Blob