我使用kendo ui將角色js中的HTML轉換爲PDF。所有的事情都很好。我想在多個頁面上添加我的內容。使用未正確對齊的kendo ui內容都會搞砸，並且頁面之間會隱藏一些內容。如何打開下一頁上的角度js的pdf內容
我的腳本 - 顯示像
<script>
var generatePDF = function() {
kendo.drawing.drawDOM($("#printPlanId"), {paperSize: "A4"}).then(function(group) {
kendo.drawing.pdf.saveAs(group, "Converted PDF.pdf");
});
}
</script>
我的內容： - 
我能做些什麼，以我的HTML導出爲PDF？
試試這個代碼，我想幫助更多的..參考鏈接：[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
這是採用了棱角分明我的內容： -
<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>
http://dojo.telerik.com/ UqoQu/5 – Deepak
它不適用於我 –
實際上，我使用角度和一些值來自角度響應。 –