web-dev-qa-db-ja.com

Opening PDF javascriptを使用して新しいウィンドウで文字列を作成

書式設定されたPDFのような文字列があります

%PDF-1.73 0 obj<<< /Type /Group /S /Transparency /CS /DeviceRGB >> /Resources 2 0 R/Contents 4 0 R>> endobj4 0 obj<> streamx��R=o�0��+��=|vL�R���l�-��ځ,���Ge�JK����{���Y5�����Z˯k�vf�a��`G֢ۢ��Asf�z�ͼ��`%��aI#�!;�t���GD?!���<�����B�b��

...

00000 n 0000000703 00000 n 0000000820 00000 n 0000000926 00000 n 0000001206 00000 n 0000001649 00000 n trailer << /Size 11 /Root 10 0 R /Info 9 0 R >>startxref2015%%EOF

この文字列を新しいウィンドウでPDFファイルとして開きます。window.open（）を使用して新しいタブに文字列を書き込むたびに、テキストはHTMLドキュメントのコンテンツ。これがPDFファイルであることを認識してほしい。

どんな助けも大歓迎です

javascriptpdf
39
DaveC

情報だけのために、以下

window.open("data:application/pdf," + encodeURI(pdfString));

chromeではもう機能しません。昨日、私は同じ問題に遭遇し、この解決策を試しましたが、動作しませんでした（「トップフレームからデータURLへの移動は許可されていません」）。データURLを新しいウィンドウで直接開くことはできなくなりました。ただし、iframeでラップして、次のような新しいウィンドウで開くことができます。 =）

let pdfWindow = window.open("")
pdfWindow.document.write("<iframe width='100%' height='100%' src='data:application/pdf;base64, " + encodeURI(yourDocumentBase64VarHere)+"'></iframe>")
44
Noby Fujioka
window.open("data:application/pdf," + escape(pdfString));

上記は、エンコードされたコンテンツをURLに貼り付けます。これにより、URLのコンテンツの長さが制限されるため、PDFファイルの読み込みに失敗しました（コンテンツが不完全なため）。

19
Ramprabhu Kaliaperumal

データURIを使用して探索することもできます。それは次のようになります。

window.open("data:application/pdf," + escape(pdfString));

バイナリ文字列の書式設定が提供されているため、これをすぐに機能させることはできませんでした。また、データURIを使用する場合は、通常base64でエンコードされたデータも使用します。エンコードされたバックエンドからコンテンツを渡すことができる場合は、使用できます。

window.open("data:application/pdf;base64, " + base64EncodedPDF);

うまくいけば、これがあなたが必要とするものの正しい方向です。また、IE6/7ではデータURIをサポートしていないため、これはまったく機能しません。

17
Morgan ARR Allen

これはかなり古い質問であることに気づきましたが、今日同じことを思いついて、次の解決策を思い付きました。

doSomethingToRequestData().then(function(downloadedFile) {
  // create a download anchor tag
  var downloadLink      = document.createElement('a');
  downloadLink.target   = '_blank';
  downloadLink.download = 'name_to_give_saved_file.pdf';

  // convert downloaded data to a Blob
  var blob = new Blob([downloadedFile.data], { type: 'application/pdf' });

  // create an object URL from the Blob
  var URL = window.URL || window.webkitURL;
  var downloadUrl = URL.createObjectURL(blob);

  // set object URL as the anchor's href
  downloadLink.href = downloadUrl;

  // append the anchor to document body
  document.body.appendChild(downloadLink);

  // fire a click event on the anchor
  downloadLink.click();

  // cleanup: remove element and revoke object URL
  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(downloadUrl);
});
13
Chris Cashwell

これは私のために働いた。

window.open("data:application/octet-stream;charset=utf-16le;base64,"+data64);

これも機能しました

 let a = document.createElement("a");
 a.href = "data:application/octet-stream;base64,"+data64;
 a.download = "documentName.pdf"
 a.click();
13
Felipe Bejarano
var byteCharacters = atob(response.data);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
  byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var file = new Blob([byteArray], { type: 'application/pdf;base64' });
var fileURL = URL.createObjectURL(file);
window.open(fileURL);

APIまたは別のソースからbase64文字列を返します。ダウンロードすることもできます。

6
Himanshu Chawla

@Noby Fujiokaの応答を追加したいだけですが、Edgeは以下をサポートしません

window.open("data:application/pdf," + encodeURI(pdfString));

Edgeでは、それをblobに変換する必要があり、これは次のようなものです

//If Browser is Edge
            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                var byteCharacters = atob(<Your_base64_Report Data>);
                var byteNumbers = new Array(byteCharacters.length);
                for (var i = 0; i < byteCharacters.length; i++) {
                    byteNumbers[i] = byteCharacters.charCodeAt(i);
                }
                var byteArray = new Uint8Array(byteNumbers);
                var blob = new Blob([byteArray], {
                    type: 'application/pdf'
                });
                window.navigator.msSaveOrOpenBlob(blob, "myreport.pdf");
            } else {
                var pdfWindow = window.open("", '_blank');
                pdfWindow.document.write("<iframe width='100%' style='margin: -8px;border: none;' height='100%' src='data:application/pdf;base64, " + encodeURI(<Your_base64_Report Data>) + "'></iframe>");
            }
