博客

pdf.js在线查看（文档流／地址）

工作中需要在移动端在线查看pdf文件，但由于pdf文件存放在第三方的服务器中，由于各种原因无法直接返回pdf文件地址给前台，后来确定返给前台是一个base64的流文件，所以选择使用pdf.js来完成，在网上看了很久，也没有找到使用pdf.js，接收流文件的具体实现方法，最终在一个网友的回答中找到了解决答案。

一、准备工作

下载pdf.js和pdf.worker.js,请在官网自行下载

官网下载

，

并在你的文件中引入

二、html文件写入容器

<div id="container">
	<div class="lightbox"></div>
	<div id="pop" class="pop">
		<canvas id="the-canvas"></canvas>
	</div>
</div>

三、js中拿到文件并显示

1、这里会有两种情况，一种是拿到pdf文件的地址：例如：http://****/demo.pdf

var pdfData = "http://****/demo.pdf";

2、另外一种是后台返回base64的流文件，这种情况就比较复杂，必须进行转码

var pdfData = "流文件"   //  pdfData是从后台拿到的流文件
//  下面这部分是拿到流文件之后进行的转码部分——必须要转码
var arrayBuffer = _base64ToArrayBuffer(pdfData);
function _base64ToArrayBuffer(base64) {
	var binary_string = window.atob(base64);
    var len = binary_string.length;
    var bytes = new Uint8Array(len);
    for (var i = 0; i < len; i++) {
    	bytes[i] = binary_string.charCodeAt(i);
    }
    return bytes.buffer;
}
//  转码结束后得到arrayBuffer
console.log(arrayBuffer)

四、使用pdf.js让文件显示

//  让pdf显示,(pdfData为地址url，arrayBuffer为转码文件)
//  我这里只显示了第一页的pdf，要显示完整的pdf文件可以参考https://bbs.csdn.net/topics/392177382
pdfjsLib.getDocument(pdfData/arrayBuffer).then(function getPdfHelloWorld(pdf) {
	pdf.getPage(1).then(function getPageHelloWorld(page) {
    	var scale = 1;
        var viewport = page.getViewport(scale);
        var canvas = document.getElementById('the-canvas');
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        var renderContext = {
        	canvasContext: context,
        	viewport: viewport
		};
    page.render(renderContext);
	});
});

参考链接：

https://segmentfault.com/q/1010000014762311/a-1020000014763551