一、下载pdf.js
二、使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pdf文件预览</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="google" content="notranslate">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="/ires/page-res/common/frames/jquery/jquery-1.12.2.min.js"></script>
<style>
*{
padding: 0;
margin: 0;
text-align: center;
}
a{
font-size: 14px;
text-align: center;
}
html,body,iframe{
width: 100%;
height: 100%;
}
</style>
<script type="text/JavaScript">
$(function () {
var url = getParamValueByName("file"); //获取pdf预览地址
var version = getBrowserVersions();
if(version.ios){
window.location.href=url;
}else{
$("#pdfContainer").attr("src", "../ires/pdfjs/web/viewer.html?file="+url+"#page=1");
}
});
/**根据参数名称获取参数值*/
function getParamValueByName(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return '';
}
</script>
</head>
<body>
<iframe id="pdfContainer" src="" width="100%" frameborder="0"></iframe>
</body>
</html>
跨域问题的解决
在viewer.js文件中注释掉一下代码：
//var fileOrigin = new URL(file, window.location.href).origin;
// if (fileOrigin !== viewerOrigin) {
// throw new Error('file origin does not match viewer\'s');
// }
