web-dev-qa-db-ja.com

JsPDF-トップフレームからデータURLへの移動は許可されていません

Google Chromeの更新後、新しいウィンドウのレポートjsPDFは機能しなくなりました。

コンソールには次のメッセージが表示されます。

データURLへのトップフレームの移動は許可されていません：data：application/pdf; base64、JVBERi0xLjMKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQgMSAwIFIKL1 ....

手伝って頂けますか？

ありがとう。

google-chromeframejspdf
37
Márcio Rossato

明らかにGoogle Chromeはトップフレームナビゲーションのサポートを削除しました。詳細については、こちらをご覧ください： https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/GbVcuwg_QjM

あなたはjsPDFをiFrameにレンダリングしようとするかもしれません

31
Pedro Calderon

chromeがトップフレームナビゲーションを削除したので、これはうまく機能します。 chromeでPDFをダウンロードするだけで問題が発生します。ダウンロードはfirefox thoでうまく機能します。

var string = doc.output('datauristring');
var iframe = "<iframe width='100%' height='100%' src='" + string + "'></iframe>"
var x = window.open();
x.document.open();
x.document.write(iframe);
x.document.close();
37
Joyston

最近、FileReaderオブジェクトを使用してコンテンツを読み取り、JSReportを表示するときに同じ問題が発生しました。

 var reader = new FileReader();                        
 reader.onload = function (e) {
      window.open(reader.result, "_blank");
 }
 reader.readAsDataURL(blob);

残念ながらchromeを更新すると、すべてのレポートが機能しなくなりました。私はBlobオブジェクトを使用してこれを修正しようとしましたが、まだ動作していますが、ポップアップブロッカーがある場合は動作しません。

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

最後に、このトピックを読んだ後にiFrameを動的に作成することでこの問題を回避する方法を見つけ、solutionを共有することにしました。

 var file = new Blob([blob], { type: 'application/pdf' });
 var fileURL = URL.createObjectURL(file);
 var win = window.open();
 win.document.write('<iframe src="' + fileURL + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>')
13
Sadek Lallouani

たぶん助けて、ダウンロード属性html5でエクスポートする関数を作成してください：

var docPdf = doc.output();
exportToFile(docPdf,defaults.type);

function exportToFile(data,type){

    var hiddenElement = document.createElement('a');
    hiddenElement.href = 'data:text/'+type+';filename='+'exportar.'+type+';'+'charset=utf-8,' + encodeURI(data);
    hiddenElement.target = '_blank';
    hiddenElement.download = 'exportar.'+type;
    hiddenElement.click();
}
9
nikoz84

@ kuldeep-choudhary

こんにちは、実際には、angularJS 1.5.xxでオブジェクトタグを使用しています

<object ng-attr-data="{{data}}" type="application/pdf"></object>

およびスクリプト内：

$scope.doc.data = $sce.trustAsResourceUrl(doc.output("datauristring"));

純粋なjavascriptでは、次のように動作します。

html：

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

js：

document.elementById('obj').data = doc.output("datauristring");

私が間違っている場合は、修正してください。

1
Márcio Rossato
<iframe id="ManualFrame"
        frameborder="0"
        style="border:0"
        allowfullscreen>
</iframe>

<script>
    $(function () {
        setManualFrame();
    });

    function setManualFrame() {
        $("#ManualFrame").attr("height", screen.height);
        $("#ManualFrame").attr("width", screen.width);
        $("#ManualFrame").attr("src", "data:application/pdf;base64," + Your_PDF_Data);
    }
</script>
1
Lonely Planeteer
var pdfUrl = doc.output('datauri').substring(doc.output('datauri').indexOf(',')+1);
var binary = atob(pdfUrl.replace(/\s/g, ''));
var len = binary.length;
var buffer = new ArrayBuffer(len);
var view = new Uint8Array(buffer);
for (var i = 0; i < len; i++) {
    view[i] = binary.charCodeAt(i);
}

var blob = new Blob( [view], { type: "application/pdf" });
var url = URL.createObjectURL(blob);

function openPDF(){
    window.open(url);
}
1
Surya T

Joyston の answer に基づきますが、再解析せず、したがって何かをエスケープする必要はありません：

x=window.open();
iframe=x.document.createElement('iframe')
iframe.width='100%'
iframe.height='100%'
iframe.frameBorder=0
iframe.style="border: 0"
iframe.src='data:text/html........' //data-uri content here
x.document.body.appendChild(iframe);
1
T S

角度で2+-

app.component.html-

 <object id="obj"  [attr.data]  type="application/pdf"> </object>

app.component.ts

 document.getElementById('obj').dataset.data = doc.output("datauristring");

  var blob = doc.output("blob");
  window.open(URL.createObjectURL(blob));
0
Techdive

Jspdfとは関係ありませんが、ここで助けてくれました（そしてこの質問はgoogleで一番のヒットです）：アンカータグにdownload="..."属性を指定すると、ダウンロードプロンプトが適切に開きます。

0
Blauhirn