将页面table内容与样式另存成excel文件的方法

在项目做完之余，测试最近做的一个论坛，其中有个导出功能，发现点击网页导出按钮之后，将页面的table内容另存为excel文件后，却发现无法保存表格样式，经过问题分析之后找到根本原因，下面小编就把我的实现思路给大家分享如下：

问题描述：

问题分析过程：

1.table表格用class，而不是style。导出时并没有导出class定义，若换成style，将颜色样式直接写在style中，就会导出样式。

style是样式，在HTML中用这个来标明属性样式，是css中的内容，而class是类，申明和定义里面的内容，导出页面时并不会导出定义即class所定义的样式。

2.将类定义放到table中也可以导出样式

下面通过两种方案解决此问题。

处理方案一：

将class="${getClass()}"换成style="color:${getStyle()};"

补充：

 $('#export').click(function () {
 saveAsExcel($('h3').text(), $('#table').html().replace(/( )+/gi,''));
 });

其中excel只识别table,使用saveAsExcel方法自动另存时，class定义保存不了；如果手工拷贝粘贴到excel时，class定义就能保存了。
主要还是手工与自动拷贝粘贴问题

处理方案二：

将在<head><style></style></head>中定义的类移动到<table></table>之间即可。类定义样式的位置问题

以上内容就是本文的全部内容，希望大家喜欢。

赞 (0)

相关推荐

  • js导出table数据到excel即导出为EXCEL文档的方法

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • datatable生成excel和excel插入图片示例详解

    datatable生成excel和excel插入图片示例详解

    Excel知识点 一.添加引用和命名空间 添加Microsoft.Office.Interop.Excel引用,它的默认路径是C:\Program Files\Microsoft Visual Studio 9.0\Visual Studio Tools for Office\PIA\Office12\Microsoft.Office.Interop.Excel.dll 代码中添加引用using Microsoft.Office.Interop.Excel; 二.Excel类的简单介绍 此命名空

  • .Net读取Excel 返回DataTable实例代码

    复制代码 代码如下: using System;using Microsoft.SharePoint;using Microsoft.SharePoint.WebControls;using System.Data;using System.IO;using System.Linq;using System.Web;using System.Collections;using System.Data.OleDb;using NuctechProject.DTO.Bll;using System.

  • asp.net中Table生成Excel表格的方法

    本文实例讲述了asp.net中Table生成Excel表格的方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19

  • npoi2.0将datatable对象转换为excel2007示例

    NPOI 2.0将DataTable对象转换为Excel 2007文件提供下载 复制代码 代码如下: using NPOI.SS.UserModel;using NPOI.XSSF.UserModel;using System.IO;        private Stream RenderDataTableToExcel(DataTable SourceTable)        {            XSSFWorkbook workbook = null;            Mem

  • js导出table到excel同时兼容FF和IE示例

    复制代码 代码如下: <pre name="code" class="html">前台调用(第一个参数是table的id): <input value="导出" type="button" /> function toExcel(inTblId, inWindow) { if ($.browser.msie) { //如果是IE浏览器 try { var allStr = ""; v

  • C#操作EXCEL DataTable转换的实例代码

    复制代码 代码如下: //加载Excel          public   DataSet LoadDataFromExcel(string filePath)         {             try            {                 string strConn;                 //strConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + filePath + &qu

  • DataTable数据导出成Excel文件的小例子

    复制代码 代码如下: /// /// 将DataTable中的数据导出到指定的Excel文件中 /// /// Web页面对象 /// 包含被导出数据的DataTable对象 /// Excel文件的名称public static void Export(System.Web.UI.Page page,System.Data.DataTable tab,string FileName) { System.Web.HttpResponse httpResponse = page.Response;

  • Asp.net中DataTable导出到Excel的方法介绍

    复制代码 代码如下: #region  DataTable导出到Excel        /// <summary>        /// DataTable导出到Excel        /// </summary>        /// <param name="pData">DataTable</param>        /// <param name="pFileName">导出文件名</p

  • 通过table标签,PHP输出EXCEL的实现方法

    通过table标签,PHP输出EXCEL的实现方法

    关键代码: 复制代码 代码如下: <?php header("Content-type:application/vnd.ms-excel"); header("Conten-Disposition:filename=hp.xlsx"); ?> 第一句是用来声明文件内容的格式:第二局是用来修改文件名的.如果没有第二个语句的话,生成的文件将是没有后缀名的.实现代码: 复制代码 代码如下: <meta http-equiv="Content-T

  • C#使用oledb读取excel表格内容到datatable的方法

    本文实例讲述了C#使用oledb读取excel表格内容到datatable的方法.分享给大家供大家参考.具体分析如下: 首先看一段实例代码 复制代码 代码如下: string strCon = @"Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" + excel_path + ";Extended Properties='Excel 12.0;HDR=YES;IMEX=1'"; OleDbConnection myCon

  • C#将html table 导出成excel实例

    复制代码 代码如下: public void ProcessRequest (HttpContext context) { string elxStr = "<table><tbody><tr><td>1</td><td>11</td></tr><tr><td>2</td><td>22</td></tr></tbody>

  • JavaScript将Table导出到Excel实现思路及代码

    复制代码 代码如下: function copyToExcel(tableid) { //控制按钮 var btn = document.getElementById("copy"); btn.setAttribute("disabled", "true"); btn.setAttribute("value", "处理中..."); var curTbl = document.getElementById(

随机推荐