PDFObject网页中预览pdf文件实现步骤、PDF隐藏工具栏

六月初六月初 JavaScipt 2019-05-10 10:28:22

PDFObject是一款在线预览PDF文件的插件，通过该插件我们可以在线浏览PDF文件。那么具体在代码中我们要如何使用该插件呢？

实现步骤：

1、引入PDFObject插件

2、创建一个存放PDF文件的div

3、调用插件并指定PDF文件地址及需要展示的div

效果预览：


完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="pdfid" style="height:500px;"></div>
		<script src="pdfobject.js"></script>
		<script>
			if(PDFObject.supportsPDFs){
			    // PDF嵌入到网页
			    PDFObject.embed("logo1.pdf", "#pdfid");
			} else {
			    alert("浏览器不支持");
			}
		</script>
	</body>
</html>

PDFObject隐藏工具栏

关键设置：

var options = {
	pdfOpenParams: { scrollbars: '0', toolbar: '0', statusbar: '0', view: 'FitV',fallbackLink: true}              //禁用工具栏代码
};

完整代码：

<script>
	if(PDFObject.supportsPDFs){
		// PDF嵌入到网页
		var options = {
			pdfOpenParams: { scrollbars: '0', toolbar: '0', statusbar: '0', view: 'FitV',fallbackLink: true}              //禁用工具栏代码
		};
		PDFObject.embed("logo1.pdf", "#pdfid",options);
	} else {
		alert("浏览器不支持");
	}
</script>

示例代码百度云盘：

链接：https://pan.baidu.com/s/1oi1__Y42DGQisk-fe93v8Q    （xzar ）

PDFObject官网地址直通车


六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！