Question

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

标题部分中的代码： -

<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来应用打印样式并在其中包含evertyhing，但请记住，打印时css支持有些限制。

A good tutorial to get started with

如何在使用ng-print inAngular JS时应用css样式

1 个答案: