在 AngularJS 中使用 ng-print 时如何应用 css 样式

Question

我使用 angular JS 创建了 PHP 页面。现在，我也想打印该页面。我在 app.js 中添加了 ngPrint，并将 id 分配给主 div。页面预览数据显示完美，但没有 css 属性。我还添加了 ngPrint.css 和 ngPrint.js .

我在 header 部分的代码：-

<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/angular.min.js"></script>   
<script src="app/app.js"></script>
<!-- ng-print -->
<link rel="stylesheet" type="text/css" href="css/ngPrint.css">
<script src="js/ngPrint.js"></script>
<!--/ ng-print -->

在 app.js 上：-

var mainApp = angular.module("IncomeBenefit", ['ngPrint']);

显示页面：-

    <div class="main" id="printSectionId" ng-app="IncomeBenefit">
    <h1 class="main_h1_calc">Calculator</h1>    
        <div class="col-main-w-12" ng-controller="displayController">
            <div class="col-main-w-5">
                <div class="form-header-main" ng-repeat="X in names">

                                    <!-- form section -->                           
                                    <div class="form-header">
                                        <div class="form-header-l">Client Age</div>     
                                        <div class="form-header-r">{{X.client_age}}</div>       
                                    </div>                              
                                    <!--/ form section -->      
                </div>
            </div>
<button class="btn btn-primary" ng-print print-element-id="printSectionId"><i class="fa fa-print"></i> Print</button>
                </div>
            </div>

我不知道。如何将 css 属性添加到我的可打印数据中。我也尝试过内联 css 但无法成功。我能做什么？

Answer 1

在您的 style.css 文件中尝试添加以下内容，看看会发生什么：

@media print {
  body { border: 15px solid black; }
}

您必须使用 @media print 来应用打印样式并在其中包含所有内容，但请记住 css 支持在打印时受到一定限制。

A good tutorial to get started with

在 AngularJS 中使用 ng-print 时如何应用 css 样式

How to apply css style when using ng-print inAngular JS

html

css

angularjs