web-dev-qa-db-ja.com

Base64エンコードされたPDFデータURIをHTML 5 `<object>`データ属性に埋め込む方法は？

したがって、私のアプリケーションでは、ユーザーがファイルを<input type = "file" id = "my-file">（HTML 5ファイル入力）にアップロードするオプションがあります。その後、次のJavascriptを使用してこのファイルを取得できます。

var files = $("#my-file").files;
var file = files[0];

このvar fileを<object>タグのdataとして使用できますか？ URLをクリックしてサーバーに接続することでPDFを取得するオブジェクトタグの例を次に示します。

<object data="data/test.pdf" /*<-- I want the var file here */ type="application/pdf" width="300" height="200">
</object>

どうすればこれを達成できますか？ Internet Explorer 11をサポートする必要があることに注意してください。

UPDATE：

最終的に失敗に終わったものを試しました。 FileReaderを使用してPDFをdata-uriに変換し、それを<object>タグのdata属性で使用しました。これにより、Chromeで完全にレンダリングされますInternet Explorerではまったくありません。

var files = $(e.currentTarget.files);
file = files[0];
var reader = new FileReader();
reader.onloadend = function() {
    var data = reader.result;
    console.log(data);
    $("#content").prepend('<object id="objPdf" data="'+data+'" type="application/pdf"></object>');
};
reader.readAsDataURL(file);

読者データが次のように見えるところ：

data:application/pdf;base64,JVBERi0xLjQKJe...

PDFがInternet Explorerのこのアプローチで機能しない理由は次のとおりです （画像のみ）...とても悲しい:(

更新2：

試してみました pdf.js 成功しました...ページにPDFが表示されますが、Internet Explorer 11では信じられないほど遅い（1ページで5秒）。また、一度に1ページのみを表示しますが、<object>タグは、Niceスクロール可能コンテナにすべてのページを即座に表示しました。これは極端なフォールバックオプションですが、このルートをたどらないようにしたいと思います。

ユーザーがウェブページに直接アップロードしたPDFをプレビューするにはどうすればよいですか？

htmlpdfbase64data-uriobject-tag
14
twilco

はい、ファイルを操作しました...

HTML：

<object id="pdf" data="" type="application/pdf"></object>

JavaScript（jquery）

var fr = new FileReader();
fr.onload = function(evtLoaded) {
  $('#pdf').attr('data', evtLoaded.target.result );
};
fr.readAsDataURL(inFile);

あなたのアプローチと比較して、イベントを使用することで、「ファイルの読み取りが完了しました」コールバックを別の方法で使用します。私が正しく理解した場合：読み込みが成功したか失敗したかに関係なく、「loadend」は常に呼び出されます。

4
Dirk Schumacher