25

私はこれに対する解決策を見つけるのに苦労しています:私はこの方法でJavascriptを使用してSQLファイルストリームフィールドからPDFブロブを取得します(ライトスイッチプロジェクトです)

var blob = new Blob([screen.WebReportsPdfFilesStream.selectedItem.Pdf], { type: "application/pdf;base64" });

ブロブがあり、それをファイルストリームまたはbase64（「JVBERi0 .....」または「%PDF 1.6 ......」など）に変換することもできます

今のところ問題ありません。

次に、ビューアに表示する必要があります。ビューアーを新しいウィンドウで開くことを好みますが、何らかの方法でページに埋め込むこともできます。

ブロブまたはストリームをビューアに直接渡してドキュメントを表示できるかどうか疑問に思っています。私は次のようなものを試しました

PDFView.open(pdfAsArray, 0)

この場合、埋め込みビューアでは何も起こりません。

pdfAsArray同じページ内のキャンバスにストリームを追加して表示できるので良いです。PDFをキャンバスに埋め込むのではなく、おそらく新しいウィンドウにビューアを表示したいだけです。

Javascriptでそれを達成する方法について、数行のコードを提供できる人はいますか?

4

5 に答える 5

12

型付き配列 (例: Uint8Array) がある場合は、 を使用してファイルを開くことができますPDFView.open(typedarray, 0);。

Blobまたはオブジェクトを取得した場合はFile、データを表示する前に型付き配列に変換する必要があります。

var fr = new FileReader();
fr.onload = function() {
    var arraybuffer = this.result;
    var uint8array = new Uint8Array(arraybuffer);
    PDFView.open(uint8array, 0);
};   
fr.readAsArrayBuffer(blob);

もう 1 つの方法は、Blob/File オブジェクトの URL を作成することです。

var url = URL.createObjectURL(blob);
PDFView.open(url, 0);

フレームを埋め込む Web サイトと同じオリジンで PDF ビューアーがホストされている場合は、blob URL をビューアーに渡すことで PDF を表示することもできます。

var url = URL.createObjectURL(blob);
var viewerUrl = 'web/viewer.html?file=' + encodeURIComponent(url);
// TODO: Load the PDF.js viewer in a frame or new tab/window.
于 2014-07-03T08:38:34.923 に答える
11

私はついにPDFView.openメソッドを機能させました。ビューアを自分のページに埋め込み、Rob が最初の 2 つの例で提案したように open 関数を呼び出すと、機能します。

この種のソリューションを探している人のために、ここにいくつかのコード行を提供します。

これは私の Lightswitch mainPage.lsml.js のコードです。js スクリプト (pdf.js、viewer、およびその他) は、Lightswitch プロジェクト (Default.html) のメイン html ページで参照されます。Lightswitch ベースではない他の HTML ページでも動作するはずです。

myapp.MainPage.ShowPdf_execute = function (screen) {
// Write code here.
// Getting the stream from sql
var blob = new Blob([screen.WebReportsPdfFilesStream.selectedItem.Pdf], { type: "application/pdf;base64" });
// Pass the stream to an aspx page that makes some manipulations and returns a response
var formData = new FormData();
formData.tagName = pdfName;
formData.append(pdfName, blob);
var xhr = new XMLHttpRequest();
var url = "../OpenPdf.aspx";
xhr.open('POST', url, false);
xhr.onload = function (e) {
    var response = e.target.response;
        var pdfAsArray = convertDataURIToBinary("data:application/pdf;base64, " + response);
        var pdfDocument;
// Use PDFJS to render a pdfDocument from pdf array
    PDFJS.getDocument(pdfAsArray).then(function (pdf) {
        pdfDocument = pdf;
        var url = URL.createObjectURL(blob);
        PDFView.load(pdfDocument, 1.5)
    })
};
xhr.send(formData);  // multipart/form-data 
};

これがconvertDataURIToBinary機能です

function convertDataURIToBinary(dataURI) {
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = dataURI.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;
var array = new Uint8Array(new ArrayBuffer(rawLength));

for (i = 0; i < rawLength; i++) {
    array[i] = raw.charCodeAt(i);
}
return array;
}

まだ見逃されているのは、ストリームをページに直接渡してviewer.html新しいウィンドウで開き、レンダリングを行う別の UI を持つ可能性です。

内部にドキュメントがない空のビューアを取得したため、このコードはまだ機能していません。

var blob = new Blob([screen.WebReportsPdfFilesStream.selectedItem.Pdf], { type: "application/pdf;base64" });
var url = URL.createObjectURL(blob);
var viewerUrl = 'Scripts/pdfViewer/web/viewer.html?file=' + encodeURIComponent(url);
window.open(viewerUrl);

encodeURIComponent(url)がビューアーにロードする適切なオブジェクトをビューアーに渡していないようです。アイデアや提案はありますか？

于 2014-07-03T17:22:43.210 に答える
5 
var url = URL.createObjectURL(blob);

var viewerUrl = 'web/viewer.html?file=' + encodeURIComponent(url);

// TODO: Load the PDF.js viewer in a frame or new tab/window.

//-- Abobe code opens a new window but with errors : 'Missing PDF 
// blob://http://server-addr:port/converted-blob'
于 2015-05-19T07:01:50.180 に答える