emlog实现PDF预览功能(flexpaper)

使用flexpaper+swftools 即可实现pdf转swf,预览.

swftools安装见网上的介绍,这里就不一一介绍了.

本文将主要介绍怎样将flexpaper融合到emlog中来,下面是修改步骤:

目录结构如下:

emlog主题下的echo_log.php修改:

默认主题为例,在 <p class="tag"><?php blog_tag($logid); ?></p> 前加入:


<div id="flexpaper_list"></div>
<div id="flexpaper_content"></div>

主题样式文件main.css加入:



#flexpaper{
	width:95%;
	height:700px;
	border: none;
}
#flexpaper_content{
	width:95%;
	height:750px;
}


将content中,所有后缀名为pdf的替换为flexpaper预览链接,如果存在多个,则仅嵌入第一个pdf,其他的需要单独打开链接

新增js文件,并在header.php引用:


$(document).ready(function(){
	var insert_iframe = false;
	$("#content a").each(function (i,v){ 
		var src = $(v).attr('href');
		var filedesc =  $(v).html();
		var regex = new RegExp("http://(.*)?paipai.com/(.*)?(pdf)","gi");
		if(regex.test(src)){
			console.log(src+'===>ok');
			//http://xxx/content/uploadfile/201408/933e1408528998.pdf
			filename = src.substring(src.indexOf('uploadfile/')+11);
			$("#flexpaper_list").append("<a target='_blank' href='/flexpaper/simple_document.php?doc="+filename+"' >新打开页面查看["+filedesc+"]文档</a><br>");
			
			//仅拉取第一个附件,其余的需要手动点开新页面.
			if(insert_iframe==false){
				var p_width=$("#flexpaper_content").width()-100; 	p_width += 'px';
				var p_height=$("#flexpaper_content").height()-100; 	p_height += 'px';
				$("#flexpaper_content").append("<iframe id='flexpaper' src='/flexpaper/simple_document.php?doc="+filename+"&w="+p_width+"&h="+p_height+"'></iframe>");
				insert_iframe=true;
			}
	//		src=src.replace("devzc.com","static.devzc.com");
			//console.log("==>"+src);
//			$(v).attr('href',src);
		}  
	});

//end document ready
});


修改后的flexpaper:

flexpaper.rar


下面是最终的页面效果(本博客由于无pdf上传需要,所以就不集成了):

| 0个评论