在 JSPDF 生成的 PDF 文件中轻松添加顶部边距，解决布局难题

javascript

2024-03-25 01:49:17

在 JSPDF 下载的 PDF 文件中添加顶部边距

问题背景

使用 JSPDF 库生成 PDF 文件时，内容往往从页面顶部开始，没有顶部边距。这可能会导致布局问题，需要添加顶部边距。

解决方案

步骤 1：添加顶边距变量

在 JavaScript 代码中，创建一个名为 top_left_margin 的变量，并指定所需的边距大小（以像素为单位）。

步骤 2：调整 PDF 尺寸

将 PDF 宽度和高度计算公式更新为：

PDF_Width = HTML_Width + (top_left_margin * 2)
PDF_Height = (PDF_Width * 1.2) + (top_left_margin * 2)

步骤 3：调整图像高度

将图像高度计算公式更新为：

imgHeight = canvas.height * imgWidth / canvas.width + top_left_margin

步骤 4：添加图像到 PDF

在添加图像到 PDF 的代码中，使用 top_left_margin 作为图像 y 坐标的偏移量：

doc.addImage(imgData, 'PNG', top_left_margin, position, imgWidth, imgHeight)

代码示例

const section = document.getElementById('summaryId');

var HTML_Width = section.scrollWidth;
var HTML_Height = section.scrollHeight;
var top_left_margin = 15;
var PDF_Width = HTML_Width + (top_left_margin * 2);
var PDF_Height = (PDF_Width * 1.2) + (top_left_margin * 2);
var canvas_image_width = HTML_Width;
var canvas_image_height = HTML_Height;

var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;

html2canvas(section, { allowTaint: true }).then(function (canvas) {
    var imgData = canvas.toDataURL('image/png');
    var imgWidth = 210;
    var pageHeight = 299;
    var imgHeight = canvas.height * imgWidth / canvas.width + top_left_margin;
    var heightLeft = imgHeight;

    var doc = new jspdf.jsPDF();
    var position = 0;

    doc.addImage(imgData, 'PNG', top_left_margin, position, imgWidth, imgHeight);
    heightLeft -= pageHeight;

    while (heightLeft >= 0) {
        position = heightLeft - imgHeight;
        doc.addPage();
        doc.addImage(imgData, 'PNG', top_left_margin, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
    }

    doc.save("Dashboard.pdf");
});