#网页中动态嵌入PDF文件/在线预览PDF内容#

摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件;

问题1:如何网页中嵌入PDF:

在网页中:

常用的几种PDF预览代码片段如下:

代码片段1:

1  <object type="application/pdf" data="file:///D:/atm/prtPDF/2016-07-28622262104000373211200009087.pdf"
id="review" style="width:800px; height:750px; margin-top:45px; margin-left:500px" >
2 </object>

代码片段2:

1  <object type="application/pdf" data="D:/atm/prtPDF/2016-07-28622262104000373211200009087.pdf"
id="review" style="width:800px; height:750px; margin-top:45px; margin-left:500px" >
2 </object>

代码片段3:

1 <embed src="file:///D:/atm/prtPDF/2016-07-28622262104000373211200009087.pdf"
id="review" style="width:800px; height:750px; margin-top:45px;margin-left:500px" >
2 </embed>

常用到的方法有以下几种:

PDFObject

PDFobject可以帮助你在页面直接嵌入pdf文件,有时候有些项目需要动态地嵌入PDF文件。PDFObject为此而设计的,他能够快速和容易的嵌入PDF文件,PDFObject使用JavaScript来产生相同的符合标准的 标记,然后插入 到您的HTML元素的选择。您可以填满整个浏览器窗口,或将PDF格式转换成一个

或其他块级元素。

pdf.js

和 Google Chrome 使用的源自 Foxit 的闭源 PDF 浏览插件不同,PDF.js 是基于开放的 HTML5 及 JavaScript 技术实现的开源产品。

pdf.js 是一个主要用于HTML5 平台上在线阅读PDF文档的小插件,基于JavaScript技术编写而成,无需任何本地技术支持。

pdf.js是由Mozilla Labs发布的。他们的目标是创建一个通用的,基于标准的网络平台,能够解析和渲染PDF文件,并最终发布一个PDF阅读器扩展,毫无疑问 pdf.js 将被整合入 Gecko 成为 Firefox 的内嵌 PDF 阅读器,但是具体整合时间表尚未确定

jsPDF

jsPDF 是一个使用Javascript语言生成PDF的开源库。你可以在Firefox插件,服务端脚本或是浏览器脚本中使用它。客户端Safari 和 iPhone Safari 支持得最好,其次是Opera和Windows下的Firefox 3等。IE暂不支持。。

jQuery Media Plugin

jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件,它支持大部分的网络多媒体播放器和多媒体格式,比如:Flash, Windows Media Player, Real Player, Quicktime, MP3,Silverlight, PDF。它根据当前的脚本配置,自动将a标签替换成div,并生成object, embed甚至是iframe代码,至于生成object还是embed,jQuery Media会根据当前平台自动判别,因此兼容性方面非常出色下面这段代码是jQuery Media生成后的。

Google Docs PDF viewer

ZOHO Viewer

Anychart:使用JavaScript导出PDF

下图可以导出为PNG或JPG格式的静态图像或嵌入式静态图像,图表或一个完全互动的功能图

jQuery Document Viewer

Document Viewer是一个jQuery插件,可以让你在网页中直接查看多种文件格式。文档浏览器支持的文件格式:PDF文件,文本文件,代码,图像,音频,视频等。

来自:http://www.cnblogs.com/58top/archive/2012/11/26/a-list-of-jquery-pdf-viewers-available-at-the-moment.html

问题2:在I页面中无法显示嵌入的PDF文件时使用代码片段1、并在浏览器中输入chrome://plugins;如下图所示;

如果你加载本地路径的PDF文件时;浏览器会提示无法加载本地资源文件时;原因分析以及解决方案如下:

由于Chrome的安全限制问题;浏览器一般不允许加载本地资源文件;

	</div>
<div class="itemdesc">
发表于 <span id="post-date">2016-11-30 20:01</span> <a href="http://www.cnblogs.com/xgyy/">喜个阳阳~</a> 阅读(<span id="post_view_count">9915</span>) 评论(<span id="post_comment_count">0</span>) <a href="https://i.cnblogs.com/EditPosts.aspx?postid=6119459" rel="nofollow">编辑</a> <a href="#" onclick="AddToWz(6119459);return false;">收藏</a>
</div>
</div>
<div class="seperator">&nbsp;</div>
<script type="text/javascript">var allowComments=true,cb_blogId=319536,cb_entryId=6119459,cb_blogApp=currentBlogApp,cb_blogUserGuid='39c2782e-e9b5-e611-845c-ac853d9f53ac',cb_entryCreatedDate='2016/11/30 20:01:00';loadViewCount(cb_entryId);var cb_postType=1;</script>
发表评论

昵称:

评论内容:





