BootStrap带样式打印
在新窗口打印时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带样式打印的更多相关文章
- Bootstrap表格样式(附源码文件)--Bootstrap
1.表格默认样式 <h4>表格默认样式</h4><table><!--默认样式--> <tr><th>序号</th> ...
- [置顶]
bootstrap自定义样式-bootstrap侧边导航栏的实现
前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...
- yii使用bootstrap分页样式
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstra ...
- android学习笔记50——SQLiteOpenHelper、android实现系统自带样式
SQLiteOpenHelper SQLiteOpenHelper是android提供的一个管理数据库的工具类,可用于管理数据库的创建和版本更新. 一般的用法是创建SQLiteOpenHelper的子 ...
- bootstrap 分页样式代码
bootstrap 分页样式代码,废话不多说,直接上源码 <!DOCTYPE html> <html> <head> <title>Bootstrap ...
- [Bootstrap]全局样式(三)
表格 1.基本类 .table {width/margin-bottom/} {padding/border-top} e.g.:<table class="table" ...
- [Bootstrap]全局样式(二)
具体排版 1.标题和标题类 <h1> ~<h6>和.h1~h6|副标题<small>和.small font-size mar ...
- Android中实现全屏、无标题栏的两种办法(另附Android系统自带样式的解释)
在进行UI设计时,我们经常需要将屏幕设置成无标题栏或者全屏.要实现起来也非常简单,主要有两种方法:配置xml文件和编写代码设置. 1.在xml文件中进行配置 在项目的清单文件AndroidManife ...
- Android自带样式
Android系统自带样式: android:theme="@android:style/Theme.Dialog" 将一个Activity显示为对话框模式 android:the ...
随机推荐
- rails引入bootstrap
1.在Gemfile中增加 gem 'bootstrap-sass', '~> 3.2.0.2'2.bundle install3.把assets/stylesheets/application ...
- super.getclass()的结果是父类还是子类?
package as; import java.util.Date; public class Test extends Date{ public static void main(String[] ...
- 算法笔记_167:算法提高 矩阵翻转(Java)
目录 1 问题描述 2 解决方案 1 问题描述 问题描述 Ciel有一个N*N的矩阵,每个格子里都有一个整数. N是一个奇数,设X = (N+1)/2.Ciel每次都可以做这样的一次操作:他从矩阵 ...
- EAS常用工具类
package com.kingdee.eas.custom; import java.io.File; import java.io.FileNotFoundException; import ja ...
- AngularJS模块具体解释
模块是提供一些特殊服务的功能块.比方本地化模块负责文字本地化,验证模块负责数据验证.一般来说,服务在模块内部,当我们须要某个服务的时候,是先把模块实例化.然后再调用模块的方法. 但Angular模块和 ...
- OJ刷题---简单password破解
题目要求: 输入代码: #include<iostream> #include <cstdio> #include <cstring> using namespac ...
- Ansible远程执行脚本示例
首先创建一个shell脚本 cat /tmp/df.sh #!/bin/bash df -h|grep vda|awk '{print $5}' 然后把该脚本分发到各个机器上 ansible comp ...
- python-__init__.py 与模块对象的关系
python中的Module是比较重要的概念.常见的情况是,事先写好一个.py文件,在另一个文件中需要import时,将事先写好的.py文件拷贝 到当前目录,或者是在sys.path中增加事先写好的. ...
- MVC :“已添加了具有相同键的项”
最近将一个项目从ASP.NET MVC 3升级至刚刚发布的ASP.NET MVC 5.1,升级后发现一个ajax请求出现了500错误,日志中记录的详细异常信息如下: System.ArgumentEx ...
- Oracle 动态sql 实现方式
/******************************************************************* Sample Program 10: Dynamic SQL ...