Сохраните строку base64 как PDF на стороне клиента с помощью JavaScript

Итак, вот моя проблема: у меня есть файл PDF в виде строки base64, которую я получаю с сервера. Я хотел бы использовать эту строку, чтобы отобразить 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 требует наличия расширений, но в этом случае URI данных не имеет ни одного. Причина, по которой я настаиваю здесь: если Chrome и Safari заставляют его работать, то должно быть решение для FF и IE.

Я знаю, что к этому есть несколько улокальных вопросов, но не совсем точных, а теперь и немного старых. Я знаю, что обходной путь - это создание PDF на стороне сервера, но я хотел бы создать его на стороне клиента.

Так что, пожалуйста, умные люди, возможно ли это с помощью некоторых хаков или дополнительных плагинов для загрузки JS?

Ответы

Ответ 1

Вы можете загрузить файл с помощью

window.open("data:application/pdf;base64," + Base64.encode(out));

Ответ 2

Вы можете создать якорь, подобный показанному ниже, чтобы загрузить base64 pdf:

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

где pdfData​​STRONG > является вашим base64 закодирован PDF как "данные: приложения /PDF; base64, JVBERi0xLjQKJcOkw7zDtsOfCjIgMCBvYmoKPDwvTGVuZ3RoIDMgMCBSL0ZpbHRlci9GbGF0ZURlY29kZT4 + CnN0cmVhbQp4nO1cyY4ktxG911fUWUC3kjsTaBTQ1Ytg32QN4IPgk23JMDQ2LB/0 + 2YsZAQzmZk1PSPIEB..."

Ответ 3

Я знаю, что этот вопрос старый, но он также хотел выполнить это и наткнулся на него, глядя на него. Для Internet Explorer я использовал код здесь, чтобы сохранить Blob. Чтобы создать blob из строки base64, на этом сайте было много результатов, поэтому его не мой код я просто не могу запомнить конкретный источник:

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); }