How to generate pdf from HTML in div using Javascript

在Web开发中，将HTML元素（如div）转换成PDF是一个常见的需求，可以通过多种JavaScript库来实现。下面我将介绍一个常用的库——jspdf，并结合html2canvas来演示如何实现这一功能。

使用jspdf和html2canvas

步骤1: 引入库

首先，你需要在你的HTML文件中引入jspdf和html2canvas。你可以通过CDN来快速引入这两个库：

html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>

步骤2: 创建按钮触发PDF生成

在你的HTML中，你可以添加一个按钮，当用户点击这个按钮时触发PDF生成的功能：

html
<button onclick="generatePDF()">生成PDF</button>
<div id="content">
    <h1>Hello, this is a test div</h1>
    <p>This is an example paragraph for the PDF.</p>
</div>

步骤3: 编写JavaScript函数

在你的JavaScript文件或者<script>标签中，添加以下代码：

javascript
function generatePDF() {
    const element = document.getElementById('content');

    html2canvas(element).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jspdf.jsPDF();

        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);
        pdf.save("download.pdf");
    });
}

解释

1. 获取元素: 我们首先获取需要转换成PDF的HTML元素。
2. 生成Canvas: 使用html2canvas将DOM元素渲染成Canvas。这个库能够处理CSS样式并正确渲染出视觉效果。
3. 转换图片: 将Canvas转换成图片数据（data URL）。
4. 创建PDF: 使用jspdf库创建PDF文件，并计算图片应该在PDF中的尺寸，保持原有的比例。
5. 添加图片到PDF: 将图片添加到PDF文件中。
6. 保存PDF: 最后，我们通过save方法保存生成的PDF文件，用户可以下载该文件。

这个方法可以非常灵活地应对各种HTML内容的PDF生成，同时保留了样式和布局。这只是一个基础的例子，jspdf和html2canvas还支持更多高级功能，可以根据需要进行探索和使用。