基于pdf.js简单在线pdf文件预览跨域解决方案，兼容性好！
主要内容
基于pdf.js的移动端在线pdf文件预览，支持跨域的源码，兼容性强，不受浏览器约束，还可以将pdf转成图片。
前提条件
- 必须拥有两个域的支配权，这个非常重要！（之所以存在跨域这个问题，我查了查，感觉主要也是为了网络的安全，毕竟现实中也有划分界限的说法，但是同样也有牛逼的人可以占有两个领域的，所以就要解决跨域了）
- 本文是建立在PHP的基础上的，但是其他语言同样可行；
具体实现
1.引入pdf.js
例如：
<script src="pdf.js" type="text/javascript"></script>
<script src="pdf.worker.js" type="text/javascript"></script>
2.获取pdf文件总页数
例如：
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
pages = pdf.numPages;//获取总页数
for(var i = 1;i < pdf.numPages;i++){//循环输出
}
});
3.获取每页的内容
例如（具体1参数详见官方API）：
function showall(url,page,id){
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
pdf.getPage(page).then(function getPageHelloWorld(page) {
var scale = 1.0;
var viewport = page.getViewport(scale);
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
}
4.跨域问题（重要）
对于pdf.js单方面想要解决跨域问题只能说能力有限，想要解决还要从服务器端下手，通过修改http报头为header(‘Access-Control-Allow-Origin:*’)，为什么这样可以自行百度。
PHP服务端配置test.php
function sendfile( $fullPath ){
$fsize = filesize($fullPath);
header("Pragma: public");
header("Expires: 0");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("Cache-Control: private",false);
header("Content-Type: application/pdf");
header('Access-Control-Allow-Origin:*');
header("Content-Disposition: attachment; filename=\"".basename($fullPath)."\";" );
header("Content-Transfer-Encoding: binary");
header("Content-Length: ".$fsize);
ob_clean();
flush();
readfile( $fullPath );
}
客户端配置
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.lightbox {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 7;
opacity: 0.3;
display: block;
background-color: rgb(0, 0, 0);
}
.close {
position: relative;
z-index: 10;
text-align: center;
color: red;
font-size: 18px;
}
.pop {
position: relative;
text-align: center;
z-index: 9;
}
.pop canvas {
margin: 20px auto;
display: block;
}
</style>
</head>
<body>
<h1><a href="javascript:void(0)" target="_blank" onclick="showPdf()">显示pdf文档</a></h1>
<h1><a href="http://XXXXXXXXXXX/test.php">下载pdf文档</a></h1>
<div id="container" style="display: none;">
<div class="lightbox"></div>
<div id="close" class="close">关闭</div>
<div id="pop" class="pop"></div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="pdf.js" type="text/javascript"></script>
<script src="pdf.worker.js" type="text/javascript"></script>
<script type="text/javascript">
function showall(url, page, id) {
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
console.log(pdf.numPages);
pdf.getPage(page).then(function getPageHelloWorld(page) {
var scale = 1.0;
var viewport = page.getViewport(scale);
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
}
function showPdf() {
var url = 'http://XXXXXXXXXXX/test.php';//pdf文件地址
$("#container").show();
$("#pop").empty();
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
pages = pdf.numPages;
for(var i = 1; i < pdf.numPages; i++) {
var id = 'page-id-' + i;
$("#pop").append('<canvas id="' + id + '"></canvas>');
showall(url, i, id);
}
});
}
$("#close").click(function() {
$("#container").hide();
});
</script>
</html>
5.效果预览