`
wangchao_17915566
  • 浏览: 169576 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

javascript实现导出excel（可以导出表格线）

ExcelJavaScriptIECSS浏览器 
阅读更多

今天无意找到了很久前的js导出excel功能，用了一下感觉不错，在网上看很多人做js导出excel，可是对表格线的导出excel总是头疼，我这里有一个简单的导出js，大家可以看看。
       这只是一个简单demo，首先静态页面

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>综合信息管理系统 行政管理 安全检查  归档信息 列表</title>
<link href="../../resources/css/stlye.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
	margin-top: 10px;
	margin-bottom: 5px;
	margin-left: 5px;
	margin-right: 5px;
}
</style>
<body>
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="30" align="left" class="zibold13">当前位置：行政管理 >> 安全检查 >> <a href="aqGuidang.html">归档信息</a> >> 列表</td>
  </tr>
</table>
<table width="90%" align="center" border="0" cellpadding="0" cellspacing="0" class="neikuangtop">
  <tr>
    <td width="7%" height="30" align="right" class="left_line">时间：</td>
	<td width="15%" align="left"><input name="textfield" type="text" value="2006-09-18" size="15" height="16"></td>
	<td width="3%" align="right">至</td>
    <td width="55%" align="left"><input name="textfield2" type="text" value="2007-09-20" size="15" height="16" /></td>
    <td width="10%" align="right" style="padding-right:10px;"><input type="button" name="Submit" value="查询" onclick="javascript:location.href='#';" /></td>
    <td width="10%" align="left" style="padding-left:10px;"><input type="button" name="Submit3" value="查询统计" onclick="javascript:location.href='aqJiancha_Search.html';" /></td>
  </tr>
</table>
<table id="table1" width="90%" border="0" align="center" cellpadding="0" cellspacing="0" class="waikuang">
  <tr>
    <td width="6%" height="27" align="center" class="neikuangbold">序号</td>
	<td width="10%" align="center" class="neikuangbold">时间</td>
    <td width="20%" align="center" class="neikuangbold">单位</td>
    <td width="18%" align="center" class="neikuangbold">项目</td>
    <td width="10%" align="center" class="neikuangbold">结果等级</td>
    <td width="10%" align="center" class="neikuangbold">检查机关</td>
    <td width="8%" align="center" class="neikuangbold">记录人</td>
    <td width="12%" align="center" class="neikuangbold">记录时间</td>
    <td width="6%" align="center" class="neikuangbold">查看</td>
  </tr>
  <tr>
    <td height="21" align="center" class="neikuang">1</td>
	<td align="center" class="neikuang">1980-02-02</td>
    <td align="center" class="neikuang">武警总队</td>
    <td align="center" class="neikuang">安全用电检查</td>
    <td align="center" class="neikuang">2222222</td>
    <td align="center" class="neikuang">总部</td>
    <td align="center" class="neikuang">主席</td>
    <td align="center" class="neikuang">1980-02-02</td>
    <td align="center" class="neikuang"><a href="aqChakanShow.html">查看</a></td>
  </tr>
  <tr>
    <td height="21" align="center" class="neikuang">2</td>
	<td align="center" class="neikuang">1980-02-02</td>
    <td align="center" class="neikuang">武警总队</td>
    <td align="center" class="neikuang">安全用电检查</td>
    <td align="center" class="neikuang">2222222</td>
    <td align="center" class="neikuang">总部</td>
    <td align="center" class="neikuang">总理</td>
    <td align="center" class="neikuang">1980-02-02</td>
    <td align="center" class="neikuang"><a href="aqChakanShow.html">查看</a></td>
  </tr>
  </table>
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="25" align="right">首页 | 上一页 | 下一页 | 尾页</td>
  </tr>
</table>
<table width="90%" align="center" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50%" height="30" align="right" valign="bottom" style="padding-right:10px;"><input type="submit" name="Submit2" onclick="preview()" value="打印当前页" class="waikuang" ></td>
	<td width="50%" align="left" valign="bottom" style="padding-left:10px;"><input type="submit" name="Submit22" value="打印所有页"></td>
  </tr>
</table>
</body>

</html>

  

下面，调用js

<script language=javascript>
function preview() { 
window.clipboardData.setData("Text",document.all('table1').outerHTML);
try
{
var ExApp = new ActiveXObject("Excel.Application")
var ExWBk = ExApp.workbooks.add()
var ExWSh = ExWBk.worksheets(1)
ExApp.DisplayAlerts = false
ExApp.visible = true
}  
catch(e)
{
alert("您的电脑没有安装Microsoft Excel软件！")
return false
} 
 ExWBk.worksheets(1).Paste;	
 }
</script>

 

很简单，有兴趣的朋友可以试试。

这个js是根据table的id进行导出的，这样有个缺点：会将最后一列的“查看”进行导出excel输出。解决方法，在此页面再输出一个隐藏的table并给他标示，这个隐藏table只有数据，这样点击导出，只导出数据。方法繁重，希望有别的解决方法，如果有请指教。

 

分享到：
| 简单的MD5加密java类
评论
12 楼 kimmking 2009-01-21  
lz没有说明的是：

可能会造成ie退出后，多个excel进程存在，恶心得很。

官方的解决方案：

var idTmr = "";
function Cleanup() {
window.clearInterval(idTmr);
CollectGarbage();
}
function AutomateExcel()
{
var oXL = new ActiveXObject("Excel.Application");
oXL.DisplayAlerts = false
var oWB = oXL.Workbooks.Add();
var oSheet = oWB.ActiveSheet;
oXL.Visible = true;
oXL.UserControl = false;

// excel操作
//................

oXL = null;
idTmr = window.setInterval("Cleanup();",1);
}

11 楼 ShingU 2009-01-21  
很好的方法，值得学习！
10 楼 angelox 2009-01-17  
ayeah 写道
一般用服务器端生成个table，加个http header就能实现excel了。。。

一般简单的用这个方法挺好的，用的着费那么大劲么，还只能在ie下。
想用表格线加上下面代码就行了。 
<html xmlns:x="urn:schemas-microsoft-com:office:excel">
    <head>
        <!--[if gte mso 9]><xml>
            <x:ExcelWorkbook>
                <x:ExcelWorksheets>
                    <x:ExcelWorksheet>
                        <x:Name>工作表标题</x:Name>
                        <x:WorksheetOptions>
                            <x:Print>
                                <x:ValidPrinterInfo />
                            </x:Print>
                        </x:WorksheetOptions>
                    </x:ExcelWorksheet>
                </x:ExcelWorksheets>
            </x:ExcelWorkbook>
        </xml>
        <![endif]-->
    </head>

9 楼 han2000lei 2009-01-17  
ActiveXObject在firefox下是没法用的，现在网上基本上都是基于IE的，能不能写一个适合所有浏览器的导出程序？
8 楼 endeavor416 2008-12-24  
用Spring的导出Excel方法吧
7 楼 kebo 2008-11-21  
js导出excel看不出有啥需要的地方，在慢的客户端你都可以看到它一行行的填充，看着都难受。况且一般都是分页的，前段数据也不多，也导不全吧。jxl模板导出，要啥格式就有啥格式。
6 楼 cc87654321 2008-11-21  
这个其实没什么用了，不能控制列宽，还得在excel里面手动去拉，用户体验不好
5 楼 unifly 2008-09-10  
lendo.du 写道
貌似你这个script会执行，为什么我浏览这个页面提示有js执行速度变慢，难道Robbin没有屏蔽js?

晕，确实IE提示脚本运行慢，bug？
4 楼 ayeah 2008-09-09  
一般用服务器端生成个table，加个http header就能实现excel了。。。
3 楼 lendo.du 2008-09-08  
貌似你这个script会执行，为什么我浏览这个页面提示有js执行速度变慢，难道Robbin没有屏蔽js?
2 楼 wangchao_17915566 2008-05-30  
谢谢您的指教
1 楼 咖啡刀 2008-05-28  
但这个是基于降低安全性的操作的!!

所以如果是基于内网应用的话还是不错的!!!

并且还得安装Ofiice!
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    layui数据表格导出Excel插件

    layui数据表格导出Excel插件是一款为layui框架设计的实用工具，它允许用户方便地将layui数据表格中...总之，layui数据表格导出Excel插件提供了一个高效、便捷的解决方案，使得在layui项目中实现数据导出变得轻而易举。

    JavaScript 实现 Excel数据导出 支持多个Sheet页导出

    在实际应用中，可以封装一个函数，接受JSON数据和Sheet页配置作为参数，然后执行上述步骤，以实现一个通用的Excel导出功能。这不仅可以提高代码复用性，还能方便地根据业务需求进行扩展。 总之，纯JavaScript实现...

    ext实现导出excel的功能。

    在EXTJS这个强大的JavaScript框架中，实现导出Excel功能是一项常见的需求。EXTJS提供了一种高效的方法来将数据导出到Excel格式，使得用户能够方便地处理和分析数据。在这个场景下，我们可以从以下几个关键知识点入手...

    js 实现 用JavaScript导出图像到Excel

    js 实现 用JavaScript导出图像到Excel! 值得下载看看!资源免费,大家分享!!

    Ligerui Table导出excel 支持样式、冻结行列、图片等导出

    LigerUI Table不仅具备基本的表格功能，如排序、筛选、分页，还提供了丰富的扩展特性，如导出Excel功能。这个功能使得用户能够方便地将网页上的数据导出到Excel文件中，以便于进一步的数据分析或存储。 标题"...

    html页面表格导出excel（原生js浏览器全兼容）

    通过以上步骤，我们就可以实现在没有后端接口的情况下，使用原生JavaScript将HTML表格数据导出为Excel文件。提供的`js浏览器导出Excel`资源应该包含了一个示例，你可以参考这个示例代码来理解并应用到自己的项目中。...

    简单的导出excel表格列子

    总结来说，这个“简单的导出excel表格列子”提供了一种实用且高效的方法，通过纯JavaScript在Web页面上实现Excel导出功能，无需依赖任何插件，代码简洁易懂，对开发者来说具有很高的学习价值。通过阅读和实践压缩包...

    h5 列表导出为excel

    在IT领域，尤其是在Web开发中，常常需要将HTML5（H5）页面中的表格数据导出为Excel格式，以便用户可以方便地存储、编辑或分享数据。"h5 列表导出为excel"这个话题涉及到的技术点主要包括HTML5、JavaScript、CSS以及...

    easyui+数据导出为Excel

    总的来说，通过结合EasyUI的前端界面和SheetJS的数据处理能力，我们可以实现在浏览器端直接将数据导出为Excel文件的功能，提供用户友好的体验。在项目中，一定要根据具体需求和环境进行适当的优化和调整。

    sheetJs+xlsx-style——前端实现导出excel表格——设置单元格背景色，居中，自动换行，宽度，百分数展示等

    在前端开发中，导出Excel表格是一项常见的需求，特别是在数据可视化和报表生成的场景下。SheetJS是一个强大的JavaScript库，用于读写多种电子表格格式，包括Microsoft Excel (XLS / XLSX) 和OpenDocument (ODS) 等。...

    jquery 导出excel方法

    下面将详细介绍jQuery导出Excel的方法，以及相关知识点。 1. **jQuery插件：TableExport** 文件`tableExport.jquery.plugin-a891806`可能是一个名为TableExport的jQuery插件，它允许开发者将HTML表格数据导出为...

    vue实现导出Excel的两个js文件-Blob+Export2Excel

    本教程将详细介绍如何利用Blob和Export2Excel这两个JavaScript库来实现在Vue项目中导出Excel文件。 首先，Blob.js是一个处理Blob对象的JavaScript库，Blob对象是Web API中用于存储不可变的、原始数据的类文件对象。...

    纯前端：luckysheet在线编辑Excel导出，Excel文件导入

    Luckysheet是一款基于JavaScript的开源项目，它提供了一个类似Excel的在线编辑界面，使得用户可以在浏览器中进行表格编辑、公式计算、数据处理等一系列操作，而无需依赖任何后端服务。这极大地简化了开发流程，提高...

    纯JavaScript导出Excel

    "纯JavaScript导出Excel"的功能正是解决这个问题的一种方法，它允许开发者在不依赖任何后端服务或第三方库的情况下，直接在浏览器端将JSON格式的数据转换为可下载的Excel文件。这种技术对于那些对服务器交互有限制...

    Ext Grid 导出Excel

    这篇博客"Ext Grid 导出Excel"可能详细介绍了如何实现这一功能。 首先，让我们理解Ext Grid的基本工作原理。Ext Grid是Sencha Ext JS框架的一部分，它允许开发者创建可配置的表格视图，可以显示从服务器获取的数据...

    tableExport_html表格导出excel等多种格式

    在IT行业中，数据的导入和导出是...总的来说，"tableExport_html表格导出excel等多种格式"是一个实用的前端工具，通过简单的集成，它可以极大地提升网页表格数据的交互性和实用性，使得数据的导出变得更加便捷和高效。

    简单实用网页表格数据导出Excel电子表格文件jQuery插件

    本项目"简单实用网页表格数据导出Excel电子表格文件jQuery插件"正是为了解决这一问题。 首先，我们来探讨jQuery的核心概念。jQuery简化了JavaScript的DOM操作，提供了统一的API来选择元素、添加事件处理程序、执行...

    easyui datagrid 数据导出到Excel

    文件`Jquery_easyui_datagrid_js导出excel.doc`可能是文档说明或者包含插件使用的示例代码。通常，jQuery插件能简化Datagrid数据导出的操作。一种常见的方式是使用`html2canvas`和`jsPDF`库，它们可以将HTML内容转换...

    使用js导出带样式的excel表格

    总的来说，使用JavaScript导出带样式的Excel表格涉及了对数据的组织、样式定义以及文件生成等多个环节。通过SheetJS库，我们可以轻松地实现这一功能，提供给用户高质量的导出体验。在实际项目中，还可以根据需求进行...

Magicbox
Global site tag (gtag.js) - Google Analytics