注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧光影工作室

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐

网页显示pdf文件1  

2013-11-04 17:24:27|  分类: html |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
首先要在网页中显示出pdf。


方法一:防下载的一种解决方法,仅IE可用。chrome不显示。

<HTML>
    <HEAD>
        <META http-equiv="Content-Type" content="text/html; charset=gb2312">
        <META http-equiv="Content-Style-Type" content="text/css">
        <META http-equiv="Content-Script-Type" content="text/javascript">
        <TITLE>Checking if Acrobat Reader installed (IE4+)...</TITLE>
        <SCRIPT for="window" event="onload"
<!--
            document.all [
                         document.all.PDFNotKnown ? "IfNoAcrobat" : "IfAcrobat"
                         ] .style.display = "block";
        //--></SCRIPT>
    </HEAD>
    <BODY>
        <NOSCRIPT>
            Cannot determine if you have Acrobat Reader (or the full Acrobat)
            installed <FONT size="-1">(because JavaScript is unavailable or 
            turned off)</FONT>.
        </NOSCRIPT>
        <DIV id="IfNoAcrobat" style="display:none">
            你需要先安装Adobe Reader才能正常浏览文件,请点击这里下载Adobe Reader.
        </DIV>


        <OBJECT type="application/pdf" width=0 height=0 style="display:none">

            <DIV id="PDFNotKnown" style="display:none">&nbsp;</DIV>
        </OBJECT>
   <DIV id=showdiv
style="Z-INDEX: 0; LEFT:10px; WIDTH: 990px; POSITION: absolute; TOP: -8px; HEIGHT: 10px">
<object classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" width="990" height="700" border="0" top="-10" name="pdf"> 
<param name="toolbar" value="false">
<param name="_Version" value="65539">

<param name="_ExtentX" value="20108">

<param name="_ExtentY" value="10866">

<param name="_StockProps" value="0">

<param name="SRC" value="MXL.pdf">
</object>


</DIV>

</BODY>
</HTML>


下面这段代码加入embed,chrome和ff都能显示了。
经验:object和embed要并列设置。
不足:这个js代码有点画蛇添足,去掉也没影响;不去掉还有错误。。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- saved from url=(0022) http://mio.web1337.net/ -->
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pdf在网页中的显示问题</title>


<script for="window" event="onload">
//Checking if Acrobat Reader installed (IE4+)...
document.all[
document.all.PDFNotKnown ? "IfNoAcrobat" : "IfAcrobat"
].style.display = "block";
</script>
<style>
.mid{margin-left:auto; width:976px; margin-right:auto; }
</style>

</head>
<body>

<!-- if javascript不可用,则提示: -->
<noscript>
Cannot determine if you have Acrobat Reader (or the full Acrobat) installed
<font size="-1">(because JavaScript is unavailable or turned off)</font>.
</noscript>

<!-- if 没有安装adobe reader,则提示: -->
<div id="IfNoAcrobat" style="display:none">
你需要先安装Adobe Reader才能正常浏览文件,请点击这里下载Adobe Reader.
</div>


<!-- if adobe reader异常,则提示: -->
<object type="application/pdf" width=0 height=0 style="display:none">
<div id="PDFNotKnown" style="display:none">&nbsp;</div>
</object>


<!-- 显示pdf 开始 -->
<div id=showdiv class=mid>
<!-- object为IE而写。最后一句的embed为chrome和ff而写 -->
<object classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" width="990" height="700" border="0" top="-10" name="pdf">
<param name="toolbar" value="false">
<param name="_Version" value="65539">
<param name="_ExtentX" value="20108">
<param name="_ExtentY" value="10866">
<param name="_StockProps" value="0">
<param name="SRC" value="sample.pdf">

<embed name="plugin" src="./sample.pdf" type="application/pdf" width="976" height="1000">
</object>

</div>
<!-- 显示pdf 结束 -->


</body>
</html>







方法二:使用pdfobject.js
兼容IE8,chrome,ff。但是需要客户端安装有adobe reader。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>PDF浏览器,兼容IE8,chrome,ff——PDFObject example</title>

<script type="text/javascript" src="pdfobject.js"></script>

