Question

我一直在尝试在线找到一个示例，其中外部API返回PDF（文件作为响应发送，Content-Type的响应头设置为application / pdf）然后文件是在JS中处理并显示在嵌入的div / iframe中。

我一直在尝试使用PDF.js或PDFObject找到一个例子，但我可以找到使用服务器上托管的pdf文件的直接路径。我需要在客户端执行此操作，并且只能使用API检索文件。

如果在某个地方得到了回复，我很抱歉，但我无法找到符合我要求的任何内容，我希望我能够很好地描述它！

//Pseudo code of what I'd like to achieve
$.get('http.service.com/getPDF', function(data) {
    var pdfString = changeDataToPDFString(data);

    magicLibrary.previewPDF(pdfString, $('#container_pdf'));
}

Answer 1

对于任何偶然发现的人，这是我使用RequireJS和PDFJS的非常具体的解决方案。

     changeDataToPDFString: function(file) {
         var base64ToUint8Array = function(base64) {
            var raw = atob(base64),
                uint8Array = new Uint8Array(raw.length);

            for (var i = 0; i < raw.length; i++) {
                uint8Array[i] = raw.charCodeAt(i);
            }

            return uint8Array;
         },
         base64Data = file.split(',')[1],
         pdfData = base64ToUint8Array(base64Data);

         return pdfData;
    },
    renderPDF: function(file, container) {
        var self = this,
            pdfData = self.changeDataToPDFString(file);

        require(['pdfjs-dist/build/pdf'], function(app){
            var iframe;

            if(container.find('iframe').length) {
                iframe = container.find('iframe')[0];
                iframe.contentWindow.PDFViewerApplication.open(pdfData);
            }
            else {
                iframe = $('<iframe src="js/lib/pdfjs/web/viewer.html" style="width: 100%; height: 700px;" allowfullscreen="" webkitallowfullscreen=""></iframe>')[0];
                iframe.onload = function() {
                    iframe.contentWindow.PDFViewerApplication.open(pdfData);
                }
                container.append(iframe);
            }
        });
    }

如何使用Javascript预览从我网页的iframe中的外部API生成的PDF文件？

1 个答案: