如何在角度js上打破下一页的pdf内容

时间：2016-11-10 11:01:59

标签： angularjs kendo-ui

我使用kendo ui将角度转换为HTML格式为PDF。一切都很好。我想在多个页面上添加我的内容。使用kendo ui内容未正确对齐所有内容都搞砸了，一些内容隐藏在页面之间。

我的脚本是 - 

<script>
            var generatePDF = function() {          
                kendo.drawing.drawDOM($("#printPlanId"), {paperSize: "A4"}).then(function(group) {
                kendo.drawing.pdf.saveAs(group, "Converted PDF.pdf");
                });

            }   
        </script>

我的内容如下： - enter image description here

如何将我的html导出为pdf？

2 个答案:

答案 0 :(得分：0)

试试这段代码，我想更多帮助..参考链接：[http://dojo.telerik.com/UqoQu/4][1] 

  <html>
    <head>
        <meta charset="utf-8"/>
        <title>Kendo UI Snippet</title>

        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>

        <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
    </head>
    <body>

        <style>
            /*
                Use the DejaVu Sans font for display and embedding in the PDF file.
                The standard PDF fonts have no support for Unicode characters.
            */
            .k-grid {
                font-family: "DejaVu Sans", "Arial", sans-serif;
            }
        </style>

        <script>
            // Import DejaVu Sans font for embedding

            // NOTE: Only required if the Kendo UI stylesheets are loaded
            // from a different origin, e.g. kendo.cdn.telerik.com
            kendo.pdf.defineFont({
                "DejaVu Sans"             : "http://kendo.cdn.telerik.com/2016.3.1028/styles/fonts/DejaVu/DejaVuSans.ttf",
                "DejaVu Sans|Bold"        : "http://kendo.cdn.telerik.com/2016.3.1028/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
                "DejaVu Sans|Bold|Italic" : "http://kendo.cdn.telerik.com/2016.3.1028/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
                "DejaVu Sans|Italic"      : "http://kendo.cdn.telerik.com/2016.3.1028/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
            });
        </script>

        <!-- Load Pako ZLIB library to enable PDF compression -->
        <script src="//kendo.cdn.telerik.com/2016.3.1028/js/pako_deflate.min.js"></script>

        <div id="grid"></div>
      <div id="printPlanId">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

    The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
        Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

    The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
        Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

    The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
        Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

    The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
        Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

    The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
        Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

    The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
        er</div>
      <div id="ssdd" ><input type="Button" Name="Save" OnClick="XARD();" /> </div>
        <script>
            function XARD() {          
                    kendo.drawing.drawDOM($("#printPlanId"),
                                          { paperSize: "A4",
                                          margin:"3cm"} ).then(function(group) {
                    kendo.drawing.pdf.saveAs(group, "Converted PDF.pdf");
                    });

                }   
        </script>
    </body>
    </html>


  [1]: http://dojo.telerik.com/UqoQu/4

答案 1 :(得分：0)

这是我使用angular的内容： - 

<body class="main-body" >

<div class="wrapper-body" id="printPlanId"  ng-app="personalPlanDisplay" ng-controller="personalprintController">

<div ng-repeat="X in names">    


<div class="page1" >    
<div class="logo-body" ><img ng-src="images/logo.png" width="600px"></div>

<div class="body-head" ><p>personnel plan</p></div>


<div class="pre-for" ><p>prepared for: {{X.prepared_for}}</p></div>


<div class="pre-date" ><p>{{X.annuity_date}}</p></div>

</div>


<div class="page-break"></div>


<div class="page2" >    

<div class="obj-main">OBJECTIVES</div>


<div class="obj-t" >
<p>To provide safety, liquidity, and
income during your lifetime, and
to provide a method of
transferring your estate upon
your passing in the most
expeditious and tax efficient way
possible.</p>
</div>


<div class="bottom1" >page 1 of 6</div>




</div>




<div class="page3" >    

<div class="sol-h" > SOLUTION</div>

<div class="border-line" ></div>

<div class="ira" >Qualified IRA Annuity</div>


<div class="tra-con" >
<p class="tra-h" >Transfer <span style="background:#ffff00;">${{X.transfer_amount | number}}</span> from your IRA
accounts into a Qualified IRA
Annuity with <span style="background:#ffff00;">American Equity
Investment Life Insurance
Company.</span></p>

<p class="isnu-c" >The insurance company will credit
you with an <span style="background:#ffff00;">{{X.bonus}}% </span>first year bonus,
and the guaranteed earnings rate
on the Income Account will
be <span style="background:#ffff00;">{{X.i_a_e_rate}}%.</span></p>


<p class="isnu-c1" > This Strategy is the safest way to
accomplish the following:

</p>



</div>
<div class="border-line1" >page 2 of 6</div>
</div>






<div class="page4" >    

<div class="saf-main" >
<div class="saf-h" ><div class="saf-t" >Safety: </div></div>
<div class="saf-h1" ><div class="saf-t" >a very large insurance company who is insuring and guaranteeing your money.</div></div>
</div>



<div class="liq-main" >
<div class="liq-h" >
<div class="liq-t" >Liquidity: </div></div>
<div class="liq-h1" ><div class="liq-t1" >in case of emergency the
funds are available to
you.... 10% per year</div></div>
</div>



<div class="inc-main" >
<div class="inc-h" ><div class="inc-t" >Income: </div></div>
<div class="life-main" >
            <div class="life-opt" >Lifetime Income Options
            include:</div>


            <div class="life-opt-m" >
                <span class="life-opt-a" > Age {{X.age}} </span>
                <span class="life-opt-p" >$ {{X.per_year }} per year</span>
            </div>


            <div class="life-opt-m" ng-if="X.age_1">
                <span class="life-opt-a"> Age {{X.age_1}} </span>
                <span class="life-opt-p"> $ {{X.per_year_1 }} per year</span>
            </div>
            <div class="life-opt-m" ng-if="X.age_2">
                <span class="life-opt-a"> Age {{X.age_2}} </span>
                <span class="life-opt-p"> $ {{X.per_year_2 }} per year</span>
            </div>


</div>
</div>


<p class="r-o-l" >... for the rest of your life.</p>


<div class="smr" >Please review the following Summaries:</div>

<div class="border-line2" >page 3 of 6</div>

</div>


<div class="page5" >    
<div class="sumr1" > Summary 1 </div>


<div class="border-line3" ></div>



<div class="inc_s" > Lifetime Income started at age {{X.started_age}} </div>

<div class="border-line4" ></div>



<div class="acc-main" >
<div class="acc-h" ><div class="acc-t" >Income Account Balance </div></div>
<div class="acc-h1" ><div class="acc-t1" >$ {{X.balance | number}}</div></div>
</div>



<div class="ann-main" >
<div class="acc-h" ><div class="acc-t" >Annual Lifetime Income</div></div>
<div class="acc-h1" ><div class="acc-t1" >$ {{X.income | number}} ($ {{X.income_p_m | number}}/month)</div></div>
</div>



<div class="ann-main">
<div class="acc-h" ><div class="acc-t" >Total Distributions at Life Expectanc</div></div>
<div class="acc-h1" ><div class="acc-t1" > (Age {{X.exp_age}}) $ {{X.exp_price }}</div></div>
</div>



<div class="acc-main" >
<div class="acc-h" ><div class="acc-t" >Estimated Contract Value at Life Expectanc</div></div>

<div class="acc-h1" ><div class="acc-t1" >$ {{X.life_exp}}</div></div>
</div>




<div class="illus-main" > * Illustration attached </div>
<div class="border-line5" >page 4 of 6</div>
</div>

<div class="page6" >    

<div class="sumr2" >Summary 2 </div>




<div class="rmd-main" >
<div class="rmd-t" >    RMD's taken for ages {{X.rmd_age}} thru {{X.thru}},</div><br/>
<div class="rmd-t" >Lifetime Income started at age {{X.started_age}}</div> </div>


<div class="acc-main" >
<div class="bal-h" ><div class="bal-t" >Income Account Balance </div></div>
<div class="bal-h1" ><div class="bal-t1" >$ {{X.balance | number}}</div></div>
</div>



<div class="ann-main" >

<div class="bal-h" ><div class="bal-t" >Annual Lifetime Income</div></div>
<div class="bal-h1" ><div class="bal-t1" >$ {{X.income | number}} ($ {{X.income_p_m | number}}/month)</div></div>
</div>



<div class="ann-main" >
<div class="bal-h" ><div class="bal-t" >Total Distributions at Life Expectancy</div></div>
<div class="bal-h1" ><div class="bal-t1" > (Age {{X.exp_age}}) $ {{X.exp_price}}</div></div>
</div>



<div class="acc-main" >
<div class="bal-h" ><div class="bal-t" >Estimated Contract Value at Life Expectancy</div></div>

<div class="bal-h1" ><div class="bal-t1" >$ {{X.life_exp}}</div></div>
</div>


<div class="illus"> * Illustration attached </div>


  <div class="border-line6" >page 5 of 6</div>

    </div>



    <div class="page7" >

<div class="btm-pr-main" >
<p class="btm-pr-t" > If you were to delay initiating the
Lifetime Income opportunity, you will
still be required to take your
Required Minimum Distributions.</p>



<p class="btm-pr-t" >The following page illustrates the
estimated amounts of these
Required Minimum Distributions and
is followed by some general
information for your review.</p>

<p class="btm-pr-t" >In Summary, this strategy can
provide you guaranteed income for
the rest of your life, and your
premium is insured and guaranteed
by a large insurance company, which
are among the strongest financial
institutions in the world.</p>

<p class="btm-pr-t" >The annuity provides for a first year
bonus and a guaranteed growth rate
on the income account.</p>

<p class="btm-pr-l" >The indexing strategy used within
the annuity removes the risk of
market losses.</p>


</div>
<!--</div> -->




                <div class="printsection no-print" style="clear:both;width:100%;float:left;">
                    <button class="btn btn-primary" ng-print print-element-id="printPlanId"><i class="fa fa-print"></i> Print</button>
                    <button class="btn btn-primary pdf-doc" onclick="generatePDF();"><i class="fa fa-print"></i> Download PDF</button>
                </div>



<div class="border-line7" >page 6 of 6</div>
</div>      


</div>  


</body>
相关问题
最新问题