54

Ajax リクエストからの応答として受け取ったバイナリ ストリームから PDF ファイルを作成しようとしています。

経由XmlHttpRequestで次のデータを受け取ります。

%PDF-1.4....
.....
....hole data representing the file
....
%% EOF

これまでに試したことは、 を介してデータを埋め込むことでしたdata:uri。今は何の問題もなく、元気に動いています。残念ながら、IE9 と Firefox では動作しません。考えられる理由は、FF と IE9 でこのdata-uri.

現在、すべてのブラウザで機能するソリューションを探しています。これが私のコードです：

// responseText encoding 
pdfText = $.base64.decode($.trim(pdfText));

// Now pdfText contains %PDF-1.4 ...... data...... %%EOF

var winlogicalname = "detailPDF";
var winparams = 'dependent=yes,locationbar=no,scrollbars=yes,menubar=yes,'+
            'resizable,screenX=50,screenY=50,width=850,height=1050';

var htmlText = '<embed width=100% height=100%'
                     + ' type="application/pdf"'
                     + ' src="data:application/pdf,'
                     + escape(pdfText)
                     + '"></embed>'; 

                // Open PDF in new browser window
                var detailWindow = window.open ("", winlogicalname, winparams);
                detailWindow.document.write(htmlText);
                detailWindow.document.close();

前述したように、Opera と Chrome で問題なく動作します (Safari はテストされていません)。IE または FF を使用すると、空白の新しいウィンドウが表示されます。

ユーザーが PDF ファイルをダウンロードできるようにするために、ファイル システム上に PDF ファイルを構築するような解決策はありますか? すべてのブラウザ、少なくとも IE、FF、Opera、Chrome、Safari で動作するソリューションが必要です。

Web サービスの実装を編集する権限がありません。そのため、クライアント側でのソリューションでなければなりませんでした。何か案は？

4

8 に答える 8

5

私はこれを変更しました：

var htmlText = '<embed width=100% height=100%'
                 + ' type="application/pdf"'
                 + ' src="data:application/pdf,'
                 + escape(pdfText)
                 + '"></embed>';

に

var htmlText = '<embed width=100% height=100%'
                 + ' type="application/pdf"'
                 + ' src="data:application/pdf;base64,'
                 + escape(pdfText)
                 + '"></embed>';

そしてそれは私のために働いた。

于 2013-02-12T20:07:51.473 に答える
2

ブラウザを検出し、Chrome では Data-URI を使用し、その他のブラウザでは以下のようにPDF.jsを使用します。

PDFJS.getDocument(url_of_pdf)
.then(function(pdf) {
    return pdf.getPage(1);
})
.then(function(page) {
    // get a viewport
    var scale = 1.5;
    var viewport = page.getViewport(scale);
    // get or create a canvas
    var canvas = ...;
    canvas.width = viewport.width;
    canvas.height = viewport.height;

    // render a page
    page.render({
        canvasContext: canvas.getContext('2d'),
        viewport: viewport
    });
})
.catch(function(err) {
    // deal with errors here!
});
于 2015-08-03T13:02:58.830 に答える
1

最近、このトピックに関する別の質問を見ました（dataurlを使用してPDFをiframeにストリーミングすることはchromeでのみ機能します）。

私はastでpdfを作成し、ブラウザーにストリーミングしました。最初にfdfを使用して作成し、次に自分で作成したpdfクラスを使用して作成しました。いずれの場合もpdfは、URLを介して渡されたいくつかのGETパラメーターに基づいてCOMオブジェクトから取得したデータから作成されました。

ajax呼び出しで受信した送信データを見ると、もうすぐそこにいるように見えます。私はここ数年コードをいじっておらず、私が気にかけていたようにそれを文書化していませんでしたが、あなたがする必要があるのは、iframeのターゲットをURLに設定することだけだと思いますからpdfを取得します。これは機能しない可能性がありますが、PDFを出力するファイルは、最初にhtml応答ヘッダーを出力する必要がある場合もあります。

一言で言えば、これは私が使用した出力コードです：

//We send to a browser
header('Content-Type: application/pdf');
if(headers_sent())
    $this->Error('Some data has already been output, can\'t send PDF file');
header('Content-Length: '.strlen($this->buffer));
header('Content-Disposition: inline; filename="'.$name.'"');
header('Cache-Control: private, max-age=0, must-revalidate');
header('Pragma: public');
ini_set('zlib.output_compression','0');
echo $this->buffer;

したがって、ajax呼び出しの完全な応答テキストを確認しないと、それが何であるかを実際に確認することはできませんが、要求しているpdfを出力するコードは、最後のコードと同等のものにすぎないと思う傾向があります。上記のコードの行。自分で制御できるコードの場合は、ヘッダーを設定してみます。こうすることで、ブラウザーで応答テキストを処理できるようになります。わざわざ何かをする必要はありません。

必要なPDFのURL（タイムテーブル）を作成し、作成したURLをsrcとして使用する目的のsie、idなどのiframeのhtmlを表す文字列を作成しました。divの内部htmlを構築されたhtml文字列に設定するとすぐに、ブラウザはpdfを要求し、受信時にそれを表示しました。

function  showPdfTt(studentId)
{
    var url, tgt;
    title = byId("popupTitle");
    title.innerHTML = "Timetable for " + studentId;
    tgt = byId("popupContent");
    url = "pdftimetable.php?";
    url += "id="+studentId;
    url += "&type=Student";
    tgt.innerHTML = "<iframe onload=\"centerElem(byId('box'))\" src='"+url+"' width=\"700px\" height=\"500px\"></iframe>";
}

編集：言及するのを忘れました-この方法でバイナリPDFを送信できます。それらに含まれるストリームは、ascii85または16進エンコードである必要はありません。PDFのすべてのストリームでフラットを使用しましたが、正常に機能しました。

于 2012-10-14T00:08:32.933 に答える
0

PDF.jsを使用して、javascript から PDF ファイルを作成できます...コーディングは簡単です...これで疑問が解決することを願っています!!!

よろしく！

于 2015-07-28T16:04:23.343 に答える