首页
所有分类
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从右边截取指定字符串的三种实现方法
Nov 29 Javascript
javascript计时器详解
Feb 28 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
js实现网页定位导航功能
Mar 07 Javascript
Vue.js仿Metronic高级表格（二）数据渲染
Apr 19 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
微信小程序中为什么使用var that=this
Aug 27 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 Javascript
js实现上传按钮并显示缩略图小轮子
May 04 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
T-SQL(1) 表变量(1) Logrotate(1) 重复数据(2) GTID(1) 排序失效(1) 临时表(1) ip连接(1) 批处理(1) timestamp(1)
You might like
基于php冒泡排序算法的深入理解
2013/06/09 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
angular.bind使用心得
2015/10/26 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
EasyUI实现下拉框多选功能
2017/11/07 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
详解Python在七牛云平台的应用（一）
2017/12/05 Python
Python编写打字训练小程序
2019/09/26 Python
加拿大票务网站：Ticketmaster加拿大
2017/07/17 全球购物
BudgetAir印度：预订航班、酒店和汽车租赁
2019/07/07 全球购物
美国室内盆栽植物购买网站：Plants.com
2020/04/24 全球购物
事业单位公务员的职业生涯规划
2014/01/15 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
仲裁协议书
2014/09/26 职场文书
施工员岗位职责
2015/02/10 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
神秘岛读书笔记
2015/07/01 职场文书
Python爬虫基础讲解之请求
2021/05/13 Python
Javascript设计模式之原型模式详细
2021/10/05 Javascript
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