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小巧，我们项目中使用到了downloadify的excel导出扩展库（Extjs Gridpanel 导出成excel）， 所以决定使用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();
});
</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'" +
"xmlns:w='urn:schemas-microsoft-com:office:word'" +
"xmlns:m='http://schemas.microsoft.com/office/2004/12/omml'" +
"xmlns='http://www.w3.org/TR/REC-html40'> ";
var headerEnd = "</html> ";
return headerStart+Ext.getCmp("content").getValue()+headerEnd;
},
onComplete: function(){ alert('文件导出成功！'); },
onCancel: function(){ alert('您取消了文件导出！'); },
onError: function(){ alert('文件导出失败！'); },
swf: webpath+'/extjs/exporter/downloadify.swf',
downloadImage: webpath+'/extjs/exporter/images/export-word.png',
width: 58,
height: 28,
transparent: true,
append: false
});
}项目使用到：
Extjs 4.1.0 + Extjs exporter (包含了downloadify), 当然也可以直接去downloadify主页下载.
下面的代码片段是为Extjs的某个button增加downloadify的导出响应。
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'" +
"xmlns:w='urn:schemas-microsoft-com:office:word'" +
"xmlns:m='http://schemas.microsoft.com/office/2004/12/omml'" +
"xmlns='http://www.w3.org/TR/REC-html40'> ";
var headerEnd = "</html> ";
return headerStart+Ext.getCmp("content").getValue()+headerEnd;
},
onComplete: function(){ alert('文件导出成功！'); },
onCancel: function(){ alert('您取消了文件导出！'); },
onError: function(){ alert('文件导出失败！'); },
swf: webpath+'/extjs/exporter/downloadify.swf',
downloadImage: webpath+'/extjs/exporter/images/export-word.png',
width: 58,
height: 28,
transparent: true,
append: false
});
用到的Extjs exporter 里可以再这里下载（额外提供了几个导出按钮的图片）或去她的主页下载。