首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案

Posted in Javascript onDecember 23, 2016

关于Lodop打印是个很牛逼的打印插件，但是打印Bootstrap的样式的时候很恶心

比如：页面是这样

关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案

打印之后的效果恶心的不要不要的

关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案

单独修改后的样式

关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案

出现这样的问题就是可能是bs把这个插件当做手机显示了，也可能是这样插件对bs集成不行

lodop对常规html+css还是不错的，下面丢上bs版的代码

控件对应html+js使用代码

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PrintControl.ascx.cs" Inherits="Zemt.Process.Web.UserControl.Print.PrintControl" %>
<li class="active"><a href="javascript:void(0);" onclick="printHtml();">实时打印</a></li>
<li>    </li>
<script src="../../UserControl/Print/JS/LodopFuncs.js"></script>
<script type="text/javascript">
  function printHtml()
  {
    //LODOP = getLodop();
    //LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_完整全页");
    //LODOP.ADD_PRINT_HTM(10, 10, "100%", "100%", "<!DOCTYPE html>" + document.getElementsByTagName("html")[0].innerHTML);
    //LODOP.PREVIEW();
    LODOP = getLodop();
    LODOP.PRINT_INIT("页面打印");
    var strStyleCSS = "";
    strStyleCSS += "<link href='../../UserControl/Print/CSS/bootstrapPrint.css' type='text/css' rel='stylesheet'>";
    LODOP.ADD_PRINT_HTM(5, 5, "100%", "100%", strStyleCSS + "<body leftmargin=0 topmargin=0>" + document.getElementById('aspnetForm').innerHTML + "</body>");
    LODOP.SET_PREVIEW_WINDOW(1, 0, 0, 0, 0, "");
    LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "100%");
    LODOP.PREVIEW();
  }
</script>

js：

