web-dev-qa-db-ja.com

JavaScriptを使用してクライアント側でPDFとしてbase64文字列を保存します

だからここに私の問題：私はサーバーから取得しているbase64文字列としてpdfファイルを持っています。この文字列を使用してPDFをブラウザに直接表示するか、リンクをクリックしたときに[名前を付けて保存...]のオプションを指定します。ここで使用しているコード：

<!doctype>
<html>
<head>
   <title>jsPDF</title>
   <script type="text/javascript" src="../libs/base64.js"></script>
   <script type="text/javascript" src="../libs/sprintf.js"></script>
   <script type="text/javascript" src="../jspdf.js"></script>

       <script type="text/javascript">

        function demo1() {
            jsPDF.init();
            jsPDF.addPage();
            jsPDF.text(20, 20, 'Hello world!');
            jsPDF.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');

            // Making Data URI
            var out = jsPDF.output();
            var url = 'data:application/pdf;base64,' + Base64.encode(out);

            document.location.href = url;
         }
    </script>
</head>
<body>

<a href="javascript:demo1()">Run Code</a>

</body>
</html>

ChromeおよびSafari。Firefoxはpdfを認識しますが、FFには拡張機能が存在する必要があるため表示されませんが、この場合data-URIには何もありません。ここで主張する場合、chromeとsafariが動作するようにするには、FFとIEの解決策が必要です。

これにはいくつかの関連する質問がありますが、実際には正確な質問ではなく、今では少し古い質問もあります。回避策はサーバー側でpdfを生成することですが、クライアント側でpdfを生成したいと思います。

それでは、賢明な人々を喜ばせてください、いくつかのハッキングや追加のJSダウンロードプラグインによって可能ですか？

javascriptinternet-explorerfirefoxpdfbase64
32
owsata

以下に示すようなアンカーを作成して、base64 pdfをダウンロードできます。

<a download=pdfTitle href=pdfData title='Download pdf document' />

どこpdfDataはようなあなたのbase64でエンコードされたPDFファイルである "データ：アプリケーション/ PDF; base64で、/ 0 + 2YsZAQzmZk1PSPIEB JVBERi0xLjQKJcOkw7zDtsOfCjIgMCBvYmoKPDwvTGVuZ3RoIDMgMCBSL0ZpbHRlci9GbGF0ZURlY29kZT4 + CnN0cmVhbQp4nO1cyY4ktxG911fUWUC3kjsTaBTQ1Ytg32QN4IPgk23JMDQ2LB ..."

20
Gabriel C

を使用してファイルをダウンロードできるはずです

window.open("data:application/pdf;base64," + Base64.encode(out));
19
Denys Séguret

私はこの質問が古いことを知っていますが、これを達成したかったので、見ながらそれを見つけました。 Internet Explorerの場合、 here のコードを使用してBlobを保存しました。 base64文字列からblobを作成するには、このサイトで多くの結果があったため、そのコードではなく、特定のソースを思い出せません。

function b64toBlob(b64Data, contentType) {
    contentType = contentType || '';
    var sliceSize = 512;
    b64Data = b64Data.replace(/^[^,]+,/, '');
    b64Data = b64Data.replace(/\s/g, '');
    var byteCharacters = window.atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.Push(byteArray);
    }

    var blob = new Blob(byteArrays, {type: contentType});
    return blob;

リンクされたファイルセーバーの使用：

if (window.saveAs) { window.saveAs(blob, name); }
    else { navigator.saveBlob(blob, name); }
15
Ka0s