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

Question

我正在开发一个 angular 应用程序，我在其中上传了一个 pdf 文件。我需要在模态窗口的同一个应用程序中打开同一个 pdf 文件 onClick。我尝试使用但没有用。我不应该使用任何 pdf-viewers

Answer 1

是的，您可以 re-use 像 blob 一样上传的 pdf 并在新标签页中打开它：

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

如果您不想在新标签页中打开它，您需要找到一个插件来在您的 html 中显示 blob。或者可能使用 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();

-> 另见

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

How can we open a pdf file inside an angular application which was already uploaded to the same angular application

javascript

pdf-viewer

angular