日期:2014-05-17  浏览次数:20762 次

Extjs htmleditor中内容导出成word (二)

上一篇我们讲了怎样把Extjs htmleditor的内容保存成Word,这一篇,我们主要讲怎样在客服端(浏览器端)保存htmleditor里的内容成word。


首先介绍两个Javascript框架:

1、 downloadify

这是一个非常小的Javascript+Flash库,它允许用户在浏览器端保存内容到用户的PC,不需要和服务器交互。

项目Demo:http://pixelgraphics.us/downloadify/test.html

项目主页: https://github.com/dcneiner/Downloadify


2、opensave

opensave 是一个小巧的Javascript和ActionScript(SWF)的文件打开和文件保存的库,它可以open用户本地文件在浏览器里显示,同时也可以save浏览器里的页面到用户的电脑里。

项目主页: http://www.gieson.com/Library/projects/utilities/opensave/


downloadify 仅提供了下载功能,opensave提供了open 本地文件功能,同时也能定制button的text,功能更加强大。


由于downloadify小巧,我们的另外一个扩展库(Extjs Gridpanel 导出成excel)也使用到了downloadify,所以决定使用downloadify。

页面里没用使用Extjs的话,可以参考他们的demo很容易实现导出,下面我们主要讲解在Extjs里加入downloadify导出word。


废话少说,直接贴代码:

jsp 文件:

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!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>Insert title here</title>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/extjs/resources/css/ext-all.css" />    
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/Extmain.css" />
	<script type="text/javascript" src="<%=request.getContextPath()%>/extjs/ext-all.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/extjs/exporter/downloadify.min.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/extjs/exporter/swfobject.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/js/constant.js"></script>	
	<script type="text/javascript" src="<%=request.getContextPath()%>/view/project/audit/audit_scheme_view.js"></script>
</head>
<body style="margin:0; padding:0;">	
	<script type="text/javascript">
		Ext.onReady(function(){
			createPanel();
			loadScheme('${projectId}');
		});		
	</script>
</body>
</html>

相关的Javasc代码: audit_scheme.js

/**
 * 创建显示面板
 */
function createPanel(){
	 new Ext.panel.Panel({
	    title: '查看工作方案',
	    id: 'contentPanel',
	    renderTo: Ext.getBody(),
	    width : document.body.clientWidth*0.98,
	    height: document.documentElement.clientHeight,
	    titleAlign :'center',
	    frame: true,
	    layout: 'fit',	    
	    items: [{
		        xtype: 'htmleditor',
		        id: 'content',
		        name: 'content',
		        overflowY: 'scroll',
		        enableColors: false,
		        enableAlignments: false,
		        enableFont: false,
		        enableFontSize: false,
		        enableFormat: false,
		        enableLinks: false,
		        enableLists: false,
		        enableSourceEdit: false
		    }],
	    tbar: ['->',{
		    	xtype: 'button',
		    	text: '导出',
		    	iconCls: 'icon-export-word',
		    	width: 58,
		    	height: 28,
		    	listeners:{
		    		afterrender: setExportButton
		    	}
		    }]
	});
}

/**
 * 设置导出word的按钮。
 * @param button
 * @param eOpts
 */
function setExportButton(button){
	Downloadify.create(button.getId(), {
		filename: function(){
			return "审计工作方案.doc";
		},
		data: function(){ 
			var headerStart = "<html xmlns:v='urn:schemas-microsoft-com:vml' " +
			"xmlns:o='urn:schemas-microsoft-com:office:office'&qu