如何使用 javascript 将 HTML 表单转换为可编辑的 pdf？答案

【问题标题】：How to convert HTML form to an editable pdf using javascript?如何使用 javascript 将 HTML 表单转换为可编辑的 pdf？
【发布时间】：2021-11-26 16:53:54
【问题描述】：

您好，我是 JS 初学者，但我有一个用例，我需要将 HTML 表单转换为可编辑的 pdf。这样，生成的 pdf 将被传递给一个 js 脚本，该脚本使用 pdftk 包填充 pdf 模板。

我尝试使用 htm2pdf，但生成的 pdf 是图像扫描的，而不是可编辑的表单。谁能帮助我，我已经尝试了一个多星期，但找不到合适的解决方案。提前致谢

【问题讨论】：

标签： javascript node.js pdf-generation html-to-pdf

【解决方案1】：

您想要一个生成 PDF 文档的客户端解决方案，JavaScript 是将 HTML 转换为 PDF 的最简单方法。有各种 JavaScript 库可用于从 HTML 生成 PDF。 js PDF 是使用 JavaScript 将 HTML 转换为 PDF 的最佳库之一。

<!-- jsPDF library -->
<script src="js/jsPDF/dist/jspdf.min.js"></script>

请注意：您不需要单独下载jsPDF库，所有需要的文件都包含在我们的源代码包中。 var doc = new jsPDF();

doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript to generate a PDF.');



   // Add new page
    doc.addPage();
    doc.text(20, 20, 'Visit CodexWorld.com');

    // Save the PDF
    doc.save('document.pdf');
    HTML Code:
    <div id="content">
        <!-- HTML contnet goes here -->
    </div>

    <div id="elementH"></div>
    JavaScript Code:
    var doc = new jsPDF();
    var elementHTML = $('#contnet').html();
    var specialElementHandlers = {
        '#elementH': function (element, renderer) {
            return true;
        }
    };
   doc.fromHTML(elementHTML, 15, 15, {
        'width': 170,
        'elementHandlers': specialElementHandlers
    });

// Save the PDF
   doc.save('sample-document.pdf');
   var doc = new jsPDF();
    
   doc.text(20, 20, 'This is the default font.');

    doc.setFont("courier");
    doc.setFontType("normal");
    doc.text(20, 30, 'This is courier normal.');

    doc.setFont("times");
    doc.setFontType("italic");
    doc.text(20, 40, 'This is times italic.');

    doc.setFont("helvetica");
    doc.setFontType("bold");
    doc.text(20, 50, 'This is helvetica bold.');

    doc.setFont("courier");
    doc.setFontType("bolditalic");
    doc.text(20, 60, 'This is courier bolditalic.');

    // Save the PDF
    doc.save('document.pdf');

【讨论】：