使用 jsPdf 和 Html2Canvas 在 Angular 中将 HTML 页面转换为 PDF

Question

[第一个生成的 pdf img，位置 -182、0，图像 208,298 ][1]我正在尝试将 HTML 页面转换为 Angular 8+ 中的 PDF，使用jspdf 和 Html2canvas。我只能将页面的一半转换为 pdf。我所知道的是这是一些缩放问题。

当我尝试使用 Ctrl+P 打印 Chrome 中的表单时：“i在单个页面中获得完整表格，但没有 css"

当我在 mozilla 中尝试相同时：“它给了我两个不同的页面，没有 css

我已经尝试了所有示例，它们都是基于 html2Canvas 和 jspdf。

//pdf.component.ts
 public captureScreen() {
const filename = 'rtgs-form.pdf';
html2canvas(document.getElementById('contentToConvert')
).then(canvas => {
  const pdf = new jspdf('p', 'mm', 'a4');
  pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, -182, 208, 298);
  pdf.save(filename);
});
  }
//pdf.component.html
    <div class="container" >
    <section class="top-form" id="contentToConvert" >
        <img class="form-image-align" src="assets/images/topRtgsYesBank.jpg" alt="top of rtgs neft form" />
        <table class="form-between-part" style="background-color: #9c9c9c; color: #000;">
            <tr>
                <td>&nbsp;&nbsp;Branch Code &nbsp;</td>
                <td><input type="text" name="" id=""></td>
                <td><label for="">&nbsp;Branch Name&nbsp;</label></td>
                <td><input type="text">&nbsp;</td>
                <td><input type="checkbox" name="" id="">&nbsp;NEFT</td>
                <td><input class="" type="checkbox" name="" id="">&nbsp;RTGS</td>
                <td><label for="">&nbsp;Application Date&nbsp;</label></td>
                <td><input type="text"></td>
            </tr>
        </table>
        <div>
            <p style="margin: 5px;">To,<br />
                The Branch Manager,
                ___________________Branch<br />
                Dear Sir,<br />
                Please remit through NEFT/RTGS a sum of <span class="fas fa-rupee-sign"></span> _________ (Rupees in
                words)
                ___________________<br />
                as per details given below:<br />
                <input type="checkbox" name="" id="">&nbsp; Cash
                <input type="checkbox" name="" id="">&nbsp;Cheque
                <input type="checkbox" name="" id="">&nbsp;Debit my / our account</p>
            <p style="margin: 5px; font-size: 10px;">*In Case of cash, please fill in the pay-in slip</p>
            <p style="font-size: 10px"><b
                    style="background-color: #2089d4; color: white; font-size: 15px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;REMITTER
                    DETAILS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b> All fields are MANDATORY, All
                details should be entered in BLOCK LETTERS</p>
            <table class="form-between-part">
                <tr>
                    <td id="rtgs-fixed-col">PAN No.</td>
                    <td colspan="4"><input class="form-between-part" type="text" name="" id=""></td>
                    <td id="rtgs-fixed-col">Account type</td>
                    <td><input type="checkbox" name="" id="">Current</td>
                    <td><input type="checkbox" name="" id="">Savings</td>
                    <td><input type="checkbox" name="" id="">NRE</td>
                    <td><input type="checkbox" name="" id="">NRO</td>
                </tr>
                <tr>
                    <td id="fit-in-form">Remitter <br>(Applicant) name</td>
                    <td colspan="9"><input type="text" class="form-between-part" name="" id=""></td>
                </tr>
                <tr>
                    <td id="fit-in-form">Remitter <br>Account No.</td>
                    <td colspan="4"><input type="text" class="form-between-part" name="" id=""></td>
                    <td id="fit-in-form" colspan="2">Cash Deposited (Non - Customer)<br> Only in case of NEFT
                        transactions</td>
                    <td colspan="3"><input type="text" class="form-between-part" name="" id=""></td>
                </tr>
                <tr>
                    <td id="rtgs-fixed-col">Cheque Date:</td>
                    <td colspan="4"><input type="text" class="form-between-part" name="" id=""></td>
                    <td id="rtgs-fixed-col">Cheque No.</td>
                    <td colspan="4"><input type="text" class="form-between-part" name="" id=""></td>
                </tr>
                <tr>
                    <td rowspan="3" id="fit-in-form">Address of Remitter <i>(optional for YES BANK customers)</i></td>
                    <td rowspan="3" colspan="9"><textarea class="form-between-part"></textarea></td>
                </tr>
            </table>
            <table>
                <tr>
                    <td id="rtgs-fixed-col">Mobile Number</td>
                    <td colspan="5"><input type="text" class="form-between-part" name="" id=""></td>
                    <td id="rtgs-fixed-col">PIN code:</td>
                    <td id="rtgs-fixed-col"><input type="text" class="form-between-part" name="" id=""></td>
                </tr>
            </table>
            <p style="font-size: 10px"><b
                    style="background-color: #2089d4; color: white; font-size: 15px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BENEFICIARY
                    DETAILS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b> All fields are
                MANDATORY, All
                details should be entered in BLOCK LETTERS</p>
            <table class="form-between-part">
                <tr>
                    <td id="fit-in-form">Beneficiary Name*</td>
                    <td colspan="9"><input type="text" class="form-between-part" name="" id=""></td>
                </tr>
                <tr>
                    <td id="fit-in-form">Beneficiary <br>Account No.*</td>
                    <td colspan="4"><input type="text" class="form-between-part" name="" id=""></td>
                    <td id="fit-in-form" colspan="2">Beneficiary Bank*</td>
                    <td colspan="3"><input type="text" class="form-between-part" name="" id=""></td>
                </tr>
                <tr>
                    <td id="fit-in-form-text">Re confirm Beneficiary <br>Account No.*</td>
                    <td colspan="4"><input type="text" class="form-between-part" name="" id=""></td>
                    <td id="fit-in-form-text" colspan="2">Branch Name <br>& Address*</td>
                    <td colspan="3"><input type="text" class="form-between-part" name="" id=""></td>
                </tr>
                <tr>
                    <td id="rtgs-fixed-col">Account type</td>
                    <td><input type="checkbox" name="" id="">Current</td>
                    <td><input type="checkbox" name="" id="">Savings</td>
                    <td><input type="checkbox" name="" id="">NRE</td>
                    <td><input type="checkbox" name="" id="">NRO</td>
                    <td id="rtgs-fixed-col">IFSC code*</td>
                    <td colspan="4"><input type="text" class="form-between-part" name="" id=""></td>
                </tr>
                <tr>
                    <td id="fit-in-form">Purpose of<br>Remittance</td>
                    <td colspan="9"><input type="text" class="form-between-part" name="" id=""></td>
                </tr>
                <tr>
                    <td id="fit-in-form-text">Message from <br>Sender to Receiver</td>
                    <td colspan="3"><input type="text" class="form-between-part" name="" id=""></td>
                    <td id="fit-in-form-text">Beneficiary<br>Mobile No.</td>
                    <td id="rtgs-fixed-col" colspan="3"><input type="text" class="form-between-part" name="" id=""></td>
                </tr>
            </table>
        </div>
        <img class="form-image-align" src="assets/images/bottomRtgsYesBank.jpg" alt="bottom-rtgs-yes-bank" srcset="">
    </section>
