浏览器在线预览pdf
引用pdfobject.js插件 但微信浏览器不支持pdf格式,下面用到pdf.js转图片展示
资源可见:https://download.csdn.net/download/qq_39201210/10560790
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<head>
<script type="text/javascript" src="../jquery-3.2.1.min.js"></script>
</style>
</head>
<button class="btn btn-primary" onclick="preViewPDF()">PDFObject预览本地PDF</button>
<div id="pdfDiv"></div>
<script>
//预览PDF文件
function preViewPDF(){
if(PDFObject.supportsPDFs){
alert("您的浏览器支持PDF预览功能");
} else {
var browserType = getOs();
if(browserType=="Firefox"){
alert("火狐浏览器支持PDF预览功能");
}else{
alert("您的浏览器不支持PDF预览功能");
}
}
PDFObject.embed("1532335523295SC0001986828209.pdf", "#pdfDiv");
}
</script>
<script src='pdfobject.js'></script>
</body>
</html>
需要用到pdf.js 与pdf.worker.js 注意pdf.js必须放在服务器上才能运行成功
资源可见:https://download.csdn.net/download/qq_39201210/10560778 这里面少了一个worker.js 请自行下载引用
<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);
}
.pop{
position: absolute;
left: 50%;
width: 894px;
margin-left: -447px;
z-index: 9;
}
</style>
<script src="pdf.js" type="text/javascript"></script>
<script type="text/javascript">
function showPdf() {
var container = document.getElementById("container");
container.style.display = "block";
var url = '1532335523295SC0001986828209.pdf';//pdf路径
PDFJS.workerSrc = 'pdf.worker.js';//引用pdf.worker
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
//一个pdf可能有多页的情况,这里是遍历转多页
for (var i = 1; i < pdf.numPages+1; i++) {
pdf.getPage(i).then(function getPageHelloWorld(page) {
var scale = 2;
var viewport = page.getViewport(scale);
// var canvas = document.getElementById('the-canvas');
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
// 这里拿body当pdf容器
document.body.appendChild(canvas);
page.render({ canvasContext: context, viewport: viewport });
});
}
});
}
</script>
</head>
<body>
<h1><p onclick="showPdf()">显示pdf文档</p></h1>
<div id="container" style="display: none;">
<div class="lightbox"></div>
<div id="pop" class="pop">
<canvas id="the-canvas"></canvas>
</div>
</div>
</body>
</html>