不改了
退出
订阅评论

[Ctrl+Enter快捷键提交]

                </div>
posted @
2018-07-04 12:49 
灰太狼的喜羊羊 
阅读(...) 
评论(...) 
编辑 
收藏

网页中动态嵌入PDF文件/在线预览PDF内容https://www.cnblogs.com/xgyy/p/6119459.html的更多相关文章

  1. #网页中动态嵌入PDF文件/在线预览PDF内容#

    摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...

  2. 网页嵌入pdf、在线预览pdf工具及插件(转)

    摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...

  3. 使用PDF.JS实现pdf文件在线预览时,报文件被损坏的错误

    首先大概说明一下问题出现的背景:我用PDF.JS实现文件在线预览,参考网上的办法,在jsp文件中使用 <iframe src="<c:url value="js/gen ...

  4. 【ASP.NET 进阶】PDF文件在线预览(类似百度文库)

    工作需要完成文档的在线预览,现在完成了第一步PDF文件的预览,步骤是通过PDF转换工具pdf2swf.exe把PDF文件转换为SWF文件,然后通过FlexPaper就可以预览了.效果如下(GIF图片太 ...

  5. pdf文件在线预览

    使用pdfjs技术实现PDF的在线预览功能. 目录 1.官网下载pdf.js 2. 将下载下来的文件全部复制 3. js使用 4. java IO流 1.官网下载pdf.js 2. 将下载下来的文件全 ...

  6. pc或者微信上用pdf.js在线预览pdf和word

    最近项目要求pdf和word可以在线预览功能,pc端还好解决,但是微信端就有点坑了,pc端原来的思路是将文件转成base64,然后用html格式显示 ,但是微信端不支持, 这种方式就pass掉了,谷歌 ...

  7. 前端实现在线预览pdf、word、xls、ppt等文件

    最近在做一个公司的资源管理系统,一些知识小记一下. 1.前端实现pdf文件在线预览功能 方式一.pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面.在仅仅是预览pdf文件且UI要求不高的情况下 ...

  8. fis3+vue+pdf.js制作预览PDF文件或其他

    人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...

  9. 前端实现在线预览pdf、docx、xls、ppt等文件

    思路:前台将各种格式的附件上传到服务器----后台通过方法将这些格式的文件转化成图片,前台通过放映ppt的方式将其展示在页面上. 关键点:reveal.js 参考文章:https://www.awes ...

随机推荐

  1. pyspider 示例

    数据存放目录: C:\Users\Administrator\data 升级版(可加载文章内所有多层嵌套的图片标签) #!/usr/bin/env python # -*- encoding: utf ...

  2. importlib

    Python提供了importlib包作为标准库的一部分.目的就是提供Python中import语句的实现(以及__import__函数).另外,importlib允许程序员创建他们自定义的对象,可用 ...

  3. qt5 移植 交叉编译出现错误

    类似这样的错误,当时没有完整的记下来,undefined reference to `std::__detail::_List_node_base@GLIBCXX_3.4.10 当时是在编译qt5cl ...

  4. python相关工具

      1.matlab与python之间的数据传递 import scipy.io as sio import numpy as np ###下面是讲解python怎么读取.mat文件以及怎么处理得到的 ...

  5. 2017-2018-2 20165215 实验二 Java面向对象程序设计

    20165215 实验二 Java面向对象程序设计 一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:张家佳 学号:20165215 指导教师:娄嘉鹏 实验日期:2018年4月16日 ...

  6. MQ(转)

    1. 到底什么时候该使用MQ? 1). 典型场景一:数据驱动的任务依赖 采用MQ的优点是: a. 不需要预留buffer,上游任务执行完,下游任务总会在第一时间被执行 b. 依赖多个任务,被多个任务依 ...

  7. Linux基础命令---tracepath追踪路由信息

    tracepath tracepath指令可以追踪数据到达目标主机的路由信息,同时还能够发现MTU值.它跟踪路径到目的地,沿着这条路径发现MTU.它使用UDP端口或一些随机端口.它类似于Tracero ...

  8. seo网页加速技术,预加载 DNS Prefetching 详解

    seo网页加速技术,预加载 DNS Prefetching 详解 DNS Prefetching 是什么 : DNS 是什么-- Domain Name System,域名系统,作为域名和IP地址相互 ...

  9. js中利用cookie实现记住密码功能

    在登录界面添加记住密码功能,代码如下: //设置cookie var passKey = '4c05c54d952b11e691d76c0b843ea7f9'; function setCookie( ...

  10. arcgis desktop 地理编码服务发布

    1.创建地址定位器 2.创建复合地址定位器 3.鼠标右键,共享为,地理编码服务.