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

Question

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

当我尝试使用 Ctrl+P 在 Chrome 中打印表单时：“我在一个页面中获得了完整的表单，但没有 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 Package。 这是我对代码所做的以下更改。

//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);
});
}