ExtJs之grid打印

最新推荐文章于 2021-07-13 17:08:17 发布

lpcjrflsa

最新推荐文章于 2021-07-13 17:08:17 发布

阅读量209

点赞数

分类专栏： ExtJS 文章标签： EXT Excel JavaScript CSS 浏览器 ViewUI

本文链接：https://blog.csdn.net/lpcjrflsa/article/details/83913406

版权

ExtJS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在程序实现之前首先要做的就是打开一个IE点击“工具栏--Internet选项--安全选项卡--Internet--自定义级别--将其中的所有与ActiveX有关的项目点为启用”同时确保你的机器上已经安装了excel。

aa.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>extjs初级--panel(老式写法)</title>

  
     <link rel="stylesheet" type="text/css"
    href="ext/resources/css/ext-all.css" />

   <script type="text/javascript" src="ext/adapter/ext/ext-base.js">
   </script>
  
   <script type="text/javascript" src="ext/ext-all.js"></script>

   <script type="text/javascript" src="test/hhh.js"></script>

</head>
<body>
<div id='aaa'>
<div id='aa'></div>
</div>
</body>
</html>

hhh.js

Ext.onReady(function() {

var centersm = new Ext.grid.CheckboxSelectionModel();
var centercm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),
    centersm, {
     header : "rid",
     width : 100,
     hidden : true,
     align : "center",
     dataIndex : "rid"
    }, {
     header : "角色",
     width : 110,
     align : "center",
     dataIndex : "rolename"
    }]);
var centerdata = [{
     rid : 423,
     rolename : "管理员"
    }, {
     rid : 434,
     rolename : "库管"
    }, {
     rid : 546,
     rolename : "采样员"
    }, {
     rid : 778,
     rolename : "注射员"
    }, {
     rid : 443,
     rolename : "化验员"
    }]
var centerproxy = new Ext.data.MemoryProxy(centerdata);
var centeruser = Ext.data.Record.create([{
     name : "rid",
     type : "int",
     mapping : "rid"
    }, {
     name : "rolename",
     type : "string",
     mapping : "rolename"
    }]);
var centerreader = new Ext.data.JsonReader({}, centeruser);
var centerstore = new Ext.data.Store({
     proxy : centerproxy,
     reader : centerreader,
     autoLoad : true
    });

var grid = new Ext.grid.GridPanel({
     region : "center",
     renderTo : Ext.getBody(),
     store : centerstore,
     cm : centercm,
     sm : centersm,
     id : "centerid",
     height : 200,
     loadMask : {
      msg : '正在加载数据,请稍后...'
     },
     bodyStyle : "width:33%",
     autoWidth : true,
     tbar : [{
        text : "打印",
        id : "aaa",
        icon : "test/image/vcard.png",
        cls : "x-btn-text-icon",
        handler : function(){
           downloadViewData(grid);
        }
       }]

    });
function downloadViewData(grid) {

   try {
    var xls = new ActiveXObject("Excel.Application");
   } catch (e) {
    alert("要打印该表，您必须安装Excel电子表格软件，同时浏览器须使用“ActiveX 控件”，您的浏览器须允许执行控件。 请点击【帮助】了解浏览器设置方法！");
    return "";
   }
   var cm = grid.getColumnModel();
   var colCount = cm.getColumnCount();
  
   xls.visible = true; // 设置excel为可见
   var xlBook = xls.Workbooks.Add;
   var xlSheet = xlBook.Worksheets(1);
  
   var temp_obj = [];
   // 只下载没有隐藏的列(isHidden()为true表示隐藏,其他都为显示)
   // 临时数组,存放所有当前显示列的下标
   for (i = 2; i < colCount; i++) {
    if (cm.isHidden(i) == true) {
    } else {
     temp_obj.push(i);
    }
   }
   for (i = 1; i <= temp_obj.length; i++) {
    // 显示列的列标题
    alert(cm.getColumnHeader(temp_obj[i - 1]));
    xlSheet.Cells(1, i).Value = cm.getColumnHeader(temp_obj[i - 1]);
   }
   var store = grid.getStore();
   var recordCount = store.getCount();
   var view = grid.getView();
   for (i = 1; i <= recordCount; i++) {
    for (j = 1; j <= temp_obj.length; j++) {
     // EXCEL数据从第二行开始,故row = i + 1;
     xlSheet.Cells(i + 1, j).Value = view.getCell(i - 1, temp_obj[j
         - 1]).innerText;
    }
   }
   xlSheet.Columns.AutoFit;
   xls.ActiveWindow.Zoom = 75
   xls.UserControl = true; // 很重要,不能省略,不然会出问题 意思是excel交由用户控制
   xls = null;
   xlBook = null;
   xlSheet = null;
}

})