js插件方式打开pdf文件(浏览器pdf插件分享)

两种方案：一种直接链接，把pdf文件当作img文件,类似<a href=""/>这种形式，这样链接：


代码如下:

<frame src="pdf文件的地址"></frame>

另一种：使用js插件哈。
其中实现阅读pdf文件的js插件很多，比如：pdf.js：是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档，无需任何本地技术支持；jsPDF：是一个使用Javascript语言生成PDF的开源库（IE暂不支持）；
比较简单易上手的js插件：PDFObject.js，是一个 JavaScript 库用来在HTML中动态嵌入 PDF 文档。
效果如下：

PDFObject.js目前已经升级到1.2,可以支持IE9.
PDFObject.js宗旨：Sometimes you need a little JavaScript. When you do, try PDFObject.
来看看少之又少的js代码：


代码如下:

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

OK,这样就可以了。只要把地址写对即可。
若我在某一个div中加载pdf咋办呢？看官网，发现embed()方法可以有参数的，无参数是指body，有参数是具体的某一个位置。


代码如下:

<script type="text/javascript">
      window.onload = function (){
             var success = new PDFObject({ url: "sample.pdf" }).embed(“div的id”);
      };
</script>

当然,其中还可以进一步设置参数,比如你想以多少秒的速度预览,有css,无css等

赞 (0)

相关推荐

  • 用js实现下载远程文件并保存在本地的脚本

    //use: cscript this.js http://www.xxx.com/xxx.exe c:\xxx.exe var objArgs = WScript.Arguments; var sGet=new ActiveXObject("ADODB.Stream"); var xGet = false; try { xGet = new XMLHttpRequest(); }  catch (trymicrosoft) { try {     xGet = new ActiveX

  • javascript实现将文件保存到本地方法汇总

    下面是保存一个图片为示例,代码来源于网络,希望能够给大家带来一定的帮助,代码如下: <script type="text/javascript"> function saveFile(imgUrl) { var oPop=window.open(imgUrl,"","width=1, height=1, top=5000, left=5000"); for(;oPop.document.readyState != "comp

  • JavaScript+Java实现HTML页面转为PDF文件保存的方法

    需求是一个导出pdf的功能,多方奔走终于实现了,走了不少弯路,而且怀疑现在这个方法仍是弯的. 有个jsPDF 插件可以在前端直接生成pdf,很简便,但不支持IE. 前端: 首先引入  html2canvas.js html2canvas(document.body, { //截图对象 //此处可配置详细参数 onrendered: function(canvas) { //渲染完成回调canvas canvas.id = "mycanvas"; // 生成base64图片数据 var

  • javascript 保存文件到本地实现方法

    2种形式都可以 第一种: 复制代码 代码如下: <script> function SaveAs5(imgURL) { var oPop = window.open(imgURL,"","width=1, height=1, top=5000, left=5000"); for(; oPop.document.readyState != "complete"; ) { if (oPop.document.readyState == &

  • JS简单实现文件上传实例代码（无需插件）

    复制代码 代码如下: <span class="up-btn" id="selectFile">请选择文件</span><input type="file" name="fileupload" style="FILTER: alpha(opacity=0); moz-opacity: 0; opacity: 0;" /> // 点击#selectFile触发input:f

  • 基于WebUploader的文件上传js插件

    首先把地址甩出来,http://fex-team.github.io/webuploader/ 里面有比较完整的demo案例文档,本文主要是基于文件上传和图片上传增加了大量的注释,基本保证了每行代码都有注释以助于理解,是对官网demo的增强版,希望可以帮助大家更好的理解该插件 首先是文件上传 jQuery(function() { var $ = jQuery, $list = $('#thelist'), $btn = $('#ctlBtn'), state = 'pending', uplo

  • 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子

    jQuery插件AjaxFileUpload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用AjaxFileUpload插件的方法,然后再了解一些常见的错误信息和解决方法. 使用说明 需要使用jQuery库文件 和AjaxFileUpload库文件 使用实例 一,包含文件部分 复制代码 代码如下: <script type="text/javascript" src="jquery.js"></script> <scr

  • JS基于FileSaver.js插件实现文件保存功能示例 原创

    本文实例讲述了JS基于FileSaver.js插件实现文件保存功能.分享给大家供大家参考,具体如下: 这里介绍一款js插件用法非常简单,先来看看FileSaver.js插件源码: 复制代码 代码如下: /*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */ var saveAs=saveAs||function(e){"use strict";if(typeof naviga

  • JavaScript中读取和保存文件实例

    话说今天只是粗略浏览了一下Proxy SwitchySharp的源码,就收获了不少东西,其中就包括本文要介绍的读取和保存文件. 因为Google还不提供同步插件数据的功能,所以导入和导出插件配置就必须和文件打交道了.而出于安全原因,只有IE才提供访问文件的API:但随着HTML 5的到来,其他浏览器也纷纷支持了. 首先说读取文件.W3C提供了一些File API,其中最重要的是FileReader这个类. 先列出需要用到的HTML标签: 复制代码 代码如下: <input type="fi

  • ajaxFileUpload.js插件支持多文件上传的方法

    前提条件: ajaxFileUpload.js插件多文件上传 步骤: 1.修改源码,(源码只支持单个文件的上传): 复制代码 代码如下: //修改前代码------- //var oldElement = jQuery('#' + fileElementId); //var newElement = jQuery(oldElement).clone(); //jQuery(oldElement).attr('id', fileId); //jQuery(oldElement).before(ne

  • JSP实现远程文件下载保存到服务器指定目录中的方法

    本文实例讲述了JSP实现远程文件下载保存到服务器指定目录中的方法.分享给大家供大家参考,具体如下: <%@page import="java.net.*,java.io.*"%> <%! public boolean saveUrlAs(String photoUrl, String fileName) { //此方法只能用户HTTP协议 try { URL url = new URL(photoUrl); HttpURLConnection connection =

随机推荐