在新窗口打印时bootstrap表格的样式出不来,因为打印时没有加载CSS样式。

我在jquery.PrintArea.js的基础上改造了下打印的方法:

(function ($) {
var printAreaCount = 0;
$.fn.printArea = function () {
var ele = $(this);
var idPrefix = "printArea_";
removePrintArea(idPrefix + printAreaCount);
printAreaCount++;
var iframeId = idPrefix + printAreaCount;
var iframeStyle = 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;';
iframe = document.createElement('IFRAME');
$(iframe).attr({
style: iframeStyle,
id: iframeId
});
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;
$(document).find("link").filter(function () {
return $(this).attr("rel").toLowerCase() == "stylesheet";
}).each(
function () {
doc.write('<link type="text/css" rel="stylesheet" href="'
+ $(this).attr("href") + '" >');
});
doc.write('<div class="' + $(ele).attr("class") + '">' + $(ele).html()
+ '</div>');
doc.close();
var frameWindow = iframe.contentWindow;
frameWindow.close();
frameWindow.focus();
frameWindow.print();
}
var removePrintArea = function (id) {
$("iframe#" + id).remove();
}; $.fn.printAreas = function () {
var ele = $(this);
winname = window.open('', "_blank", '');
var doc = winname.document;
$(document).find("link").filter(function () {
return $(this).attr("rel").toLowerCase() == "stylesheet";
}).each(
function () {
doc.write('<link type="text/css" rel="stylesheet" href="'
+ $(this).attr("href") + '" >');
});
doc.write($(ele).html());
doc.close();
winname.print();
} })(jQuery);

前台调用的时候,把table放在一个div里,打印div即可:

       <div class="ibox-content" id="divprint">
<table id="tablePrint" class="footable table table-stripped toggle-arrow-tiny" data-page-size="8">
<thead>
<tr>
<th class="text-center">项目</th>
<th class="text-center">部门</th>
<th class="text-center">营业收入</th>
<th class="text-center">利润</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td class="text-center">@item.ProjectName</td>
<td class="text-center">@item.DepartNameS</td>
<td class="text-right"><a onclick="loadDetail('@item.ProjectId','@item.DepartId')">@item.InComeS</a></td>
<td class="text-right"><a onclick="loadProftsDetail('@item.ProjectId','@item.DepartId')">@item.ProfitS</a></td>
</tr>
}
</tbody>
</table>
<div class="dataTables_paginate paging_bootstrap pagination"> </div>
</div>

js调用:

   //打印
$("#print").click(function ()
$("#divprint").printAreas();
});

BootStrap带样式打印的更多相关文章

  1. Bootstrap表格样式(附源码文件)--Bootstrap

    1.表格默认样式 <h4>表格默认样式</h4><table><!--默认样式--> <tr><th>序号</th> ...

  2. [置顶] bootstrap自定义样式-bootstrap侧边导航栏的实现

    前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...

  3. yii使用bootstrap分页样式

    Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstra ...

  4. android学习笔记50——SQLiteOpenHelper、android实现系统自带样式

    SQLiteOpenHelper SQLiteOpenHelper是android提供的一个管理数据库的工具类,可用于管理数据库的创建和版本更新. 一般的用法是创建SQLiteOpenHelper的子 ...

  5. bootstrap 分页样式代码

    bootstrap 分页样式代码,废话不多说,直接上源码 <!DOCTYPE html> <html> <head> <title>Bootstrap ...

  6. [Bootstrap]全局样式(三)

    表格 1.基本类  .table  {width/margin-bottom/}  {padding/border-top} e.g.:<table class="table" ...

  7. [Bootstrap]全局样式(二)

    具体排版 1.标题和标题类 <h1> ~<h6>和.h1~h6|副标题<small>和.small font-size                    mar ...

  8. Android中实现全屏、无标题栏的两种办法(另附Android系统自带样式的解释)

    在进行UI设计时,我们经常需要将屏幕设置成无标题栏或者全屏.要实现起来也非常简单,主要有两种方法:配置xml文件和编写代码设置. 1.在xml文件中进行配置 在项目的清单文件AndroidManife ...

  9. Android自带样式

    Android系统自带样式: android:theme="@android:style/Theme.Dialog" 将一个Activity显示为对话框模式 android:the ...

随机推荐

  1. async -- await 解决数据异步获取

    在React组件中,也比较一下 Promise 和 Async/Await 的方法异同. 传统地使用 Promise : import React, { Component } from 'react ...

  2. STL源码剖析(set/map)

    SGI STL中set/map底层都是通过RB-tree实现的. 首先看看RB-tree结点的定义 typedef bool __rb_tree_color_type; const __rb_tree ...

  3. swift中的nil与Objective-C中的nil区别

    1.OC中,只有对象才能设置为nil,而swift中除了对象,Int.struct.enum等任何可选类型都可以等于nil 2.OC中,nil是一个指向不存在对象的指针.swift中,nil不是指针, ...

  4. HTML5学习笔记3 内联SVG

    HTML5支持内联SVG 下面来介绍一下什么是SVG SVG可缩放矢量图形 可缩放矢量是基于可扩展标记语言(标准通用语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准 ...

  5. DevExpress SpinEdit控件使用实例——删除ASPxSpinEdit右边的上下小箭头SpinButtons-ShowIncrementButtons

    使用ASPxSpinEdit来添加数字类型的输入框: 默认情况下, SpinEdit通过点击右边的上下箭头来加减number,下面的代码是去掉上下箭头,内容居中显示,并将边框颜色置为白色: <d ...

  6. 转: 利用RabbitMQ、MySQL实现超大用户级别的消息在/离线收发

    由于RabbitMQ中只有队列(queue)才能存储信息,所以用RabbitMQ实现超大用户级别(百万计)的消息在/离线收发需要对每一个用户创建一个永久队列. 但是RabbitMQ节点内存有限,经测试 ...

  7. android http post 请求与 json字符串

    一.目标 android客户端发送一个json格式的http的请求,期望得到服务端的一个json反馈. 1. 客户端发送的json格式为: {"data" : "valu ...

  8. 測试赛C - Eqs(哈希)

    C - Eqs Time Limit:5000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit Stat ...

  9. python打包exe文件-ImportError: No module named 'queue'

    我之前遇到的一个错误就是 File "site-packages\urllib3\packages\six.py", line 92, in __get__ File " ...

  10. C# Interview Questions:C#-English Questions

    This is a list of questions I have gathered from other sources and created myself over a period of t ...