pdf 文档 在线预览
2013-01-19 16:17
585 查看
网上说的好多pdf 的预览功能 ，大都扯淡 或不好用。现在项目需要，研究下。经典应用是是 swftools 将pdf 转换为swf 。用flexpaper.js 展示信息。
资源下载：
1. swftools 转换工具下载，http://www.swftools.org/download.html
2. flexpaper 预览插件 http://flexpaper.devaldi.com/
3. jquery-uploadify 插件 http://www.uploadify.com/
上代码：
php 上传代码： <?php
class UploadAction extends Action {
function doupload() {
import("ORG.Net.UploadFile");
import("ORG.Util.Image");
//查询图片分类的尺寸
$pos=AdposModel::model()->getOneByWhere(array("id"=>intval($_POST['pos'])),array("heigth","width"));
//========================================================
$upload = new UploadFile();
// $upload->maxSize = 3292200; //设置上传文件大小
// $upload->allowExts = explode(',', 'jpg,gif,png,jpeg'); //设置上传文件类型
$upload->savePath = "Public/upload/";//设置附件上传目录
// $upload->thumb = true; //设置需要生成缩略图，仅对图像文件有效
// $upload->thumbPrefix = 'ad_'; //生产2张缩略图
// $upload->thumbMaxWidth = $pos['width']?$pos['width']:300; //设置缩略图最大宽度
// $upload->thumbMaxHeight =$pos['height']?$pos['height']:300; //设置缩略图最大高度
$upload->saveRule ='getbas'; //设置上传文件规则
$upload->thumbRemoveOrigin = true; //删除原图
if (!$upload->upload()) {
echo $upload->getErrorMsg();
} else {
$uploadList = $upload->getUploadFileInfo();
return "ad_".$uploadList[0]['savename'];
// import("@.ORG.Image");
//给m_缩略图添加水印, Image::water('原文件名','水印图片地址')
// Image::water($uploadList[0]['savepath'] . 'm_' . $uploadList[0]['savename'], '/thinkphp/examples/File/Tpl/Public/Images/logo2.png');
$uploadList[0]['savename'];
}
}
public function checkfile() {
$targetFolder = "Public/upload/";//设置附件上传目录
if (file_exists($targetFolder . '/' . $_POST['filename'])) {
echo 1;
} else {
echo 0;
}
}
}
?>
//html 上传代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>添加信息</title>
<import type='css' file="css/style,css/box,css/uploadify" />
<import file="js/jquery,js/formvalidator,js/formValidatorRegex,ckeditor/ckeditor,js/jquery-uploadify" />
</head>
<body>
<div class="so_main">
<div class="Toolbar_inbox mst" >
<span class="page_tit">{$Think.config.SYSTEM_TITLE}添加文章</span>
</div>
<form id="form1" action="{:U('Arctic/doaddarctic')}" method="post"> <div class="form2">
<dl class="lineD">
<dt> <label for="MechantModel_account" class="required">标题</label>：</dt>
<dd>
<input name="title" id="title" type="text" style="width:180px"/>
</dl>
<dl class="lineD">
<dt> <label for="MechantModel_account" class="required">分类</label>：</dt>
<dd>
<select name="cat" id="cat" style="width:150px">
<volist id="val" name="catlist">
<option value="{$val.id}-{$val.name}">{$val.name}</option>
</volist>
</select>
<!--<span class="required_s">* <font size="-1"></font></span> -->
<p></p>
</dl>
<dl class="lineD">
<dt> <label for="MechantModel_account" class="required">备注</label>：</dt>
<dd>
<input name="remark" id="remark" type="text" style="width:180px" />
</dl>
<dl class="lineD">
<dt> <label for="MechantModel_account" class="required">内容</label>：</dt>
<dd>
<textarea cols="30" rows="5" name="content" id="spgood"></textarea>
<script type="text/javascript">
//<![CDATA[
// This call can be placed at any point after the
// <textarea>, or inside a <head><script> in a
// window.onload event handler.
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace( 'spgood' );
//]]>
</script>
<!--<span class="required_s">* <font size="-1"></font></span> -->
<p></p>
</dl>
<dl class="lineD">
<dt> <label for="MechantModel_account" class="required">附件上传</label>：</dt>
<dd id="fijians">
<div id="cont">
</div>
<input type="file" id="file_upload"/>
</dl>
<div class="page_btm">
<input type="submit" class="btn_b" value=" 添加文章 " />
</div>
</div>
</form></div>
<div id="footer">{$Think.config.SYSTEM_FOOT}</div>
</body>
</html>
<?php $timestamp = time();?>
<script type="text/javascript">
$(document).ready(function(){
$.formValidator.initConfig({formID:"form1",theme:'ArrowSolidBox',mode:'AutoTip',onError:function(msg){alert(msg)},inIframe:true});
$("#title").formValidator({onShow:"请输入文章标题",onFocus:"请输入文章标题至少6个字符,最多199个字符"}).inputValidator({min:2,max:199,onError:"你输入的文章标题非法,请确认"});
$("#remark").formValidator({empty:true,onShow:"请输入文章备注",onFocus:"请输入文章备注至少6个字符,最多199个字符"}).inputValidator({min:1,max:199,onError:"你输入的文章备注非法,请确认"});
$.formValidator.reloadAutoTip();
$('#file_upload').uploadify({
'formData' : {
'timestamp' : '<?php echo $timestamp;?>',
'token' : '<?php echo md5('unique_salt' . $timestamp);?>',
},
'multi' : true,
'swf' : '__PUBLIC__/js/uploadify.swf',
'uploader' : '__APP__/Upload/doupload',
'buttonText' : '选择文件',
//'checkExisting' : '__APP__/Upload/checkfile',
'onUploadSuccess' : function(file, data, response) {
if(!data){
var str="<p style=\"border:#ccc 1px solid; width:250px; padding:5px;\">上传附件:<a href=\"#\">"+file.name+"</a></p><br/>";
str+='<input type="hidden" value="'+file.name+'" name="fujian[]">';
$("#cont").append(str);
}else{
alert("上传失败!"+data);
}
},
});
});
</script>
//////===============================================
后台运行 sh 将转换 pdf
#!/bin/sh
cd /data/web/hroa/Public/upload
list=$(ls *.pdf);
for i in $list;
do
/usr/local/swtools/bin/pdf2swf $i 1>/dev/null 2>/dev/null;
mv $i pdf;
mv *.swf swf;
done;
//预览html
<!doctype html>
<html>
<head>
<title><?php
echo base64_decode($file);
?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body { height:100%; }
body { margin:0; padding:0; overflow:auto; }
#flashContent { display:none; }
</style>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/flexpaper.css" />
<script type="text/javascript" src="__PUBLIC__/js/jquery.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/flexpaper.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/flexpaper_handlers.js"></script>
</head>
<body>
<div id="documentViewer" class="flexpaper_viewer"></div>
<script type="text/javascript">
var startDocument = "Paper";
$('#documentViewer').FlexPaperViewer(
{ config : {
SWFFile : '__PUBLIC__/upload/swf/{$file}',
jsDirectory:'__PUBLIC__/js/',
Scale : 1,
ZoomTransition : 'easeout',
ZoomTime : 0.5,
ZoomInterval : 0.2,
FitPageOnLoad : true,
FitWidthOnLoad : true,
FullScreenAsMaxWindow : false,
ProgressiveLoading : false,
MinZoomSize : 0.2,
MaxZoomSize : 5,
SearchMatchAll : true,
InitViewMode : 'Portrait',
RenderingOrder : 'flash,html',
StartAtPage : '',
ViewModeToolsVisible : true,
ZoomToolsVisible : true,
NavToolsVisible : true,
CursorToolsVisible : true,
SearchToolsVisible : true,
WMode : 'window',
localeChain: 'zh_CN'
}}
);
</script>
</body>
</html>
资源下载：
1. swftools 转换工具下载，http://www.swftools.org/download.html
2. flexpaper 预览插件 http://flexpaper.devaldi.com/
3. jquery-uploadify 插件 http://www.uploadify.com/
上代码：
php 上传代码： <?php
class UploadAction extends Action {
function doupload() {
import("ORG.Net.UploadFile");
import("ORG.Util.Image");
//查询图片分类的尺寸
$pos=AdposModel::model()->getOneByWhere(array("id"=>intval($_POST['pos'])),array("heigth","width"));
//========================================================
$upload = new UploadFile();
// $upload->maxSize = 3292200; //设置上传文件大小
// $upload->allowExts = explode(',', 'jpg,gif,png,jpeg'); //设置上传文件类型
$upload->savePath = "Public/upload/";//设置附件上传目录
// $upload->thumb = true; //设置需要生成缩略图，仅对图像文件有效
// $upload->thumbPrefix = 'ad_'; //生产2张缩略图
// $upload->thumbMaxWidth = $pos['width']?$pos['width']:300; //设置缩略图最大宽度
// $upload->thumbMaxHeight =$pos['height']?$pos['height']:300; //设置缩略图最大高度
$upload->saveRule ='getbas'; //设置上传文件规则
$upload->thumbRemoveOrigin = true; //删除原图
if (!$upload->upload()) {
echo $upload->getErrorMsg();
} else {
$uploadList = $upload->getUploadFileInfo();
return "ad_".$uploadList[0]['savename'];
// import("@.ORG.Image");
//给m_缩略图添加水印, Image::water('原文件名','水印图片地址')
// Image::water($uploadList[0]['savepath'] . 'm_' . $uploadList[0]['savename'], '/thinkphp/examples/File/Tpl/Public/Images/logo2.png');
$uploadList[0]['savename'];
}
}
public function checkfile() {
$targetFolder = "Public/upload/";//设置附件上传目录
if (file_exists($targetFolder . '/' . $_POST['filename'])) {
echo 1;
} else {
echo 0;
}
}
}
?>
//html 上传代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>添加信息</title>
<import type='css' file="css/style,css/box,css/uploadify" />
<import file="js/jquery,js/formvalidator,js/formValidatorRegex,ckeditor/ckeditor,js/jquery-uploadify" />
</head>
<body>
<div class="so_main">
<div class="Toolbar_inbox mst" >
<span class="page_tit">{$Think.config.SYSTEM_TITLE}添加文章</span>
</div>
<form id="form1" action="{:U('Arctic/doaddarctic')}" method="post"> <div class="form2">
<dl class="lineD">
<dt> <label for="MechantModel_account" class="required">标题</label>：</dt>
<dd>
<input name="title" id="title" type="text" style="width:180px"/>
</dl>
<dl class="lineD">
<dt> <label for="MechantModel_account" class="required">分类</label>：</dt>
<dd>
<select name="cat" id="cat" style="width:150px">
<volist id="val" name="catlist">
<option value="{$val.id}-{$val.name}">{$val.name}</option>
</volist>
</select>
<!--<span class="required_s">* <font size="-1"></font></span> -->
<p></p>
</dl>
<dl class="lineD">
<dt> <label for="MechantModel_account" class="required">备注</label>：</dt>
<dd>
<input name="remark" id="remark" type="text" style="width:180px" />
</dl>
<dl class="lineD">
<dt> <label for="MechantModel_account" class="required">内容</label>：</dt>
<dd>
<textarea cols="30" rows="5" name="content" id="spgood"></textarea>
<script type="text/javascript">
//<![CDATA[
// This call can be placed at any point after the
// <textarea>, or inside a <head><script> in a
// window.onload event handler.
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace( 'spgood' );
//]]>
</script>
<!--<span class="required_s">* <font size="-1"></font></span> -->
<p></p>
</dl>
<dl class="lineD">
<dt> <label for="MechantModel_account" class="required">附件上传</label>：</dt>
<dd id="fijians">
<div id="cont">
</div>
<input type="file" id="file_upload"/>
</dl>
<div class="page_btm">
<input type="submit" class="btn_b" value=" 添加文章 " />
</div>
</div>
</form></div>
<div id="footer">{$Think.config.SYSTEM_FOOT}</div>
</body>
</html>
<?php $timestamp = time();?>
<script type="text/javascript">
$(document).ready(function(){
$.formValidator.initConfig({formID:"form1",theme:'ArrowSolidBox',mode:'AutoTip',onError:function(msg){alert(msg)},inIframe:true});
$("#title").formValidator({onShow:"请输入文章标题",onFocus:"请输入文章标题至少6个字符,最多199个字符"}).inputValidator({min:2,max:199,onError:"你输入的文章标题非法,请确认"});
$("#remark").formValidator({empty:true,onShow:"请输入文章备注",onFocus:"请输入文章备注至少6个字符,最多199个字符"}).inputValidator({min:1,max:199,onError:"你输入的文章备注非法,请确认"});
$.formValidator.reloadAutoTip();
$('#file_upload').uploadify({
'formData' : {
'timestamp' : '<?php echo $timestamp;?>',
'token' : '<?php echo md5('unique_salt' . $timestamp);?>',
},
'multi' : true,
'swf' : '__PUBLIC__/js/uploadify.swf',
'uploader' : '__APP__/Upload/doupload',
'buttonText' : '选择文件',
//'checkExisting' : '__APP__/Upload/checkfile',
'onUploadSuccess' : function(file, data, response) {
if(!data){
var str="<p style=\"border:#ccc 1px solid; width:250px; padding:5px;\">上传附件:<a href=\"#\">"+file.name+"</a></p><br/>";
str+='<input type="hidden" value="'+file.name+'" name="fujian[]">';
$("#cont").append(str);
}else{
alert("上传失败!"+data);
}
},
});
});
</script>
//////===============================================
后台运行 sh 将转换 pdf
#!/bin/sh
cd /data/web/hroa/Public/upload
list=$(ls *.pdf);
for i in $list;
do
/usr/local/swtools/bin/pdf2swf $i 1>/dev/null 2>/dev/null;
mv $i pdf;
mv *.swf swf;
done;
//预览html
<!doctype html>
<html>
<head>
<title><?php
echo base64_decode($file);
?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body { height:100%; }
body { margin:0; padding:0; overflow:auto; }
#flashContent { display:none; }
</style>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/flexpaper.css" />
<script type="text/javascript" src="__PUBLIC__/js/jquery.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/flexpaper.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/flexpaper_handlers.js"></script>
</head>
<body>
<div id="documentViewer" class="flexpaper_viewer"></div>
<script type="text/javascript">
var startDocument = "Paper";
$('#documentViewer').FlexPaperViewer(
{ config : {
SWFFile : '__PUBLIC__/upload/swf/{$file}',
jsDirectory:'__PUBLIC__/js/',
Scale : 1,
ZoomTransition : 'easeout',
ZoomTime : 0.5,
ZoomInterval : 0.2,
FitPageOnLoad : true,
FitWidthOnLoad : true,
FullScreenAsMaxWindow : false,
ProgressiveLoading : false,
MinZoomSize : 0.2,
MaxZoomSize : 5,
SearchMatchAll : true,
InitViewMode : 'Portrait',
RenderingOrder : 'flash,html',
StartAtPage : '',
ViewModeToolsVisible : true,
ZoomToolsVisible : true,
NavToolsVisible : true,
CursorToolsVisible : true,
SearchToolsVisible : true,
WMode : 'window',
localeChain: 'zh_CN'
}}
);
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- word文档 pdf在线预览方案
- java将office文档pdf文档转换成swf文件在线预览
- office(doc,xls,txt,pdf,ppt)文档在线预览及转换(office2pdf) - PHP版
- word文档 pdf在线预览方案
- vue插件开发 使用pdf.js实现手机端在线预览pdf文档
- word文档 pdf在线预览方案
- 类似百度文库在线预览文档flash版(支持word、excel、ppt、pdf)
- word文档 pdf在线预览方案
- 类似百度文库在线预览文档flash版（支持word、excel、ppt、pdf）+在线预览文档html版
- Java实现office文档与pdf文档的在线预览功能
- word文档 pdf在线预览方案
- java将office文档pdf文档转换成swf文件在线预览
- pdfjs文档在线预览
- C#在线预览文档（word，excel，pdf，txt，png）
- Android实现在线预览office文档(Word,Pdf,excel,PPT.txt等格式)
- word文档 pdf在线预览方案
- vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
- word文档 pdf在线预览方案
- java对office、pdf文档在线预览解析（融合进项目中）
- openOffice+jodConverter+jquery.media.js在线预览office、pdf、txt等文档