JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】

将HTML转换为PDF可以通过在浏览器端使用插件jsPDF来实现。以下是使用jsPDF实现将HTML转换为PDF的步骤：

1. 引入jsPDF插件

在HTML文件或者Javascript文件中引入jsPDF插件。可以使用CDN或者下载jsPDF的源码本地引入。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>

2. 将HTML内容转换为canvas

为了将HTML转换为PDF，我们需要先将其转换为canvas形式。可以使用html2canvas插件来实现。html2canvas可以将制定的DOM元素渲染成一个canvas元素。

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/html2canvas@0.5.0-beta4/dist/html2canvas.min.js"></script>

var element = document.getElementById('content');
html2canvas(element, {
    onrendered: function(canvas) {
        document.body.appendChild(canvas);
    }
});

3. 使用jsPDF将canvas转换为PDF

使用jsPDF可以将canvas转换为PDF形式。首先需要创建一个jsPDF实例，然后使用addImage方法将canvas中的图像添加到PDF文件中。

var canvas = document.getElementsByTagName('canvas')[0];
var imgData = canvas.toDataURL('image/png');
var doc = new jsPDF();
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('filename.pdf');

上面的代码将通过toDataURL方法将canvas的内容转换为PNG格式。然后使用addImage方法将PNG图像添加到PDF文件中。最后使用save方法可以将PDF文件保存到本地。

示例1

将页面中特定节点的内容转换为PDF。

假设页面中有一个id为content的div节点：

<div id="content">
    <h1>这是标题</h1>
    <p>这是一段文字</p>
</div>

我们可以使用html2canvas将其转换为canvas，然后再使用jsPDF将canvas转换为PDF文件。

var element = document.getElementById('content');
html2canvas(element, {
    onrendered: function(canvas) {
        var imgData = canvas.toDataURL('image/png');
        var doc = new jsPDF();
        doc.addImage(imgData, 'PNG', 10, 10);
        doc.save('filename.pdf');
    }
});

示例2

将整个页面内容转换为PDF。

html2canvas(document.body, {
    onrendered: function(canvas) {
        var imgData = canvas.toDataURL('image/png');
        var doc = new jsPDF();
        doc.addImage(imgData, 'PNG', 10, 10);
        doc.save('filename.pdf');
    }
});

以上代码将整个页面内容转换为canvas，然后再将其转换为PDF文件并保存到本地。