首页
所有分类
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网页制作特殊效果用随机数
May 22 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
基于JQuery 选择器使用说明介绍
Apr 18 Javascript
SeaJS入门教程系列之完整示例（三）
Mar 03 Javascript
javascript模拟命名空间
Apr 17 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
详解如何较好的使用js
Dec 16 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
基于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
PostMapping(1) 字符串(2) ResNet50(1) 逆序(1) tensorflow(2) Inception(2) yolo3(1) Seaborn(1) Xception(1) jenkins(1)
You might like
php多文件上传功能实现原理及代码
2013/04/18 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
python文件操作相关知识点总结整理
2016/02/22 Python
python安装Scrapy图文教程
2017/08/14 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
python scipy卷积运算的实现方法
2019/09/16 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
柯基袜：Corgi Socks
2017/01/26 全球购物
土耳其玩具商店：Toyzz Shop
2019/08/02 全球购物
四年的个人工作自我评价
2013/12/10 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
教务处教学工作总结
2015/08/10 职场文书
《你在为谁工作》心得体会（共8篇）
2016/01/20 职场文书