如何通过 HTML 设计运行时生成的 PDF？

很多时候，我们遇到了保存特定网页或任何在线特定元素的问题，这些元素需要在使用浏览器时以 pdf 文件的形式保存。在这种情况下，我们要么使用了第 3 方扩展，要么使用任何应用程序或工具将其生成为 pdf 文件。在本文中，我们将学习通过 HTML 设计运行时生成的 pdf 文件。此任务可以通过 3 种方式实现：

• 打印特定网页并将其另存为 PDF
• 使用 jsPDF 库
• 使用 html2pdf 库

让我们借助示例一一理解所有 3 个概念。

1.打印特定元素并将其保存为PDF：

我们将生成一个窗口并在运行时将其保存为 pdf。这类似于系统的默认打印功能。下面讨论这些步骤。

• 使用“ window.open ”方法创建一个新窗口。
• 在那个窗口内为我们的
  标签编写 innerHTML。
• 打印窗口
• 关闭窗口

示例：在此示例中，我们将使用有助于生成 pdf 文件的 html2pdf CDN 链接。

HTML

  

  
    
    
    
  
    
        .container {
            position: fixed;
            top: 20%;
            left: 28%;
            margin-top: -65px;
            margin-left: -100px;
            border-radius: 7px;
        }
  
        .card {
            box-sizing: content-box;
            width: 700px;
            height: 150px;
            padding: 30px;
            border: 1px solid black;
            font-style: sans-serif;
            background-color: #f0f0f0;
        }
  
        #button {
            background-color: #4caf50;
            border-radius: 5px;
            margin-left: 650px;
            margin-bottom: 5px;
            color: white;
        }
  
        h2 {
            text-align: center;
            color: #24650b;
        }
    

  

    
        Generate PDF
        
            Welcome to GeeksforGeeks
            
                
                    
                        We are going to generate a pdf 
                        from the area inside the box
                    
                
                
                    
                        This is an example of generating 
                        pdf from HTML during runtime
                    
                
            
        
    

  

    var button = document.getElementById("button");
    var makepdf = document.getElementById("makepdf");
  
    button.addEventListener("click", function () {
        var mywindow = window.open("", "PRINT", 
                "height=400,width=600");
  
        mywindow.document.write(makepdf.innerHTML);
  
        mywindow.document.close();
        mywindow.focus();
  
        mywindow.print();
        mywindow.close();
  
        return true;
    });

  

输出：

2.使用jsPDF库：

为了在运行时生成 pdf，我们可以使用 jsPDF 库。步骤是：

• 在 HTML 文档的 标记中包含 jsPDF CDN。 CDN 在下面给出，在谷歌搜索“JsPDF CDN”以获取最新版本。
• 使用“fromHTML”方法从 HTML div 生成 pdf。
• 使用 javascript 中的save()方法保存文件。

例子：

HTML

  

    jsPDF Library
  
        
        
        
  
    
        .container {
            position: fixed;
            top: 20%;
            left: 28%;
            margin-top: -65px;
            margin-left: -100px;
            border-radius: 7px;
        }
  
        #makepdf {
            box-sizing: content-box;
            width: 700px;
            height: 150px;
            padding: 30px;
            border: 1px solid black;
            font-style: sans-serif;
            background-color: #f0f0f0;
        }
  
        #button {
            background-color: #4caf50;
            border-radius: 5px;
            margin-left: 650px;
            margin-bottom: 5px;
            color: white;
        }
  
        h2 {
            text-align: center;
            color: #24650b;
        }
    

  

    
        Generate PDF
        
            Welcome to GeeksforGeeks
            
                
                    
                        We are going to generate a pdf 
                        from the area inside the box
                    
                
                
                    
                        This is an example of generating 
                        pdf from HTML during runtime
                    
                
            
        
    
  
    
        var button = document.getElementById("button");
        button.addEventListener("click", function () {
            var doc = new jsPDF("p", "mm", [300, 300]);
            var makePDF = document.querySelector("#makepdf");
  
            // fromHTML Method
            doc.fromHTML(makePDF);
            doc.save("output.pdf");
        });
    

  

输出：

3.使用html2pdf库：

使用 html2pdf 库生成 pdf 文件的步骤是：

• 在 HTML 文档的顶部包含 html2pdf CDN。 CDN 如下所示，在谷歌搜索“html2pdf CDN”以获取最新版本。
• 使用 html2pdf() 对象生成 pdf。这是 html2pdf 库的默认对象。
• 保存PDF。

例子：

HTML

  

  
    
    
    
  
    
        .container {
            position: fixed;
            top: 20%;
            left: 28%;
            margin-top: -65px;
            margin-left: -100px;
            border-radius: 7px;
        }
  
        .card {
            box-sizing: content-box;
            width: 700px;
            height: 150px;
            padding: 30px;
            border: 1px solid black;
            font-style: sans-serif;
            background-color: #f0f0f0;
        }
  
        #button {
            background-color: #4caf50;
            border-radius: 5px;
            margin-left: 650px;
            margin-bottom: 5px;
            color: white;
        }
  
        h2 {
            text-align: center;
            color: #24650b;
        }
    

  

    
        Generate PDF
        
            Welcome to GeeksforGeeks
            
                
                    
                        We are going to generate a pdf 
                        from the area inside the box
                    
                
                
                    
                        This is an example of generating 
                        pdf from HTML during runtime
                    
                
            
        
    
  
    
        var button = document.getElementById("button");
        var makepdf = document.getElementById("makepdf");
  
        button.addEventListener("click", function () {
            html2pdf().from(makepdf).save();
        });
    

  

输出：