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

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

我想在摘要表单的底部创建一个按钮，以下载包含所有输入和输出的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 -->

在此先感谢您提供的帮助！

解决方法

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

<!-- 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以获取更多信息：

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

通过他们的解释，您可以非常容易地理解它。

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

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

解决方法

相关推荐