单击 HTML 按钮将多个 div 的内容保存为 PDF 文件

Question

我有一个“生成 PDF”按钮，我希望它将一些 div 元素保存为 PDF 文件。 根据我的阅读，我最好使用 JavaScript，但我对 JS 的经验为零。 我已经尝试过第三方解决方案，如 html2pdf、pdfmyurl、jsPDF 等，但我没有设法让它像我想要的那样工作。

这是 HTML 文件的结构：

 <!DOCTYPE html> <html> <head> <title>This is my title</title> </head> <body> <!-- HEADER --> <div class="header"> <img src="../logo/logo_17.png" width="320" height="100" /> </div> <!-- MENU --> <div class="topnav" id="myTopnav"> Menu... </div> <!-- KOLOMMEN --> <div class="row"> <!-- LINKSE KOLOM --> <div class="prodtitle" id="htmlContent1">Title</div> <div class="prodbuttons"> <a class="h2button" href="#">BACK TO LIST</a> <button id="generatePDF" class="h2button">generate PDF</button> </div> <div class="prodinfotitle">Info/Description</div> <div class="prodinfo" id="htmlContent2"> ...some text </div> <div class="prodmaterialstitle">Materials/Ingredients</div> <div class="prodmaterials"> ...some text </div> <div class="gallery"> ...image 1 (if available) </div> <div class="gallery"> ...image 2 (if available) </div> <!-- RECHTSE KOLOM --> <div class="side"> ... </div> </div> <!-- FOOTER --> <div class="footer"> ...footer </div> </body> </html>

现在这就是我正在寻找的：
单击“生成 PDF”按钮时，应使用以下 div 创建一个 PDF 文件：“header”，后跟“prodtitle”，然后是“prodinfotitle”、“prodinfo”、“prodmaterialstitle”、“prodmaterials”和图片（如果有的话）。 然后应将 PDF 保存为“[prodtitle].pdf”，以便每个文件都有正确的标题。

有人可以帮我处理这段代码以及如何设置它吗？

非常非常感谢！

更新：我以零经验尝试过的事情是：

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script> <script type="text/javascript"> var doc = new jsPDF(); var specialElementHandlers = { '#editor': function (element, renderer) { return true; } }; $('#generatePDF').click(function () { doc.fromHTML($('#htmlContent1').html(), 15, 15, { 'width': 700, 'elementHandlers': specialElementHandlers }); doc.fromHTML($('#htmlContent2').html(), 15, 15, { 'width': 700, 'elementHandlers': specialElementHandlers }); doc.save('sample_file.pdf'); }); </script>

它没有用，因为我得到了一个空的pdf。 我什至不知道代码是否正确。

Answer 1

剪切和粘贴任何旧代码的危险在于它通常是旧的，请参阅 stackoverflow.com/questions/65177003/... 所以您的脚本可以很好地构建一个新的 pdf，但它不是页面上的内容，只是一些新的覆盖。

使用混合方法之前编写的 HTML 更容易坚持。

因此，您只需排除一些打印到 pdf 的内容，但保留顶部和底部。

您需要调整按钮，所以我建议按照

<div id="NoPrint">
    <!-- MENU -->  
        <div class="topnav" id="myTopnav">
            Menu...
        </div>  

    <!-- KOLOMMEN --> 
    <div class="row">
    
        <!-- LINKSE KOLOM -->        
            <div class="prodtitle" id="htmlContent1">Title</div>
            
            <div class="prodbuttons">
                
                <button class="h2button"><a class="h2button" href="#">BACK TO LIST</a></button>
                <button id="generatePDF" onclick="print()" >generate PDF Print from Download Page</button>
            </div>
    </div>
 </div NoPrint>

并在 <head> 中添加

<style id="compiled-css" type="text/css">

@media only print {

    #NoPrint {
        display: none;
    }

</style>

页面 TITLE 驱动提供的 pdf 文件名，因此更难以调整<title>[prodtitle].pdf</title>尽管您可以通过脚本来做到这一点，但这本身就是一大堆蠕虫，因为用户决定要保存到的名称。

单击 HTML 按钮将多个 div 的内容保存为 PDF 文件

问题描述

1 个解决方案

解决方案1
0 2022-06-25 12:51:44

单击 HTML 按钮将多个 div 的内容保存为 PDF 文件

问题描述

1 个解决方案

解决方案1 0 2022-06-25 12:51:44

解决方案1
0 2022-06-25 12:51:44