网页中查看pdf文档

介绍:

PDFObject 是一个 JavaScript 库,用来在HTML中动态嵌入 PDF 文档。

实现代码:

<script type="text/javascript" src="pdfobject.js"></script>
<script type="text/javascript">
    window.onload = function (){
        var success = new PDFObject({ url: "demo.pdf" }).embed();
    };
</script>

上面这段代码是默认占满全屏的,如果需要显示在某个元素中,只需在embed()中指定id就行了


示例:

javascript代码

<script type="text/javascript">
    window.onload = function (){
        var success = new PDFObject({ url: "demo.pdf" }).embed("pdf");	
    };
</script>
html代码:
<div id="pdf">如果你看到这句话,说明不支持您的浏览器,请更换其它浏览器以获得更好的浏览效果</div>

官网:http://www.pdfobject.com/

下载:http://www.pdfobject.com/downloads/

百度云盘下载点:http://pan.baidu.com/share/link?shareid=447700&uk=3104466422

转载于:https://my.oschina.net/kangweb/blog/1635338

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值