<!-- insert in the document head -->
<script type='text/javascript'>
function embedPDF(){
var myPDF = new PDFObject({
url: 'sample.pdf',
// pdfOpenParams: { pagemode: 'bookmarks', scrollbars: '1', toolbar: '1', statusbar: '1', messages: '1', navpanes: '1' },

}).embed('showPDF');
// Be sure your document contains an element with the ID 'showPDF'
}

window.onload = embedPDF; //Feel free to replace window.onload if needed.
</script>



<!--这个也能工作,不过上面的是官方生成的代码
<script type="text/javascript">
window.onload = function (){
var success = new PDFObject({ url: "sample.pdf" }).embed("showPDF");
};
</script>-->



</head>
<body>

<a href="http://www.pdfobject.com/instructions.php" target="_blank">pdfObject.js 官方主页</a><br>
原理:嵌入html的pdf对象,客户端安装有pdf阅读器才能阅读。<br>
如果客户端没有安装pdf阅读器,可以考虑使用相应的html代码表示出pdf文件。详情看官网。<br>
缺点:没有控制按钮,不便于操作。


<div id=showPDF style="height:400px; margin:50px auto; width:1000px; border:#FE0859 2px solid;">

<p>It appears you don't have Adobe Reader or PDF support in this web
browser. <a href="sample.pdf">Click here to download the PDF</a></p>

</div><!-- pdf区域结束 -->


</body>
</html>





方法三:使用谷歌文档
需要有pdf的绝对地址。

<div style="width:800px; margin:10px auto; ">

<iframe src="http://docs.google.com/gview?url=http://example.com/sample.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>

</div>


方法四:使用pdf.js
这是终极方法,因为他是我们希望的样子:客户端即使没有adobe reader也能查看pdf。
但是遗憾的是,他的兼容性目前还不好。





方法五:使用商业化的代码

商业化网站: http://flexpaper.studylead.com

相关开源项目:FlexPaper logo在线文档显示组件 FlexPaper
开源项目源码: http://www.oschina.net/p/flexpaper

FlexPaper是一个开源轻量级的在浏览器上显示各种文档的组件,被设计用来与PDF2SWF一起使用, 使在Flex中显示PDF成为可能,而这个过程并无需PDF软件环境的支持。它可以被当做Flex的库来使用。

另外你也可以通过将一些例如Word、PPT等文档转成PDF,然后实现在线浏览。

一. 使用PDF2SWF准备好你的文档

首先要将PDF转成SWF,这步可以使用开源的SwfTools自动完成。http://www.oschina.net/p/swftools

1.下载安装 SwfTools,当前最新版本是0.9
2. 转换PDF到SWF,可以通过命令行的方式,例如将Paper3.pdf转换成Paper3.swf
      C:\SWFTools\pdf2swf Paper3.pdf -o Paper3.swf


二. 使用已经编译好的FlexPaper的flash版本浏览你的文档

  1. 下载并解压出已经编译好的FlexPaper
  2. zip文件包含一个例子文件叫做FlexPaperViewer.html,它向你展示了需要传给FlexPaper的 基本参数 

    var params = {
       SwfFile : "Paper.swf",
       Scale : 0.6
    }
    swfobject.embedSWF("FlexPaperViewer.swf","cb","500","500","9.0.0","js/swfobject/expressInstall.swf", params);

    //SwfFile参数是你想显示的文件,Scale是0-1之间的数,表示显示的放大参数

  3. 复制你创建出来的swf和PDF2SWF到解压缩出的相同目录
  4. 确定你添加了FlexPaperViewer.swf


三. 在Flex中使用FlexPaper

1. 下载FlexPaper SWC,添加到你的Flex项目libs中
2. 复制你用PDF2SWF创建的SWF到你的bin-debug目录,如Paper3.swf,添加FlexPaper组 件到你的flex代码中Xml代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute"
    width="800" height="500"
    xmlns:flexpaper="com.devaldi.controls.flexpaper.*">
    
    <flexpaper:FlexPaperViewer width="800" height="500" 
        Scale="1" SwfFile="Paper3.swf" />
    
</mx:Application>

四. 去除logo和打印:






refer
1.百度文库:flexPaper开发手册
2. 本文续集: 就是第一部分在抄写一遍:http://poster469.blog.163.com/blog/static/13191134201310160920776/
--

  评论这张
 
阅读(1604)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017