Extjs htmleditor中内容导出成word （二）

最新推荐文章于 2022-06-27 15:21:44 发布

walkerJong

最新推荐文章于 2022-06-27 15:21:44 发布

阅读量6.3k

点赞数 1

分类专栏： extjs 文章标签： extjs function stylesheet office button actionscript

本文链接：https://blog.csdn.net/walkerJong/article/details/7877772

版权

extjs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

上一篇我们讲了怎样把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 里可以再这里下载（额外提供了几个导出按钮的图片）或去她的主页下载。