</div>
<div>
    <button class="btn btn-primary" (click)="captureScreen()">
        Print
    </button>
    </div>

我希望在一页 pdf 中打印整个表格。

Answer 1

> As you know it is scaling Issue, The Page size is fixed: 

> If data is slightly larger then the page, then you can use the jspdf > methods like: setLineWidth, setPage etc to minimize the space and >render the page into single page.

> If the content is large then it will be split into two pages. but you > can split the page when you want jspdf method addPage(format, >orientation).


> You can use code like this,
> var myImage = canvas.toDataURL("image/jpeg,1.0");
>                   // Adjust width and height
>                   var imgWidth = (canvas.width * 20) / 240;
>                   var imgHeight = (canvas.height * 20) / 240; 
>                   // jspdf changes
>                   var pdf = new jsPDF('p', 'mm', 'a4');
>                   pdf.addImage(myImage, 'JPEG', 15, 2, imgWidthimgHeight); // 2: 19
>                   pdf.save('Download.pdf');

Answer 2

你能改一下你的代码行吗

pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, -182, 208, 298);

至

pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 290, 298);

您的“-182”是将起点放在 PDF 之外的图像左上角。最后的两个参数 (208, 298) 也可以调整以调整图像大小以适合您。

我试过你的代码并得到了这个输入的不错的输出Click here。请尝试让我知道。

Answer 3

我自己通过一些研发解决了这个问题。

我注意到这不是我的 jspdf 库的问题，而是 html2canvas 库的问题俘虏了一半。所以为了解决这个问题，我使用了 html-to-image npm 包。这是我对代码所做的以下更改。

//in my component i imported
import htmlToImage from 'html-to-image';

public captureScreen() {
const filename = 'rtgs-form.pdf';
const node = document.getElementById('contentToConvert');
htmlToImage.toPng(node)
.then( (dataUrl) => {
const img = new Image();
img.src = dataUrl;
const pdf = new jspdf('p', 'mm', 'a4');
pdf.setLineWidth(1);
pdf.addImage(img, 'PNG', 0, 0, 208, 298);
pdf.save(filename);
})
.catch((error) => {
console.error('oops, something went wrong!', error);
});
}

使用 jsPdf 和 Html2Canvas 在 Angular 中将 HTML 页面转换为 PDF

Convert HTML page to PDF in Angular using jsPdf and Html2Canvas

html

html2canvas

jspdf

typescript

angular