如何在自动填写的 HTML 表单上创建下载 pdf 按钮？答案

【问题标题】：How do I create a download pdf button on an HTML form that fills in automatically?如何在自动填写的 HTML 表单上创建下载 pdf 按钮？
【发布时间】：2020-08-24 03:20:11
【问题描述】：

我想在我的摘要表单底部创建一个按钮，用于下载包含所有输入和输出的 pdf。

最大的问题是，我在 webStorm（它不支持 php）中工作，而且我在 web 开发方面有点菜鸟。我应该下载 phpStorm 并在那里做（如果是，请给我一些关于如何做的建议），或者有人对使用 HTML 和 JS 有任何建议吗？

这是我目前的代码：

<html>
<head>
    <title>Calculator</title>
    <link rel="stylesheet" href="styler.css">
</head>
<body>
    <h1>Calculator</h1>

    <div class="logoPicture-img">
        <img src="images/Logo.png">
    </div>

    <select id="form-selector">
        <option value="_" selected disabled>Pick One</option>
        <option value="Input">Input</option>
        <option value="Output">Output</option>
        <option value="Summary">Summary</option>
    </select>

    <div id="my-forms">
    <form name = "Input">
        <h2>Input</h2>

    <div>
    Cost of Candy ($):
            <br>
            <input type="number" name="costOfCandy" placeholder="5.00" min="0.01" max="20.00">
        </div>
<!-- A bunch more inputs like this follow, but are unshown -->

        <div>
        <input type="button" value="Calculate" onclick="performCalculations()">
        </div>
    </form>

    <form name = "Output">
        <h2>Output</h2>
        
        <div>
        Baseline Annual Cost of Candy ($):
            <br>
            <input type="text" name="BCostCandy">
        </div>
<!-- A bunch more outputs like this follow, but are unshown -->
    </form>

    <form name = "Summary">
        <h2>Summary</h2>
        <div>
        Impact on Annual Candy Cost ($):
            <br>
            <input type="text" name="NCandyCost">
        </div>
    </form>
    </div>

    <script type = text/javascript>
        const formSelect = document.getElementById('form-selector'),
            myForms = document.getElementById('my-forms');
        formSelect.oninput=()=>{ myForms.className = `f-${formSelect.value}` }
    </script>

    <script type = "text/javascript">
        function performCalculations()
    <!-- Performs all of the calculations and returns them to the appropriate boxes -->

提前感谢任何可以提供帮助的人！

【问题讨论】：

标签： javascript html forms pdf pdf-generation

【解决方案1】：

在文件末尾添加以下 2 行：

<!-- jQuery library -->
<script src="js/jquery.min.js"></script>

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

这将确保您有一些实用程序来完成您的工作，下一步是使用 jsPDF 库写出一些行。例如，在您的情况下，如果您希望整个身体成为 pdf，那么，

<script>
    var doc = new jsPDF({
    orientation: 'landscape'
    });
    var elementHTML = $('body').html();
    doc.save('document.pdf');
</script>

在上述两行之后添加的这段代码应该可以发挥作用。

更多信息请咨询article：

【讨论】：

【解决方案2】：

您可以简单地使用 print.js 库。您可以提供网页的任何区域。如果您不想使用当前模板导出 pdf，您可以创建适当的文档模板并将其对用户隐藏并打印该模板。您可以从here 或他们的site 获取此库。

通过他们的解释，你可以很容易地理解它。

【讨论】：