HTML怎么转换成PDF

将HTML转换为PDF是一个常见的需求，尤其是在需要保存网页内容或生成报告时。几种解决方案，并提供详细的代码示例来帮助您实现这一目标。

开头解决方案

将HTML转换为PDF可以通过多种方式实现，包括使用JavaScript库、后端语言（如Python、Node.js）以及在线工具。其中，最常用的方法是使用前端库（如jsPDF和html2canvas）或者后端库（如pdfkit、puppeteer）。这些工具可以捕获HTML页面并将其渲染为PDF文件。

接下来，我们将几种具体实现方法。

方法一：使用jsPDF和html2canvas

这种方法适合在前端实现HTML到PDF的转换。jsPDF 是一个用于生成PDF文档的JavaScript库，而 html2canvas 可以将HTML页面截图并转换为图片，然后嵌入到PDF中。

代码示例

html
</p>



    
    
    <title>HTML to PDF</title>
    
    


    <div id="content" style="width: 300px;height: 200px;background-color: lightblue">
        <h1>Hello, World!</h1>
        <p>This is a test content.</p>
    </div>
    <button>Download PDF</button>

    
        function generatePDF() {
            // Select the element that you want to convert
            const content = document.getElementById('content');

            // Use html2canvas to capture the screenshot of the element
            html2canvas(content).then(canvas => {
                const imgData = canvas.toDataURL('image/png');

                // Initialize jsPDF
                const pdf = new jsPDF();

                // Add image to PDF
                const imgProps = pdf.getImageProperties(imgData);
                const pdfWidth = pdf.internal.pageSize.getWidth();
                const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

                pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);

                // Save the PDF
                pdf.save("output.pdf");
            });
        }
    



<p>

方法二：使用Puppeteer（Node.js）

Puppeteer 是一个 Node.js 库，它提供了一个高级 API 来控制无头 Chrome 或 Chromium 浏览器。它可以轻松地将HTML页面转换为PDF。

安装依赖

确保您已经安装了Node.js。然后运行以下命令安装 Puppeteer：

bash npm install puppeteer

代码示例

javascript
const puppeteer = require('puppeteer');</p>

<p>(async () => {
    // Launch the browser
    const browser = await puppeteer.launch();
    const page = await browser.newPage();</p>

<pre><code>// Set the content of the page
await page.setContent(`
    <html>
        <body>
            <h1>Hello, World!</h1>
            <p>This is a test content.</p>
        </body>
    </html>
`);

// Generate a PDF from the current page
await page.pdf({ path: 'output.pdf', format: 'A4' });

// Close the browser
await browser.close();

})();

方法三：使用Python和WeasyPrint

如果您更喜欢Python，可以使用 WeasyPrint 库将HTML转换为PDF。WeasyPrint 是一个可视化样式表 (CSS) 和布局引擎，能够生成PDF文件。

安装依赖

确保您已经安装了Python。然后运行以下命令安装 WeasyPrint：

bash pip install weasyprint

代码示例

python
from weasyprint import HTML</p>

<h1>Define your HTML content</h1>

<p>html_content = """</p>


    
        <h1>Hello, World!</h1>
        <p>This is a test content.</p>
    


<p>"""</p>

<h1>Convert HTML to PDF</h1>

<p>HTML(string=html<em>content).write</em>pdf('output.pdf')

以上三种将HTML转换为PDF的方法：前端使用 jsPDF 和 html2canvas，后端使用 Puppeteer（Node.js）和 WeasyPrint（Python）。每种方法都有其适用场景，您可以根据自己的技术栈选择最适合的方案。