var CreatedOKLodop7766 = null;
//====判断是否需要安装CLodop云打印服务器:====
function needCLodop() {
  try {
    var ua = navigator.userAgent;
    if (ua.match(/Windows\sPhone/i) != null) return true;
    if (ua.match(/iPhone|iPod/i) != null) return true;
    if (ua.match(/Android/i) != null) return true;
    if (ua.match(/Edge\D?\d+/i) != null) return true;
    var verTrident = ua.match(/Trident\D?\d+/i);
    var verIE = ua.match(/MSIE\D?\d+/i);
    var verOPR = ua.match(/OPR\D?\d+/i);
    var verFF = ua.match(/Firefox\D?\d+/i);
    var x64 = ua.match(/x64/i);
    if ((verTrident == null) && (verIE == null) && (x64 !== null))
      return true; else
      if (verFF !== null) {
        verFF = verFF[0].match(/\d+/);
        if ((verFF[0] >= 42) || (x64 !== null)) return true;
      } else
        if (verOPR !== null) {
          verOPR = verOPR[0].match(/\d+/);
          if (verOPR[0] >= 32) return true;
        } else
          if ((verTrident == null) && (verIE == null)) {
            var verChrome = ua.match(/Chrome\D?\d+/i);
            if (verChrome !== null) {
              verChrome = verChrome[0].match(/\d+/);
              if (verChrome[0] >= 42) return true;
            };
          };
    return false;
  } catch (err) { return true; };
};
//====页面引用CLodop云打印必须的JS文件：====
if (needCLodop()) {
  var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
  var oscript = document.createElement("script");
  oscript.src = "http://localhost:8000/CLodopfuncs.js?priority=1";
  head.insertBefore(oscript, head.firstChild);
  //引用双端口(8000和18000）避免其中某个被占用：
  oscript = document.createElement("script");
  oscript.src = "http://localhost:18000/CLodopfuncs.js?priority=0";
  head.insertBefore(oscript, head.firstChild);
};
//====获取LODOP对象的主过程：====
function getLodop(oOBJECT, oEMBED) {
  var strHtmInstall = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='http://113.10.155.131/install_lodop32.zip' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
  var strHtmUpdate = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='http://113.10.155.131/install_lodop32.zip' target='_self'>执行升级</a>,升级后请重新进入。</font>";
  var strHtm64_Install = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='http://113.10.155.131/install_lodop64.zip' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
  var strHtm64_Update = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='http://113.10.155.131/install_lodop64.zip' target='_self'>执行升级</a>,升级后请重新进入。</font>";
  var strHtmFireFox = "<br><br><font color='#FF00FF'>（注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它）</font>";
  var strHtmChrome = "<br><br><font color='#FF00FF'>(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）</font>";
  var strCLodopInstall = "<br><font color='#FF00FF'>CLodop云打印服务(localhost本地)未安装启动!点击这里<a href='http://www.lodop.net/download/Lodop6.215_CLodop2.090.zip' target='_self'>执行安装</a>,安装后请刷新页面。</font>";
  var strCLodopUpdate = "<br><font color='#FF00FF'>CLodop云打印服务需升级!点击这里<a href='http://www.lodop.net/download/Lodop6.215_CLodop2.090.zip' target='_self'>执行升级</a>,升级后请刷新页面。</font>";
  var LODOP;
  try {
    var isIE = (navigator.userAgent.indexOf('MSIE') >= 0) || (navigator.userAgent.indexOf('Trident') >= 0);
    if (needCLodop()) {
      try { LODOP = getCLodop(); } catch (err) { };
      if (!LODOP && document.readyState !== "complete") { alert("C-Lodop没准备好，请稍后再试！"); return; };
      if (!LODOP) {
        if (isIE) document.write(strCLodopInstall); else
          document.documentElement.innerHTML = strCLodopInstall + document.documentElement.innerHTML;
        return;
      } else {
        if (CLODOP.CVERSION < "2.0.9.0") {
          if (isIE) document.write(strCLodopUpdate); else
            document.documentElement.innerHTML = strCLodopUpdate + document.documentElement.innerHTML;
        };
        if (oEMBED && oEMBED.parentNode) oEMBED.parentNode.removeChild(oEMBED);
        if (oOBJECT && oOBJECT.parentNode) oOBJECT.parentNode.removeChild(oOBJECT);
      };
    } else {
      var is64IE = isIE && (navigator.userAgent.indexOf('x64') >= 0);
      //=====如果页面有Lodop就直接使用，没有则新建:==========
      if (oOBJECT != undefined || oEMBED != undefined) {
        if (isIE) LODOP = oOBJECT; else LODOP = oEMBED;
      } else if (CreatedOKLodop7766 == null) {
        LODOP = document.createElement("object");
        LODOP.setAttribute("width", 0);
        LODOP.setAttribute("height", 0);
        LODOP.setAttribute("style", "position:absolute;left:0px;top:-100px;width:0px;height:0px;");
        if (isIE) LODOP.setAttribute("classid", "clsid:2105C259-1E0C-4534-8141-A753534CB4CA");
        else LODOP.setAttribute("type", "application/x-print-lodop");
        document.documentElement.appendChild(LODOP);
        CreatedOKLodop7766 = LODOP;
      } else LODOP = CreatedOKLodop7766;
      //=====Lodop插件未安装时提示下载地址:==========
      if ((LODOP == null) || (typeof (LODOP.VERSION) == "undefined")) {
        if (navigator.userAgent.indexOf('Chrome') >= 0)
          document.documentElement.innerHTML = strHtmChrome + document.documentElement.innerHTML;
        if (navigator.userAgent.indexOf('Firefox') >= 0)
          document.documentElement.innerHTML = strHtmFireFox + document.documentElement.innerHTML;
        if (is64IE) document.write(strHtm64_Install); else
          if (isIE) document.write(strHtmInstall); else
            document.documentElement.innerHTML = strHtmInstall + document.documentElement.innerHTML;
        return LODOP;
      };
    };
    if (LODOP.VERSION < "6.2.1.5") {
      if (needCLodop())
        document.documentElement.innerHTML = strCLodopUpdate + document.documentElement.innerHTML; else
        if (is64IE) document.write(strHtm64_Update); else
          if (isIE) document.write(strHtmUpdate); else
            document.documentElement.innerHTML = strHtmUpdate + document.documentElement.innerHTML;
      return LODOP;
    };
    //===如下空白位置适合调用统一功能(如注册语句、语言选择等):===
    LODOP.SET_LICENSES("", "13528A153BAEE3A0254B9507DCDE2839", "", "");
    //===========================================================
    return LODOP;
  } catch (err) { alert("getLodop出错:" + err); };
};
css:
 * {
  font-size:12px;
}
.row {
 display:block;
 width:100%;
}
.row:before,
.row:after {
 display: table;
 content: " ";
}
.row:after {
 clear: both;
}
.row:before,
.row:after {
 display: table;
 content: " ";
}
.row:after {
 clear: both;
}
.control-label{
box-sizing: border-box;
color: rgb(51, 51, 51);
display: block;
font-size: 13px;
font-weight:bold;
line-height: 20px;
margin-bottom: 5px;
min-height: 1px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: relative;
background-color:white;
}
.table {
  width:100%;
}
.modal, .fade {
  visibility:hidden;
}
 .container {
  width:90%;
  margin-left:3%;
 }
 .col-md-1,
 .col-md-2,
 .col-md-3,
 .col-md-4,
 .col-md-5,
 .col-md-6,
 .col-md-7,
 .col-md-8,
 .col-md-9,
 .col-md-10,
 .col-md-11 {
  float: left;
 }
 .col-md-1 {
  width: 8.333333333333332%;
 }
 .col-md-2 {
  width: 16.666666666666664%;
 }
 .col-md-3 {
  width: 25%;
 }
 .col-md-4 {
  width: 33.33333333333333%;
 }
 .col-md-5 {
  width: 41.66666666666667%;
 }
 .col-md-6 {
  width: 50%;
 }
 .col-md-7 {
  width: 58.333333333333336%;
 }
 .col-md-8 {
  width: 66.66666666666666%;
 }
 .col-md-9 {
  width: 75%;
 }
 .col-md-10 {
  width: 83.33333333333334%;
 }
 .col-md-11 {
  width: 91.66666666666666%;
 }
 .col-md-12 {
  width: 100%;
 }
 .col-md-push-0 {
  left: auto;
 }
 .col-md-push-1 {
  left: 8.333333333333332%;
 }
 .col-md-push-2 {
  left: 16.666666666666664%;
 }
 .col-md-push-3 {
  left: 25%;
 }
 .col-md-push-4 {
  left: 33.33333333333333%;
 }
 .col-md-push-5 {
  left: 41.66666666666667%;
 }
 .col-md-push-6 {
  left: 50%;
 }
 .col-md-push-7 {
  left: 58.333333333333336%;
 }
 .col-md-push-8 {
  left: 66.66666666666666%;
 }
 .col-md-push-9 {
  left: 75%;
 }
 .col-md-push-10 {
  left: 83.33333333333334%;
 }
 .col-md-push-11 {
  left: 91.66666666666666%;
 }
 .col-md-pull-0 {
  right: auto;
 }
 .col-md-pull-1 {
  right: 8.333333333333332%;
 }
 .col-md-pull-2 {
  right: 16.666666666666664%;
 }
 .col-md-pull-3 {
  right: 25%;
 }
 .col-md-pull-4 {
  right: 33.33333333333333%;
 }
 .col-md-pull-5 {
  right: 41.66666666666667%;
 }
 .col-md-pull-6 {
  right: 50%;
 }
 .col-md-pull-7 {
  right: 58.333333333333336%;
 }
 .col-md-pull-8 {
  right: 66.66666666666666%;
 }
 .col-md-pull-9 {
  right: 75%;
 }
 .col-md-pull-10 {
  right: 83.33333333333334%;
 }
 .col-md-pull-11 {
  right: 91.66666666666666%;
 }
 .col-md-offset-0 {
  margin-left: 0;
 }
 .col-md-offset-1 {
  margin-left: 8.333333333333332%;
 }
 .col-md-offset-2 {
  margin-left: 16.666666666666664%;
 }
 .col-md-offset-3 {
  margin-left: 25%;
 }
 .col-md-offset-4 {
  margin-left: 33.33333333333333%;
 }
 .col-md-offset-5 {
  margin-left: 41.66666666666667%;
 }
 .col-md-offset-6 {
  margin-left: 50%;
 }
 .col-md-offset-7 {
  margin-left: 58.333333333333336%;
 }
 .col-md-offset-8 {
  margin-left: 66.66666666666666%;
 }
 .col-md-offset-9 {
  margin-left: 75%;
 }
 .col-md-offset-10 {
  margin-left: 83.33333333333334%;
 }
 .col-md-offset-11 {
  margin-left: 91.66666666666666%;
 }

