`
hunter090730
  • 浏览: 194762 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

有用的一些JS脚本-(用JavaScript实现的Excel报表)

    博客分类:
  • js
阅读更多

/**
 * allows for downloading of grid data (store) directly into excel
 * Method: extracts data of gridPanel store, uses columnModel to construct XML excel document,
 * converts to Base64, then loads everything into a data URL link.
 *
 * @author        Animal        <extjs support team>
 *
 */

/**
 * base64 encode / decode
 *
 * @location     http://www.webtoolkit.info/
 *
 */

var Base64 = (function() {
    // Private property
    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

    // Private method for UTF-8 encoding
    function utf8Encode(string) {
        string = string.replace(/\r\n/g,"\n");
        var utftext = "";
        for (var n = 0; n < string.length; n++) {
            var c = string.charCodeAt(n);
            if (c < 128) {
                utftext += String.fromCharCode(c);
            }
            else if((c > 127) && (c < 2048)) {
                utftext += String.fromCharCode((c >> 6) | 192);
                utftext += String.fromCharCode((c & 63) | 128);
            }
            else {
                utftext += String.fromCharCode((c >> 12) | 224);
                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                utftext += String.fromCharCode((c & 63) | 128);
            }
        }
        return utftext;
    }

    // Public method for encoding
    return {
        encode : (typeof btoa == 'function') ? function(input) {
            return btoa(utf8Encode(input));
        } : function (input) {
            var output = "";
            var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
            var i = 0;
            input = utf8Encode(input);
            while (i < input.length) {
                chr1 = input.charCodeAt(i++);
                chr2 = input.charCodeAt(i++);
                chr3 = input.charCodeAt(i++);
                enc1 = chr1 >> 2;
                enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                enc4 = chr3 & 63;
                if (isNaN(chr2)) {
                    enc3 = enc4 = 64;
                } else if (isNaN(chr3)) {
                    enc4 = 64;
                }
                output = output +
                keyStr.charAt(enc1) + keyStr.charAt(enc2) +
                keyStr.charAt(enc3) + keyStr.charAt(enc4);
            }
            return output;
        }
    };
})();

Ext.override(Ext.grid.GridPanel, {
    getExcelXml: function(includeHidden,functionName) {
        var worksheet = this.createWorksheet(includeHidden,functionName);
        var totalWidth = this.getColumnModel().getTotalWidth(includeHidden);
        return '<xml version="1.0" encoding="utf-8">' +
            '<ss:Workbook xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:o="urn:schemas-microsoft-com:office:office">' +
            '<o:DocumentProperties><o:Title>' + this.title + '</o:Title></o:DocumentProperties>' +
            '<ss:ExcelWorkbook>' +
            '<ss:WindowHeight>' + worksheet.height + '</ss:WindowHeight>' +
            '<ss:WindowWidth>' + worksheet.width + '</ss:WindowWidth>' +
            '<ss:ProtectStructure>False</ss:ProtectStructure>' +
            '<ss:ProtectWindows>False</ss:ProtectWindows>' +
            '</ss:ExcelWorkbook>' +
            '<ss:Styles>' +
            '<ss:Style ss:ID="Default">' +
            '<ss:Alignment ss:Vertical="Top" ss:WrapText="1" />' +
            '<ss:Font ss:FontName="arial" ss:Size="10" />' +
            '<ss:Borders>' +
            '<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Top" />' +
            '<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Bottom" />' +
            '<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Left" />' +
            '<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Right" />' +
            '</ss:Borders>' +
            '<ss:Interior />' +
            '<ss:NumberFormat />' +
            '<ss:Protection />' +
            '</ss:Style>' +
            '<ss:Style ss:ID="title">' +
            '<ss:Borders />' +
            '<ss:Font />' +
            '<ss:Alignment ss:WrapText="1" ss:Vertical="Center" ss:Horizontal="Center" />' +
            '<ss:NumberFormat ss:Format="@" />' +
            '</ss:Style>' +
            '<ss:Style ss:ID="headercell">' +
            '<ss:Font ss:Bold="1" ss:Size="10" />' +
            '<ss:Alignment ss:WrapText="1" ss:Horizontal="Center" />' +
            '<ss:Interior ss:Pattern="Solid" ss:Color="#A3C9F1" />' +
            '</ss:Style>' +
            '<ss:Style ss:ID="even">' +
            '<ss:Interior ss:Pattern="Solid" ss:Color="#CCFFFF" />' +
            '</ss:Style>' +
            '<ss:Style ss:Parent="even" ss:ID="evendate">' +
            '<ss:NumberFormat ss:Format="yyyy-mm-dd" />' +
            '</ss:Style>' +
            '<ss:Style ss:Parent="even" ss:ID="evenint">' +
            '<ss:NumberFormat ss:Format="0" />' +
            '</ss:Style>' +
            '<ss:Style ss:Parent="even" ss:ID="evenfloat">' +
            '<ss:NumberFormat ss:Format="0.00" />' +
            '</ss:Style>' +
            '<ss:Style ss:ID="odd">' +
            '<ss:Interior ss:Pattern="Solid" ss:Color="#CCCCFF" />' +
            '</ss:Style>' +
            '<ss:Style ss:Parent="odd" ss:ID="odddate">' +
            '<ss:NumberFormat ss:Format="yyyy-mm-dd" />' +
            '</ss:Style>' +
            '<ss:Style ss:Parent="odd" ss:ID="oddint">' +
            '<ss:NumberFormat ss:Format="0" />' +
            '</ss:Style>' +
            '<ss:Style ss:Parent="odd" ss:ID="oddfloat">' +
            '<ss:NumberFormat ss:Format="0.00" />' +
            '</ss:Style>' +
            '</ss:Styles>' +
            worksheet.xml +
            '</ss:Workbook>';
    },

    createWorksheet: function(includeHidden,functionName) {
        // Calculate cell data types and extra class names which affect formatting
        var cellType = [];
        var cellTypeClass = [];
        var cm = this.getColumnModel();
        var totalWidthInPixels = 0;
        var colXml = '';
        var headerXml = '';
        var visibleColumnCountReduction = 0;
        var colCount = cm.getColumnCount();
        for (var i = 0; i < colCount; i++) {
            if ((cm.getDataIndex(i) != '')
                && (includeHidden || !cm.isHidden(i))) {
                var w = cm.getColumnWidth(i)
                totalWidthInPixels += w;
                if (cm.getColumnHeader(i) === ""){
                    cellType.push("None");
                    cellTypeClass.push("");
                    ++visibleColumnCountReduction;
                }
                else
                {
                    colXml += '<ss:Column ss:AutoFitWidth="1" ss:Width="' + w + '" />';
                    headerXml += '<ss:Cell ss:StyleID="headercell">' +
                        '<ss:Data ss:Type="String">' + cm.getColumnHeader(i) + '</ss:Data>' +
                        '<ss:NamedCell ss:Name="Print_Titles" /></ss:Cell>';
                    var fld = this.store.recordType.prototype.fields.get(cm.getDataIndex(i));


                    switch(fld.type) {
                        case "int":
                            cellType.push("Number");
                            cellTypeClass.push("int");
                            break;
                        case "float":
                            cellType.push("Number");
                            cellTypeClass.push("float");
                            break;
                        case "bool":
                        case "boolean":
                            cellType.push("String");
                            cellTypeClass.push("");
                            break;
                        case "date":
                            cellType.push("DateTime");
                            cellTypeClass.push("date");
                            break;
                        default:
                            cellType.push("String");
                            cellTypeClass.push("");
                            break;
                    }
                }
            }
        }
        var visibleColumnCount = cellType.length - visibleColumnCountReduction;

        var result = {
            height: 9000,
            width: Math.floor(totalWidthInPixels * 30) + 50
        };

        // Generate worksheet header details.
        var t = '<ss:Worksheet ss:Name="' + this.title + '">' +
            '<ss:Names>' +
            '<ss:NamedRange ss:Name="Print_Titles" ss:RefersTo="=\'' + this.title + '\'!R1:R2" />' +
            '</ss:Names>' +
            '<ss:Table x:FullRows="1" x:FullColumns="1"' +
            ' ss:ExpandedColumnCount="' + (visibleColumnCount + 2) +
            '" ss:ExpandedRowCount="' + (this.store.getCount() + 2) + '">' +
            colXml +
            '<ss:Row ss:Height="38">' +
            '<ss:Cell ss:StyleID="title" ss:MergeAcross="' + (visibleColumnCount - 1) + '">' +
            '<ss:Data xmlns:html="http://www.w3.org/TR/REC-html40" ss:Type="String">' +
            '<html:B>'+this.title+'</html:B></ss:Data><ss:NamedCell ss:Name="Print_Titles" />' +
            '</ss:Cell>' +
            '</ss:Row>' +
            '<ss:Row ss:AutoFitHeight="1">' +
            headerXml +
            '</ss:Row>';
          var cellClass = 'odd';
        // Generate the data rows from the data in the Store
        for (var i = 0, it = this.store.data.items, l = it.length; i < l; i++) {
            t += '<ss:Row>';
            r = it[i].data;
            var k = 0;
            var v='';
            for (var j = 0; j < colCount; j++) {
              //alert(i+'&'+j+'=='+r[cm.getDataIndex(j)] +'***'+ cellType[k]);
                //for viewdetails cellClass
                if(j==1 && functionName=='viewdetails') {
                if(r[cm.getDataIndex(2)] == 'Resource Name') {
                    cellClass = 'even';
                       r[cm.getDataIndex(2)]='';
                } else {
                    cellClass = 'odd';
                }

                }
                //for viewsummary cellClass
                if(i>0 && j==1 && functionName=='viewsummary') {
                    if(it[i-1].data[cm.getDataIndex(1)] != r[cm.getDataIndex(1)]) {
                        cellClass = (cellClass == 'odd') ? 'even':'odd';
                    } else {
                        cellClass = (cellClass == 'odd') ? 'odd':'even';
                    }
                }

                if ((cm.getDataIndex(j) != '')
                    && (includeHidden || !cm.isHidden(j))) {
                    v = r[cm.getDataIndex(j)];
                    if(!isNaN(parseFloat(v))){
                        cellType[k]='Number';
                        v=v.toFixed(2);//设精度为2
                    }
                    if (cellType[k] !== "None") {
                        t += '<ss:Cell ss:StyleID="' + cellClass + cellTypeClass[k] + '"><ss:Data ss:Type="' + cellType[k] + '">';
                        if (cellType[k] == 'DateTime') {
                            t += v.format('Y-m-d');
                        } else {
                            t += v;
                        }
                        t +='</ss:Data></ss:Cell>';
                    }
                    k++;
                }
            }
            t += '</ss:Row>';
        }

        result.xml = t + '</ss:Table>' +
            '<x:WorksheetOptions>' +
            '<x:PageSetup>' +
            '<x:Layout x:CenterHorizontal="1" x:Orientation="Landscape" />' +
            '<x:Footer x:Data="Page &amp;P of &amp;N" x:Margin="0.5" />' +
            '<x:PageMargins x:Top="0.5" x:Right="0.5" x:Left="0.5" x:Bottom="0.8" />' +
            '</x:PageSetup>' +
            '<x:FitToPage />' +
            '<x:Print>' +
            '<x:PrintErrors>Blank</x:PrintErrors>' +
            '<x:FitWidth>1</x:FitWidth>' +
            '<x:FitHeight>32767</x:FitHeight>' +
            '<x:ValidPrinterInfo />' +
            '<x:VerticalResolution>600</x:VerticalResolution>' +
            '</x:Print>' +
            '<x:Selected />' +
            '<x:DoNotDisplayGridlines />' +
            '<x:ProtectObjects>False</x:ProtectObjects>' +
            '<x:ProtectScenarios>False</x:ProtectScenarios>' +
            '</x:WorksheetOptions>' +
            '</ss:Worksheet>';
        return result;
    }
});

分享到:
评论

相关推荐

    Export2Excel.js

    当我们谈论“Export2Excel.js”时,我们关注的是一个利用JavaScript实现的功能,即从数据源导出到Excel电子表格。这个功能在数据分析、报表生成以及用户需要下载结构化数据的场景下非常常见。 首先,我们要理解...

    asp.net 中用excel 实现报表设计

    本文基于实际项目经验,探讨了在ASP.NET环境下操作Excel报表的方法,覆盖了服务器端与客户端两种实现途径。 #### 关键词 服务器端、客户端、Web模式、脚本、ASP.NET #### 1. 引言 随着信息技术的不断发展,现代...

    纯前端 JS脚本 导出excel 可动态添加数据

    "纯前端 JS脚本 导出excel 可动态添加数据"这一主题,聚焦于如何利用JavaScript在浏览器环境中实现Excel文件的生成与动态数据填充,无需借助服务器端处理。这一技术在数据分析、报表生成以及用户交互场景中具有广泛...

    javascript操作excel生成报表示例_.docx

    在提供的文档示例中,展示了如何使用JavaScript创建一个简单的Excel报表。 首先,这段代码的核心是利用了ActiveXObject,这是一个仅适用于Internet Explorer浏览器的特性,它可以与本地系统上的应用程序进行交互,...

    javaScript把网页内容导成Excel-高级方法

    本文将深入探讨如何使用JavaScript实现这个功能,特别是针对表格数据的处理,这在数据报告和分析场景中非常常见。 首先,我们需要了解JavaScript的基本原理。JavaScript是一种运行在浏览器端的脚本语言,它可以操作...

    基于JavaScript的JSP页面数据导出Excel.pdf

    JavaScript可以通过EXT中间件进行数据交互,使用JsonReader将数据转换为JSON格式,并使用ActiveXObject创建Excel对象,实现数据的导出到Excel文件中。 知识点三:数据交互的实现 数据交互是指JSP页面数据导出Excel...

    00 WINCC 调用动态库出EXCEL报表例程的说明_wincc报表_WinCC_wincc报表_WINCC向EXCEL写数据

    本示例主要探讨如何利用WinCC调用动态库(DLL)来生成Excel报表,实现数据的定时写入功能。这对于收集和分析生产线数据、优化生产效率至关重要。 首先,WinCC中的脚本功能是实现此功能的关键。它允许用户编写自定义...

    非常详细的用 java(springmvc+mybatis)实现excel导入功能并且保存到数据库

    "Java实现Excel导入功能并保存到数据库" 以下是根据给定的文件信息生成的相关知识点: 知识点1:Java Web开发框架SpringMVC 在本实例中,使用了SpringMVC框架来实现Web应用程序。SpringMVC是一种基于Java的Web...

    excel导出的js

    对于Excel导出,JavaScript提供了一些解决方案,例如使用`SheetJS`(也称为`xlsx`)库。 SheetJS是一个开源的JavaScript库,它支持读写Excel(XLSX、XLSM、XLSB)、CSV、HTML等多种格式的文件。使用SheetJS,你可以...

    00 WINCC 调用动态库出EXCEL报表例程的说明,wincc报表步骤实例,C#

    标题中的“00 WINCC 调用动态库出EXCEL报表例程的说明”表明这是一个关于使用西门子WINCC(Windows Control Center)通过调用动态链接库(DLL)来创建Excel报表的教程。WINCC是西门子的一款人机界面(HMI)软件,常...

    纯前端实现的webExcel

    在实现这些功能时,开发人员可能使用了像SheetJS这样的开源库,它能够读写多种电子表格格式(如XLSX、CSV等),并提供了丰富的API供前端应用调用。此外,为了实现良好的交互体验,可能还结合了CSS3和HTML5的新特性,...

    Blob.js和 Export2Excel.js.zip

    Blob.js和Export2Excel.js是两个JavaScript库,专门用于处理这种需求。Blob.js提供了Blob对象的相关功能,而Export2Excel.js则实现了将HTML表格转换为Excel文件的功能。接下来,我们将深入探讨这两个库的工作原理和...

    报表软件--Style Report报表数据填报

    - **JavaScript集成**:通过简单的JavaScript脚本编写,可以轻松实现复杂的功能定制,提高了软件的灵活性和扩展性。 - **数据源关联**:支持多种数据源的连接,包括但不限于数据库、文件系统等,实现异构数据源之间...

    cognos 自定义导出PDF和Excel.doc

    具体来说,本方法通过JavaScript脚本实现了以下功能: - 添加用于导出至Excel和PDF格式的按钮。 - 用户点击按钮后,系统自动执行导出操作,无需进入Cognos的默认导出界面。 #### 三、实现步骤详解 **1. 创建HTML...

    Excel转换成Js或者Lua代码_Exceljslua_excel转js_excel转为lua_provideik2_

    在IT行业中,我们经常需要处理各种数据,Excel作为一款强大的电子表格工具,广泛应用于数据分析、报表制作等场景。然而,在编程环境中,JavaScript和Lua作为两种轻量级的脚本语言,也有着各自的适用领域。例如,...

    Ext生成报表导出到Excel

    2. **导出功能**:在Ext中实现导出到Excel的功能,通常会利用JavaScript库,如`SheetJS`(也称为`js-xlsx`)或`FileSaver.js`。`SheetJS`可以解析和操作Excel文件格式(XLSX),而`FileSaver.js`则用于在浏览器中...

    js导出excel封装【原生、配置式】 示例

    在JavaScript开发中,导出Excel是一项常见的需求,特别是在数据分析、报表生成或用户数据导出的场景下。原生JavaScript导出Excel的方式可以帮助我们摆脱对第三方库的依赖,提高项目的轻量化。本示例将详细介绍如何...

    Web页面动态表格数据导入Excel的JavaScript实现.pdf

    在使用 JavaScript 实现 Web 页面动态表格数据的 Excel 导入时,需要使用 ActiveX 对象定义电子表格对象,并根据表格 id 标识将浏览器中的表格对象转换为电子表格对象。然后,使用电子表格对象的 innerTexts 属性将...

    Java Web开发技术方案宝典-报表打印

    这可能包括使用JavaScript库如Chart.js或D3.js来生成图表,并集成到报表中,使得数据更加直观。 #### 自定义报表打印方案 自定义报表打印方案允许开发者根据具体的业务需求来定制报表。这可能涉及到了解特定行业的...

    ATGrid报表控件 wintable报表设计器

    支持脚本:VBScript、JavaScript脚本; 只要能运行Flash动画的地方就可以运行ATGrid; 支持HTTP协议,带有异步同步交互接口,可以和后台程序轻松交互; 支持XML: 通过XML和后台数据库进行绑定,设定打印...

Global site tag (gtag.js) - Google Analytics