非常好的在网页中显示pdf的方法

今天有一需求,要在网页中显示pdf,于是立马开始搜索解决方案,无意中发现一个非常好的解决方法,详见http://blogs.adobe.com/pdfdevjunkie/web_designers_guide。

其实就光看这个网站也足够了,http://www.pdfobject.com/


记录一下主要代码:


<script type="text/javascript" src="scripts/pdfobject/pdfobject.js"></script>
<script type="text/javascript">
window.onload = function (){
    var success = new PDFObject({ url: "pdf/CGVET22-08-2011V2P.pdf" ,pdfOpenParams: { scrollbars: '0', toolbar: '0', statusbar: '0'}}).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="~/pdf/CGVET22-08-2011V2P.pdf">Click here to download the PDF</a></div>


网页使用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文件的路径。
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值