java脚本下载功能，用于html页面的特定部分

Question

我在我的html页面中使用php mysql。我已经在页面中使用了很多div。我创建了一个打印按钮，它打印我的特定div但现在我想使用下载按钮，它将我的特定div数据下载为PDF。

怎么可能？

Answer 1

 <div id="content">
 <h3>Hello, this is a H3 tag</h3>

 <p>a pararaph</p>
 </div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>
 <script>
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
    return true;
}
 };

  $('#cmd').click(function () {
  doc.fromHTML($('#content').html(), 15, 15, {
    'width': 170,
        'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
 });
</script>

下载.... ^

Answer 2

jsPDF将成为处理此类功能的最佳选择。它使用起来相对简单快捷。这是一个jsfiddle示例：

https://jsfiddle.net/nfnneil/aajsr6vn/2/

用法

我使用了doc.fromHTML($('#saveThis').html(), 10, 10, {})，我觉得值得一些解释。首先，doc是我们正在使用的jsPDF对象。参数如下：HTML content for pdf，padding-x in pdf，padding-y in pdf，然后是设置{}。

代码

<强> HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
<div id="downloadThis">
     Rich html <b>features</b> here.
</div>
<div id="editor"></div>
<button id="download">generate PDF</button>

<强>的JavaScript

$('#download').click(function () {
        var doc = new jsPDF();
    doc.fromHTML($('#downloadThis').html(), 10, 10, {
        'elementHandlers': {}
    });
    doc.save('download.pdf');
});