pdf.js呈现为PDF与base64

我被困在我的应用程序的最后一点，我应该显示PDF格式的用户表单，在桌面浏览器上正常工作，因为他们有内置的PDF查看器，但对于Android/iOS不工作，因为PDF查看器丢失。所以我试图用PDF.js来显示它，（说实话，这是非常广泛的使用，但文档缺乏），只有catch是我以base64格式获取数据。 PDF.js在网站上有一个例子，它展示了如何呈现base64数据，但它不是PDF，因为那里显示PDF为“PDF”，我需要使用他们的“viewer.html”，但不使用base64数据？pdf.js呈现为PDF与base64

最接近我来到Pdf.js: rendering a pdf file using base64...堆栈溢出，但我不知道如何使用它后PDFJS.getDocument(pdfAsArray)?。

是碰到其他的链接是other link

我不想依赖谷歌/第三方PDF阅读器，因为我不知道他们会支持多久这一点。

来源

2017-05-27 Ninad Mhatre

关于这个话题在社区没有端到端的答案，所以这里是我试图在这里写点东西。（也许它会帮助其他人）

好的，PDF.js是在浏览器中显示PDF的一种方式，特别是当您不想依赖PDF插件进行安装时。就我而言，我的应用程序生成PDF格式的报告，并且可以在下载之前查看，但在手持设备上，由于缺少PDF阅读器插件，它无法正常工作。

在我的情况下PDF已发送到浏览base64字符串，我可以用它来显示PDF <object src="base64-data"...></object>。这在Chrome/FF上很有用，但切换到移动视图并停止工作。

<object type="application/pdf" id="pdfbin" width="100%" height="100%" title="Report.pdf"> 
    <p class="text-center">Looks like there is no PDF viewer plugin installed, try one of the below approach...</p>     
</object>

在上面的代码中，它会尝试显示PDF或回退到<p>并显示错误消息。我打算在这一点上添加PDF查看器，PDF.js是选择，但无法显示它。使用Base64数据的PDF.js上的一个示例显示了如何执行此操作，但将其呈现为图像而非PDF，并且我无法找到解决方案，因此问题所在，这是我所做的，

首先添加JavaScript代码为base64转换为数组
转换成团块，并使用viewer.html文件，PDF.js打包，以显示为PDF

在情况下，如果你想知道为什么的base64数据，那么答案是si mple我可以创建PDF，阅读它，将数据发送到客户端，并删除该文件，我没有运行任何清洁服务/ cron作业删除生成的PDF文件

几件事情要注意

下面的代码是用瓶+ Jinja2的，改变的base64方式读取HTML，如果你使用的是别的东西

观众。HTML需要改变已要求JS & css文件在正确的位置（默认情况下，他们的位置是相对的，你需要他们从静态文件夹简称）

viewer.js在预定位置查找pdf.worker.js，改变的情况下，它的投掷错误如上文件找不到。

viewer.js威力投file origin does not match viewer错误在这种情况下作为权宜之计评论会抛出这个错误，看看是否能解决这个问题（寻找在viewer.js的错误）

我不是笔者的代码下面的代码，我刚刚从不同的地方放在一起。

我们的代码（以便PDF将被显示时，按钮用户点击与id="open_id"）

Jquery的

var pdfDataX = '{{ base64Pdf }}'; 
var BASE64_MARKER = ';base64,'; 
PDFJS.workerSrc = "{{ url_for('static', filename='js/pdf.worker.js') }}"; 

$('#open_id').click(function() {   
    PDFJS.disableWorker = true; 
    var pdfAsDataUri = "data:application/pdf;base64," + pdfDataX ; 
    PDFJS.workerSrc = "{{ url_for('static', filename='js/pdf.worker.js') }}"; 

    // Try to show in the viewer.html 

    var blob = base64toBlob(pdfDataX, 'application/pdf'); 
    var url = URL.createObjectURL(blob); 
    var viewerUrl = "{{ url_for('static', filename='viewer.html') }}" + '?file=' + encodeURIComponent(url); 
    $('#pdfViewer').attr('src', viewerUrl); 

    // Finish 

    var mdObj = $('#pdfbin'); 

    mdObj.hide(); 
    mdObj.attr('data', pdfAsDataUri); 
    mdObj.show(); 

    $('#myModal').modal(); 
}); 

var base64toBlob = function(b64Data, contentType, sliceSize) { 
    contentType = contentType || ''; 
    sliceSize = sliceSize || 512; 

    var byteCharacters = 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; 
} 

$('.save').click(function(e) { 
    e.preventDefault(); 
    var blob = base64toBlob(pdfDataX, 'application/pdf'); 
    saveAs(blob, 'abcd.pdf'); // requires https://github.com/eligrey/FileSaver.js/ 
    return false; 
});

HTML

<object type="application/pdf" id="pdfbin" width="100%" height="100%" title="Resume.pdf"> 
 
    <p class="text-center">Looks like there is no PDF viewer plugin installed, try one of the below approach...</p> 
 
    <iframe id="pdfViewer" style="width: 100%; height: 100%;" allowfullscreen="" webkitallowfullscreen=""></iframe>     
 
</object>

希望这将是对别人有用的未来。

来源

2017-06-07 07:32:49

不知道为什么这个答案收到-2声望，至少让我知道你为什么要标记它 - 为什么？ –

pdf.js呈现为PDF与base64

回答

相关问题