4
Hasibul

フェデックスの発送リクエストでこの問題が発生しました。 AJAXでリクエストを実行します。応答には、追跡番号、コスト、出荷ラベルを含むpdf文字列が含まれます。

私がやったことは次のとおりです。

フォームを追加します。

<form id='getlabel' name='getlabel' action='getlabel.php' method='post' target='_blank'>
<input type='hidden' id='pdf' name='pdf'>
</form>

Javascriptを使用して、非表示フィールドの値にpdf文字列を入力し、フォームを送信します。

Getlabel.phpの場所：

<?
header('Content-Type: application/pdf');
header('Content-Length: '.strlen($_POST["pdf"]));
header('Content-Disposition: inline;');
header('Cache-Control: private, max-age=0, must-revalidate');
header('Pragma: public');
print $_POST["pdf"];
?>
4
Dan Ross

他の古い答えに基づいて：

escape()関数は非推奨になりました。

代わりに encodeURI（） または encodeURIComponent（） を使用してください。

私の状況で機能した例：

window.open("data:application/pdf," + encodeURI(pdfString));

ハッピーコーディング！

4
EaziLuizi

@ Noby Fujioka による回答の更新版：

function showPdfInNewTab(base64Data, fileName) {  
  let pdfWindow = window.open("");
  pdfWindow.document.write("<html<head><title>"+fileName+"</title><style>body{margin: 0px;}iframe{border-width: 0px;}</style></head>");
  pdfWindow.document.write("<body><embed width='100%' height='100%' src='data:application/pdf;base64, " + encodeURI(data)+"#toolbar=0&navpanes=0&scrollbar=0'></embed></body></html>");
}
1
Joe

関数"printPreview（binaryPDFData）"を使用して、バイナリPDFデータの印刷プレビューダイアログを取得します。

printPreview = (data, type = 'application/pdf') => {
    let blob = null;
    blob = this.b64toBlob(data, type);
    const blobURL = URL.createObjectURL(blob);
    const theWindow = window.open(blobURL);
    const theDoc = theWindow.document;
    const theScript = document.createElement('script');
    function injectThis() {
        window.print();
    }
    theScript.innerHTML = `window.onload = ${injectThis.toString()};`;
    theDoc.body.appendChild(theScript);
};

b64toBlob = (content, contentType) => {
    contentType = contentType || '';
    const sliceSize = 512;
     // method which converts base64 to binary
    const byteCharacters = window.atob(content); 

    const byteArrays = [];
    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        const slice = byteCharacters.slice(offset, offset + sliceSize);
        const byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        byteArrays.Push(byteArray);
    }
    const blob = new Blob(byteArrays, {
        type: contentType
    }); // statement which creates the blob
    return blob;
};
0
Manoj

1つの提案は、PDFJSのようなpdfライブラリを使用することです。

追加する必要があります、次の"data:application/pdf;base64" + pdf文字列、および要素のsrcをそれに設定します。

この例を試してください：

var pdfsrc = "data:application/pdf;base64" + "67987yiujkhkyktgiyuyhjhgkhgyi...n"

<pdf-element id="pdfOpen" elevation="5" downloadable src="pdfsrc" ></pdf-element>

それが役に立てば幸い ：）

0
Sehul Viras

最新のChromeバージョンでは、これは私のために機能します：

var win = window.open（ ""、 "Title"、 "toolbar = no、location = no、directories = no、status = no、menubar = no、scrollbars = yes、resizable = yes、width = 780、height = 200 、top = "+（screen.height-400）+"、left = "+（screen.width-840））; win.document.body.innerHTML = 'iframe width = "100％" height = "100％" src = "data：application/pdf; base64、" + base64 + ">';

0
Yassine Moslah

// pdfビュー用

let pdfWindow = window.open("");
pdfWindow.document.write("<iframe width='100%' height='100%' src='data:application/pdf;base64," + data.data +"'></iframe>");
0
Santosh Thakur