Question

我正在尝试使用红色段打印一个div。

在屏幕上，div颜色显示正常，段落为红色。

单击按钮进行打印时，打印机对话框显示页面，但没有颜色，如果单击将预览发送到打印机，则文本也会打印为不带颜色。

我将打印机配置为BW，但在打印之前我将其更改为彩色模式。该页面总是打印在BW。

我做错了什么？

//控制器

$scope.PrintDoc=function(id) {
        var printSection = document.getElementById('printSection');
        // if there is no printing section, create one
        if (!printSection) {
            printSection = document.createElement('div');
            printSection.id = 'printSection';
            document.body.appendChild(printSection);
        }
        var elemToPrint = document.getElementById(id);
        if (elemToPrint) {
                    printElement(elemToPrint);
        }
        function printElement(elem) {
            // clones the element you want to print
            var domClone = elem.cloneNode(true);
            printSection.innerHTML = '';
            printSection.appendChild(domClone);
            window.print();
        }
}

//标记

<div id="folha">
    <div class="row">
        <div class="col-sm-12 row-print">
            <div class="pull-left"><p>MY TEST</p></div>
        </div>
    </div>
</div>
<div class="row" >
 <button type="button" ng-click="PrintDoc('folha')"
   class="btn btn-primary">
    Print
  </button>
</div>

// CSS

<style type="text/css">
@media screen {
    #folha {
        display: none;
    }
}

@media print {
body * {
    display:none;
}
.row-print{
  margin:15px; 
  color:red;
}
@page { margin:0cm }
    @page :first {
      margin-top:0cm;
    }
    @page :left {
      margin-left:0cm;
      margin-right:0cm;
    }
    @page :right {
      margin-left:0cm;
      margin-right:0cm;
    }

#printSection, #printSection * {
    display: block!important;
    -webkit-print-color-adjust: exact;
}

#printSection {
    position:absolute;
    left:0;
    right: 0;
    top:0;
}

 </style>

如何使用Jquery打印带颜色的div内容

0 个答案: