[英]Create a pdf from div using jsPdf
I am using jsPDF to create a div as PDF. 我正在使用jsPDF创建一个div作为PDF。 I have downloaded the jsPdf library and wrote the following code in index.php
. 我已经下载了jsPdf库并在index.php
编写了以下代码。
Unfortunately, clicking on the button cmd
doesn't create the PDF. 不幸的是,单击按钮cmd
不会创建PDF。 Is there anything wrong with my JS? 我的JS有什么问题吗?
Thank you very much. 非常感谢你。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<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>
<body>
<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>
</body>
</html>
I have imported jsPdf.debug.js
this is the file and then used the following code.That works fine. 我已导入jsPdf.debug.js
这是该文件 ,然后使用以下代码。这工作正常。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Save the particular div as pdf format</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div id="content" align="center">
<h3>div</h3>
<p>paragraph</p>
</div>
<div id="posts-landing" align="center">
------------------------------------------------------------------------------------------
<h3> download 2</h3>
<p> download 2 paragraph</p>
------------------------------------------------------------------------------------------
</div>
<br>
<div align="center">
<button id="download">Download</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript' src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
<script>
$(document).ready(function() {
$('#download').click(function () {
var pdf = new jsPDF('p', 'pt', 'letter')
, source = $('#posts-landing')[0]
, specialElementHandlers = {
'#bypassme': function(element, renderer){
return true
}
}
margins = {
top: 60,
bottom: 60,
left: 40,
width: 522
};
pdf.fromHTML(
source
, margins.left
, margins.top
, {
'width': margins.width
, 'elementHandlers': specialElementHandlers
},
function (dispose) {
pdf.save('Downloaded.pdf');
},
margins
)
});
});
</script>
</body>
</html>
I tried to import below files for jspdf functionality. 我尝试导入以下文件以获取jspdf功能。
jquery.min.js (try use latest version if you have)
jspdf/jspdf.js
jspdf/jspdf.plugin.standard_fonts_metrics.js
jspdf/jspdf.plugin.split_text_to_size.js
jspdf/jspdf.plugin.from_html.js
jsPDF/dist/jspdf.debug.js
Code, 码,
var doc = new jsPDF('p', 'pt');
//OR
//var doc = new jsPDF();
// We'll make our own renderer to skip this editor
var specialElementHandlers = {
'#editor': function(element, renderer){
return true;
}
};
doc.fromHTML($('#render_me').get(0), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
//doc.save('Test.pdf');
below is html code
<div id="render_me">
<div id="table">
<table id="StudentInfoListTable">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dani</td>
</tr>
</tbody>
</table>
</div>
<a href="#">Download Test PDF</a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.