如何使用 javascript 和 PDF 数据即时创建 PDF？答案

【问题标题】：How to create a PDF on the fly with javascript and the PDF data?如何使用 javascript 和 PDF 数据即时创建 PDF？
【发布时间】：2017-05-09 15:01:24
【问题描述】：

我有一个 AJAX 调用，它调用一个安全的 PHP API 调用，该调用生成 PDF 文件数据（动态，没有实际文件）并返回它。如何在 javascript/jquery 中使用此 PDF 文件数据来创建 PDF 文件并将其下载给用户？

我最初尝试将 ajax 调用的头部设置为 PDF 的头部，但显然您无法通过 ajax 下载文件。

【问题讨论】：

您是否有权访问创建 PDF 以使其以 Base64 编码返回的 PHP API？
@user1628733 是的。它以 Base64 编码返回 PDF 数据。

标签： javascript php jquery

【解决方案1】：

要从 ajax 调用自动下载文件，您可以执行以下操作。在我的示例中，我返回了一个包含文件名、mime 类型和 Base64 数据的对象，但也许这可以让您了解如何执行所需的操作。

PostDTO('/ReportService.asmx/DownloadReport', dto, function (result) {
                var a = document.createElement('a');
                if (window.URL && window.Blob && ('download' in a) && window.atob) {
                    // Do it the HTML5 compliant way
                    var blob = base64ToBlob(result.FileDataBase64, result.MimeType);
                    var url = window.URL.createObjectURL(blob);
                    a.href = url;
                    a.download = result.Filename;
                    a.click();
                    window.URL.revokeObjectURL(url);
                }
            });

function base64ToBlob(base64, mimetype, slicesize) {
        if (!window.atob || !window.Uint8Array) {
            // The current browser doesn't have the atob function. Cannot continue
            return null;
        }
        mimetype = mimetype || '';
        slicesize = slicesize || 512;
        var bytechars = atob(base64);
        var bytearrays = [];
        for (var offset = 0; offset < bytechars.length; offset += slicesize) {
            var slice = bytechars.slice(offset, offset + slicesize);
            var bytenums = new Array(slice.length);
            for (var i = 0; i < slice.length; i++) {
                bytenums[i] = slice.charCodeAt(i);
            }
            var bytearray = new Uint8Array(bytenums);
            bytearrays[bytearrays.length] = bytearray;
        }
        return new Blob(bytearrays, { type: mimetype });
    };

【讨论】：

【解决方案2】：

您可以从 ajax 下载文件。我是从一个角度应用程序中做到的。想法：

获取文件数据并询问响应类型“arrayBuffer”
确保数据响应没有被您的框架转换（因为它是 angular）
创建一个 blob : var blob = new Blob([data], {type: 'application/pdf');//检查类型
创建一个 url：var url = URL.createObjectURL(blob);
打开网址：window.open(url);

您可以验证通过控制台生成的 blob，显示 blob url。该网址必须打开您的 pdf。

【讨论】：