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

How can I preview a PDF file generated from an external API in an iframe of my webpage, using Javascript?

本文关键字：从外部 API 文件 PDF Javascript 何使用 网页 iframe      更新时间：2023-09-26

我一直试图在网上找到一个例子，其中PDF由外部API返回(响应中发送的文件，内容类型设置为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'));
}

对于那些偶然发现这一点的人，这里是我使用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);
            }
        });
    }
相关文章：