6

私が使用している: https://pdfobject.com/

pdfWeb アプリに埋め込まれたファイルを表示するには。ただし、pdfから作成された をレンダリングできませんblob。

これは私が試したことです：

var arrayBufferView = new Uint8Array(response.Body.data);
var file = new Blob([arrayBufferView], {
    type: response.ContentType
});
var url = window.URL.createObjectURL(file)
PDFObject.embed(url, "#my-container");

HTMLでこの結果を取得します：

<div id="my-container" class="ng-scope pdfobject-container">

    <embed class="pdfobject" src="blob:http%3A//localhost%3A4000/869a8d9a-7eaa-48dd-99aa-49bf299114aa" type="application/pdf" style="overflow: auto; width: 100%; height: 100%;" internalinstanceid="88">

</div>

ただし、埋め込みコンテナはブラウザに何も表示しません。Chrome 51.0.2704.103 m を使用しています

4

4 に答える 4

18

<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();

plnkr http://plnkr.co/edit/9E5sGfMhUeIWV9yodAUd?p=preview

于 2016-06-25T18:30:55.027 に答える
1

iframeを使用して回答を補完するだけで、pdfjsビューアも使用する必要があります。そうしないと、ダウンロードされます。

<div id="my-container" class="PDFObject-container">
    <iframe src="/pdfjs/web/viewer.html?file=blob:http://xxx:8098/fsadfsaf" type="application/pdf" width="1000" height="600" style="overflow: auto;">
    </iframe>
</div>

ブロブは、Javascript で作成されたバイナリ レスポンスから作成されます

const url = window.URL.createObjectURL(new Blob([response], { type: 'application/pdf' }));

PDFObject が iframe を使用せずに作業を実行できることを願っていますが、テストでは成功していません。

于 2020-02-25T10:11:40.850 に答える