以上所述是小编给大家介绍的关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案

- Author -

Teln_小凯

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
May 14 Javascript
Javascript 获取滚动条位置等信息的函数
Sep 08 Javascript
JS鼠标滑过图片时切换图片实现思路
Sep 12 Javascript
jQuery弹出框代码封装DialogHelper
Jan 30 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
基于Vue.js实现简单搜索框
Mar 26 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
Dec 23 #Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 #Javascript
Bootstrap和Java分页实例第一篇
Dec 23 #Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 #Javascript
Bootstrap select多选下拉框实现代码
Dec 23 #Javascript
Bootstrap select实现下拉框多选效果
Dec 23 #Javascript
详解微信小程序开发—你期待的分享功能来了，微信小程序序新增5大功能
Dec 23 #Javascript
二维码(2) 磁盘管理(1) 条码(1) plus.io(1) 虚拟机(3) Get(1) 目录管理(1) 日志(1) Post(1) html5+(1)
You might like
PHP正则获取页面所有图片地址
2016/03/23 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
javascript编程起步（第六课）
2007/01/10 Javascript
javascript 定义新对象方法
2010/02/20 Javascript
google 搜索框添加关键字实现代码
2010/04/24 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
[01:58]DOTA2上海特级锦标赛现场采访：RTZ这个ID到底好不好
2016/03/25 DOTA
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
python机器学习之神经网络（一）
2017/12/20 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
科尔士百货公司官网：Kohl’s
2016/07/11 全球购物
Superdry极度乾燥官网：日本街头风格，纯英国制造品牌
2016/10/31 全球购物
Jabra捷波朗美国官网：用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
法国购买二手电子产品网站：Asgoodasnew
2020/03/27 全球购物
医学类导师推荐信范文
2013/11/19 职场文书
高中生学习生活的自我评价
2013/11/27 职场文书
应届毕业生自我评价分享
2013/12/15 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
公积金具结保证书
2015/05/11 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers
在Python 中将类对象序列化为JSON
2022/04/06 Python