在网页中显示PDF文档

网上的代码总有很多用不了的。我就贴上我试过可以用的。win7 64bit+chrome

1.jquery.media.js

<script type="text/javascript" src="/thinkphp/public/js/jquery-1.8.3.min.js"></script>  

<script type="text/javascript" src="/thinkphp/public/js/jquery.media.js"></script>
<script type="text/javascript">
		$(document).ready(function () {
			//$('.media').media(  );
			$('.pdf222').media({width:450, height:350,autoplay: true},src="/thinkphp/public/bookUp/12.pdf");
			});
</script>


	
	<div>
		<a class="media" href="/thinkphp/public/videoDep/1.flv">My Flash Movie</a> 
		<a class="media" href="/thinkphp/public/bookUp/12.pdf">My PDF Document</a> 
	</div>

这个插件支持很多格式的,音视频、文本都可以显示。但他只是调用别的渲染插件,如果浏览器没有安装他会提示下载,所以还是很方便的。

2.embed标签

<embed width="800" height="600" src="/thinkphp/public/bookUp/12.pdf"></embed>

对于chrome浏览器,它内置的有渲染模块,所以可以很方便。

3.PDFObject

<script type="text/javascript" src="/thinkphp/public/js/pdfobject.js"></script>
<script type="text/javascript"> 
window.onload = function (){
    var success = new PDFObject({ url: "/thinkphp/public/bookUp/12.pdf" ,pdfOpenParams: { 
    	scrollbars: '0', 
    	toolbar: '0', 
    	statusbar: '0' , 
	    navpanes: 1,
	    view: "FitH",
	    pagemode: "thumbs"}}).embed("pdf1");
};
</script> 
 
<div id="pdf1" style="width:700px; height:600px;">It appears you don't have Adobe Reader or PDF support in this web browser. <a href="/thinkphp/public/bookUp/12.pdf">Click here to download the PDF</a></div>
这个插件也是调用浏览器内置的渲染模块。如果浏览器没有,可以试试pdf.js。在github上下载,需要自己编译,找了一圈好象没有编译好的。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页使用PDF.js显示PDF文件可以通过以下步骤实现: 1. 下载PDF.js库:首先,你需要下载PDF.js库。你可以从GitHub上的PDF.js仓库获取最新版本的库文件。 2. 引入PDF.js库:将下载的PDF.js库文件解压,并将其的`pdf.js`和`pdf.worker.js`文件复制到你的项目目录。然后,在你的HTML文件使用`<script>`标签引入这两个文件。 ```html <script src="path/to/pdf.js"></script> <script src="path/to/pdf.worker.js"></script> ``` 3. 创建一个容器元素:在HTML文件创建一个用于显示PDF文件的容器元素,例如一个`<div>`元素。 ```html <div id="pdfContainer"></div> ``` 4. 编写JavaScript代码:使用JavaScript代码加载和显示PDF文件。首先,获取容器元素的引用,并创建一个PDF.js的实例。 ```javascript var container = document.getElementById('pdfContainer'); var pdfInstance = PDFJS.getDocument('path/to/pdf/file.pdf'); ``` 5. 渲染PDF页面:使用PDF.js实例的`getPage()`方法获取PDF文件的页面,并将其渲染到容器元素。 ```javascript pdfInstance.getPage(1).then(function(page) { var canvas = document.createElement('canvas'); container.appendChild(canvas); var context = canvas.getContext('2d'); var viewport = page.getViewport({ scale: 1 }); canvas.width = viewport.width; canvas.height = viewport.height; page.render({ canvasContext: context, viewport: viewport }); }); ``` 以上代码的`'path/to/pdf/file.pdf'`应替换为你要显示PDF文件的路径。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值