Extjs htmleditor中内容导出成word （2）
日期：2014-05-17 浏览次数：20837 次
Extjs htmleditor中内容导出成word （二）
相关的Javasc代码： audit_scheme.js
上一篇我们讲了怎样把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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
