CSS:在模式内打印long div,在IE

时间:2019-02-22 10:48:37

标签: css printing bootstrap-4 cross-browser

我正在开发该项目的新版本,但是打印CSS样式存在一些问题。

这里是旧项目:

https://www.traffwebdemo.co.uk/parking/main.html

要打印的步骤:

单击扳手按钮->打印机按钮->选择模板,将打开一个模态,然后您可以在两个方向上进行打印,这是通过iframe和2个CSS的混合完成的,其中一个在主项目中,另一个在其中在iframe本身中。

css打印会隐藏所有内容,并在打印时仅显示模式内容,因此,如果尝试直接在主页上打印,则只有白页。

由于地图的限制,我不再使用iframe,我仍在调用html模板,但随后将其主体克隆到模态中并再次摆脱iframe。

此处是新版本:

https://www.traffwebdev.uk/parking/test.html

该项目的两个版本都使用Bootstrap,但是旧版本调用了iframe并且我没有打印iframe引导程序,但是新方法摆脱了iframe,因此Bootstrap会干扰打印。

我在Chrome中的方向字段存在问题,在所有其他浏览器中都没有第二页,但是在深入研究Bootstrap问题后,我发现可以解决此问题,并用CSS规则覆盖

 @page {
   size: auto
 }
 .flex-class {
   display: block;
 }

现在我在Firefox和Opera中拥有第二页,但是...不幸的是,我们的客户使用IE11 ...并且我在IE中没有第二页

如何在IE中打印两个页面?这些规则似乎被完全忽略了。

#pllegwrapper {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

#pagesplit {
  display: block;
  page-break-before: always !important;
  break-before: page !important;
}

更新

我已将display: table应用于包含两页的主div,现在可以在IE中打印,但不能在FF中打印。

2 个答案:

答案 0 :(得分:0)

我设法用下面的代码解决问题,#printMod是引导程序模式本身,我删除了所有flex属性并进行了浮动。 然后,我将display: table应用于#printMod#printBody,这最后一个是.modal-body模态元素内的主要容器。 仅仅由于Bootstrap,就花了很长时间来修复它。

@media print {

  @page {
    size: auto;
  }

  body {
    margin:0 !important;
    padding:0 !important;
    height:100% !important;
    width: 100% !important;
  }
  body * {
    visibility: hidden;
  }

  #printMod,
  #printMod * {
    visibility: visible;
    float: none;
    display: block;
    flex: none !important;
  }

  #printBody {
    display: table !important;
    margin: auto !important;
  }

  #printMod {
    & {
      display: table !important;
      position: absolute;
      left: 0;
      top: 0;
      padding: 0 !important;
      margin: 0 !important;
      width: 100% !important;
      break-inside: auto;
      border: none !important;
      overflow: visible !important;
    }

    .modal-header,
    .modal-footer {
      display: none;
      border: none !important;
    }

    .modal-dialog,
    .modal-content,
    .modal-body {
      display: block;
      overflow: visible;
      height: 100% !important;
      max-height: 100% !important;
      padding: 0;
      border: none !important;
    }

    #plwrapper,
    #pllegwrapper {
      page-break-inside: avoid !important;
      break-inside: avoid !important;
    }

    #pagesplit {
      display: block;
      page-break-before: always !important;
      break-before: page !important;
    }
  }
}

答案 1 :(得分:0)

只需将模型的位置设为相对位置即可。

http://plnkr.co/edit/fspygnqWhsosqDTds0Og?p=preview

/**Modal Styles for Print**/

        @media print {
          body * {
            visibility: hidden;
          }
          #print-content * {
            visibility: visible;
            overflow: visible;
          }
          #mainPage * {
            display: none;
          }
          .modal {
            margin: 0;
            padding: 0;
            min-height: 550px;
            visibility: visible;
            /**Remove scrollbar for printing.**/
            overflow: visible !important;
            position: relative;
          }
          .modal-dialog {
            visibility: visible !important;
            /**Remove scrollbar for printing.**/
            overflow: visible !important;
          }