1.pdfobject.js官網：https://pdfobject.com/
2.在html文件中引入這個文件，以pdfobject.min.js為例
<script type="text/javascript" src="js/pdfobject.min.js"></script>
效果1：在指定位置（當指定位置為全局時）瀏覽PDF，最終效果類似3.1，不做演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在指定div中瀏覽PDF</title>
<!--在此引入bootstrap只為初始化樣式div樣式-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
/* 添加樣式是為了實現全屏效果 */
html,body{
height: 100%;
overflow: hidden;
}
#example1{
height: 100%;
}
.pdfobject-container{
/* height: 500px; */
}
.pdfobject{
/* border: 1px solid #666; */
}
</style>
</head>
<body>
<div id="example1"></div>
<script type="text/javascript" src="js/pdfobject.min.js"></script>
<script>
// 我的pdf文件放在項目的pdf文件夾下，名字叫做Java.pdf
PDFObject.embed("pdf/Java.pdf", "#example1");
</script>
</body>
</html>
效果2：在指定位置（當指定位置為局部時）瀏覽PDF
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在指定div中瀏覽PDF</title>
<!--在此引入bootstrap只為初始化樣式div樣式-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
html,body{
height: 100%;
overflow: hidden;
/* 添加背景顏色是為了方便查看整個body范圍 */
background-color: cornflowerblue;
}
#example1{
/* 設置放置PDF的div的樣式 */
height: 50%;
width: 50%;
}
/* PDF容器樣式 */
.pdfobject-container{
/* height: 500px; */
}
/* PDF樣式 */
.pdfobject{
/* border: 1px solid #666; */
}
</style>
</head>
<body>
<div id="example1"></div>
<script type="text/javascript" src="js/pdfobject.min.js"></script>
<script>
// 我的pdf文件放在項目的pdf文件夾下，名字叫做Java.pdf
PDFObject.embed("pdf/Java.pdf", "#example1");
</script>
</body>
</html>
效果3：指定從多少頁開始閱讀（必須同時指定顯示PDF的div）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在指定div中瀏覽PDF</title>
<!--在此引入bootstrap只為初始化樣式div樣式-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
/* 添加樣式是為了實現全屏效果 */
html,body{
height: 100%;
overflow: hidden;
}
#example1{
height: 100%;
}
.pdfobject-container{
/* height: 500px; */
}
.pdfobject{
/* border: 1px solid #666; */
}
</style>
</head>
<body>
<div id="example1"></div>
<script type="text/javascript" src="js/pdfobject.min.js"></script>
<script>
// 我的pdf文件放在項目的pdf文件夾下，名字叫做Java.pdf，指定PDF從20頁開始閱讀
PDFObject.embed("pdf/Java.pdf", "#example1", {page: "20"});
</script>
</body>
</html>
原文地址：https://i.cnblogs.com/EditPosts.aspx?opt=1