如何使用angular生成pdf？
我们使用了高级图表来生成图形，而那些带有动态信息的图表我想生成pdf。
您能告诉我该方法吗？
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<style>
/* cyrillic-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFWJ0bf8pkAp6a.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFUZ0bf8pkAp6a.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFWZ0bf8pkAp6a.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVp0bf8pkAp6a.woff2) format('woff2');
unicode-range: U+0
70-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFWp0bf8pkAp6a.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFW50bf8pkAp6a.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UNirkOX-hpKKSTj5PW.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UNirkOVuhpKKSTj5PW.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UNirkOXuhpKKSTj5PW.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UNirkOUehpKKSTj5PW.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UNirkOXehpKKSTj5PW.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UNirkOXOhpKKSTj5PW.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOX-hpKKSTj5PW.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOVuhpKKSTj5PW.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOXuhpKKSTj5PW.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOUehpKKSTj5PW.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOXehpKKSTj5PW.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOXOhpKKSTj5PW.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOUuhpKKSTjw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>
<style>
*{margin: 0;padding:0;}
body {margin: 0;padding:0;font-family: 'Open Sans', sans-serif;font-size: 14px;font-weight: 400;background: #999;}
ul,ol,li {list-style: none;padding: 0;margin: 0;}
.clearfix {clear: both;}
.wrapper {margin: 0 auto;width:760px;background: #fff;padding: 15px 20px;}
.header {background: #001f45;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;height:147px}
.header-left {float: left;width:180px}
.header-left img {border-top-left-radius: 5px;border-bottom-left-radius: 5px;max-width:100%;height:147px}
.header-right {float: right;padding-right: 15px;padding-top: 15px;text-align: right;}
.header .header-title {font-size: 26px;font-weight: 600;color: #fff;line-height: 33px;}
.header .header-title sup {font-size: 17px;}
.header .header-title span{color: #ffd71e;}
.header .header-right p{font-size: 20px;font-weight: 400;color: #fff;margin-top: 10px;}
.body-content {padding:10px 0;}
.body-content h1 {font-size: 20px;font-weight: 600;color: #07639d; margin: 5px 0}
.body-content p {font-size: 9px;color: #1a1d1e;line-height: 15px;margin-top: 5px;}
.sub-title {font-size: 15px;font-weight: 400;color: #07639d;margin-top: 10px;}
.body-content ul {list-style: none;margin: 0 0 15px;padding:0;}
.body-content ul li {position: relative;font-size: 10px;color: #1a1d1e;line-height: 15px;margin-top: 5px;padding-left: 15px;}
.body-content ul li span {font-weight: 600;}
.body-content ul li:before {content: "";width: 5px;height: 5px;position: absolute;left: 0;top: 4px;background: #07639d;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;}
.welcome-text {padding: 0 15px;margin-bottom: 10px;}
.welcome-text ul {background-color: #cacaca;padding: 10px;border-radius: 7px;margin-top: 10px;}
.welcome-text ul li {line-height: 10px;}
.welcome-text p {font-size: 10px;line-height: 13px;}
.footer ul {padding: 7px 0;}
.footer ul:after {content: "";clear: both;display: block;}
.footer ul li{display: inline-block;width: 33%;float: left}
.footer ul li:last-child {text-align: right;}
.footer p {font-size: 10px;color: #1a1d1e;line-height: 15px;margin-top: 10px;}
.footer ul li:first-child p{font-size:8px;}
.footer ul li:first-child p span {font-weight: 500;}
.footer ul li:nth-child(2) p {font-size: 8px;text-align: center;}
.innner-header {background: #186298;border-radius: 5px;text-align: right;padding: 10px 50px;}
.innner-header .header-title {font-size: 16px;font-weight: 600;color: #fff;}
.innner-header p {font-size: 12px;color: #fff;font-weight: 400;}
.inner-page {padding: 7px 25px 0;}
.personalized-data {background-color: #e3f5f8;border: 1px solid #999;padding: 0 10px 10px;margin: 15px 0;}
.personalized-data p {font-weight: 600;}
.personalized-data p span {text-transform: uppercase;font-weight: 400;width: 180px;display: inline-block;}
.inner-title {text-transform: uppercase;margin-top:10px;font-size: 11px;font-weight: 400;}
.risk-box {background-color: #041e42;padding: 15px;border-radius: 5px;margin-top: 20px;margin-bottom: 15px;}
.risk-box-lt {float: left;text-align: left;font-size: 18px;color: #fff;font-weight: 600;}
.risk-box-rt {float: right;text-align: right;}
.risk-box-rt h3 {color: #fff;font-size: 15px;font-weight: 400;}
.risk-box-rt h3 span {font-size: 18px;font-weight: 600;}
.risk-box-rt p {color: #fff;margin-top: 0;font-style: italic;font-size: 9px;}
.risk-box-rt p a {color: #fff;}
.income-over {margin: 6px 0;}
.income-over-lt {float: left;width: 50%;}
.income-over-lt img {width: 100%;}
.income-over-rt {float: right;width: 45%;padding-left: 5%;padding-bottom: 0;}
p.simulates-title {font-size: 16px;font-weight: 400;color: #07639d;margin: 15px 0;}
p.simulates-title span {font-weight: 700;}
.terms-left {float: left;width:48%;padding-right: 2%}
.terms-new p span{font-weight: 600; color: #1A1D1E;}
.terms-right {float: right;width:48%;padding-left: 2%}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="header-left">
<img src=header-img.jpg alt="Header"/>
</div>
<div class="header-right">
<div class="header-title"><span>PruSmartTrak<sup>SM</sup></span> Recommendation for<br>Surya Kiran</div>
<p>
As of 03/05/2019</p>
</div>
<div class="clearfix"></div>
</div>
<div class="body-content">
<div class="welcome-text">
<h1>Welcome to PruSmartTrak</h1>
<p>Thank you for considering <b>PruSmartTrak!</b> The <b>PruSmartTrak</b> program is a personalized retirement income solution designed to help you meet your unique retirement income goals. By combining guarantees from an annuity with a portfolio of mutual funds and applying an income focused strategy, <b>PruSmartTrak</b> helps you manage the risk of running out of income in retirement. Let's start planning with <b>PruSmartTrak!</b></p>
<div class="sub-title">PruSmartTrak can help you have a more secure future with:</div>
<ul>
<li><span>Growth and liquidity potential:</span> The value of your mutual fund portfolio may rise, or fall, based on investment performance. You have access to the money in your mutual fund portfolio</li>
<li><span>Guaranteed lifetime income:</span> Your income payments from the Deferred Income Annuity (DIA) are guaranteed and will last for your lifetime</li>
<li><span>Ongoing review:</span> We will periodically monitor your account and provide an indication of whether you are on track to meet your retirement income goals</li>
<li><span>Customization:</span> Working with your financial professional, you'll have the flexibility to update your retirement income goals anytime</li>
</ul>
<p style="line-height: 14px">The following pages include a proposal that has been created by your financial professional using information that you have provided. Your financial professional can modify any of the inputs and answer any questions about <b>PruSmartTrak</b>.</p>
</div>
<p>PruSmartTrak is an investment advisory program offered by Pruco Securities, LLC ("Pruco"), under the marketing name Prudential Financial Planning Services ("PFPS").</p>
<p>Envestnet Asset Management, Inc. ("Envestnet"), a non-affiliated third-party investment adviser firm, serves as a co-adviser to the separate portfolio of mutual funds along with PFPS. Envestnet manages the portfolio of mutual funds on a discretionary basis in accordance with the selected asset allocation model, subject to any reasonable investment restrictions you request and Envestnet accepts. Envestnet does not act as an investment adviser to the DIA portion of your PruSmartTrak account.</p>
<p>The Deferred Income Annuity is issued by Prudential annuities life Assurance Corporation, Shelton, CT (main office, "PALAC").</p>
</div>
<div class="footer">
<ul>
<li><p>1008597-00003-00<br><span><b>1/11</b> PruSmartTrak</span></p></li>
<li><p><b>NOT VALID WITHOUT ALL PAGES</b></p></li>
<li><img class = "img-response" width = "146px" height = "40px" src=allocation-img.jpg alt="footer"/></li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="innner-header">
<div class="header-title">PruSmartTrak Recommendation for Surya Kiran</div>
<p>
As of 03/05/2019</p>
</div>
<div class="body-content inner-page">
<h1>Your Personalized PruSmartTrak Program</h1>
<div class="personalized-data">
<p><span>Your Current Age:</span> 53</p>
<p><span>Your Retirement Age:</span> 65</p>
<p><span>Your Income Start date:</span> 12/15/2030</p>
<p><span>Target income period:</span> 19</p>
</div>
<div class="inner-title">Your Initial Contribution: $999,999</div>
<ul>
<li>The deferred income annuity purchase payment: $101,218</li>
<li>Portfolio of mutual funds: $898,781</li>
</ul>
<div class="inner-title">Your monthly target income amount: $5,000</div>
<p>The total amount of monthly income you would like to receive during your Target Income Period, beginning on your income Start Date. Your Target Income Amount consists of two parts: 1) Your Guaranteed Income Amount from your Deferred Income Annuity and 2) An additional, non-guaranteed income amount generated from the remaining contribution(s) allocated to your portfolio of mutual funds.</p>
<div class="inner-title">The Amount of your monthly income that is guaranteed*: $900</div>
<p>The amount of monthly guaranteed lifetime income you would like to receive from your deferred income annuity, beginning on your Income Start Date.</p>
<br>
<br>
<br>
<br>
<br>
<p>*The monthly guaranteed income amount associated with each Purchase Payment is determined by the purchase rate in effect on the date the Purchase Payment is credited to the contract. Actual purchase rates are subject to change and may be higher or lower in the future.</p>
</div>
<br>
<div class="footer">
<ul>
<li><p><span><b>2/11</b> PruSmartTrak</span></p></li>
<li><p><b>NOT VALID WITHOUT ALL PAGES</b></p></li>
</ul>
<br>
</div>
</div>
<div class="wrapper">
<div class="innner-header">
<div class="header-title">PruSmartTrak Recommendation for Surya Kiran</div>
<p>
As of 03/05/2019</p>
</div>
<div class="body-content inner-page">
<h1>Your Personalized PruSmartTrak Program</h1>
<div class="risk-box">
<div class="risk-box-lt">
Risk Tolerance: Capital Preservation
</div>
<div class="risk-box-rt">
<h3>SmartTrak Score: <span>100%</span></h3>
<p>The SmartTrak Score is not guaranteed and may <br>change with each simulation.</p>
</div>
<div class="clearfix"></div>
</div>
<p>Your Risk Tolerance is based on the result of your Risk Tolerance Questionnaire. It is a measure of your willingness and capacity to tolerate volatility in your investment portfolio and corresponds to an asset allocation model with risk and return characteristics appropriate for you.</p>
<br>
<p>The SmartTrak Score is an indication of whether you are on track to achieve your Target Income Amount for your entire Target Income period. It is a measurement of the cumulative income amount you may receive during your target Income Period <i>divided by</i> the cumulative Target Income Amount you would like to receive during your Target Income Period, across thousands of simulated market scenarios. We say "simulated" because there is no way of predicting market outcomes, which among other factors, affect the mutual fund portion of the account, and therefore your ability to receive your Target Income Amount for the full Target Income Period. Accordingly, even a SmartTrak Score of 100% is not a guarantee that you will receive your full Target Income Amount over your entire Target Income Period.</p>
<p>The SmartTrak Score is weighted between the average of thousands of simulated market scenarios and the average of the worst performing 20% of those market scenarios. Based on how you answer income risk tolerance questions, PruSmartTrak will seek to limit the losses of your non-guaranteed income during poorly performing markets, which will generally limit upside potential in better performing markets. Please review the SmartTrak Score in conjunction with the Simulated Income over Time chart which indicates how your account may perform in discrete market scenarios.</p>
<p>SmartTrak Scores are not guaranteed and may change with each simulation. They are neither a probability of success nor a guarantee of success, as conventionally used - For this reason, it is important to consider the SmartTrak Score in addition to your investment objectives, risk tolerance, goals and needs. It should not be considered as a standalone indicator of the suitability of the account or investment selection.</p>
</div>
<br>
<br>
<div class="footer">
<ul>
<li><p><span><b>3/11</b> PruSmartTrak</span></p></li>
<li><p><b>NOT VALID WITHOUT ALL PAGES</b></p></li>
</ul>
<br>
<br>
</div>
</body>
</html>
答案 0 :(得分：1)
您可以使用jsPDF
此处的示例： https://www.c-sharpcorner.com/article/convert-html-to-pdf-using-angular-6/
安装jspdf：
npm install jspdf
npm install html2canvas
然后导入您要使用的
import * as jspdf from 'jspdf';
import html2canvas from 'html2canvas';
然后更新您的component.html
<div id="content" #content>
<mat-card>
<div class="alert alert-info">
<strong>Html To PDF Conversion - Angular 6</strong>
</div>
<div>
<input type="button" value="CPTURE" (click)="captureScreen()"/>
</div>
</mat-card>
</div>
<div >
<mat-card>
<table id="contentToConvert">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>
<tr>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
<tr>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
</tr>
<tr>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
</tr>
</table>
</mat-card>
</div>
然后更新您的component.ts
import { Component, OnInit, ElementRef ,ViewChild} from '@angular/core';
import * as jspdf from 'jspdf';
import html2canvas from 'html2canvas';
@Component({
selector: 'app-htmltopdf',
templateUrl: './htmltopdf.component.html',
styleUrls: ['./htmltopdf.component.css']
})
export class HtmltopdfComponent{
public captureScreen()
{
var data = document.getElementById('contentToConvert');
html2canvas(data).then(canvas => {
// Few necessary setting options
var imgWidth = 208;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
const contentDataURL = canvas.toDataURL('image/png')
let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
var position = 0;
pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
pdf.save('MYPdf.pdf'); // Generated PDF
});
}
}
希望这会有所帮助。