jsPDF fromHTML() does not show HTML - javascript

Im working at a simple javascript.
im using the jsPDF lib but the script load a blank pdf.
this is the code :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>fromHTML EX</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.22" />
<script type="text/javascript" src="/root/utils/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/root/utils/jsPDF-master1/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="/root/utils/jsPDF-master1/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="/root/utils/jsPDF-master1/js/basic.js"></script>
<script type="text/javascript" src="/root/utils/jsPDF-master1/jspdf.js"></script>
<script type="text/javascript" src="/root/utils/jsPDF-master1/jspdf.plugin.from_html.js"></script>
<script type="text/javascript">
function PDF1(){
var doc = new jsPDF();
var elementHandler = {
'#ignorePDF': function (element, renderer) {
return true;
}
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
source,
15,
15,
{
'width': 180,'elementHandlers': elementHandler
});
doc.output("datauri");
}
PDF1()
</script>
</head>
<body>
ASDSADASDASDSA
<div>
<p id="ignorePDF">don't print this to pdf</p>
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
i have tryied to put the calling function at the bottom of the page but it still don't work.
Can someone help me?

Since you are using jQuery try:
$( document ).ready(function() {
//console.log( "ready!" );
PDF1();
});
Also Note: You could use (not required):
var source = $("body")[0];
Code page used to test
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>fromHTML EX</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.22" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://parall.ax/parallax/js/jspdf.js"></script>
<script type="text/javascript">
function PDF1(){
var doc = new jsPDF();
var elementHandler = {
'#ignorePDF': function (element, renderer) {
return true;
}
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
source,
15,
15,
{
'width': 180,'elementHandlers': elementHandler
});
doc.output("datauri");
}
$( document ).ready(function() {
//console.log( "ready!" );
PDF1();
});
</script>
</head>
<body>
ASDSADASDASDSA
<div>
<p id="ignorePDF">don't print this to pdf</p>
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>

This code can also be used for exporting to pdf using jsPDF.
var pdf = new jsPDF('p','pt','a4');
let pdfConf = {
pagesplit: true, //Adding page breaks manually using pdf.addPage();
background: '#fff' //White Background.
};
pdf.fromHTML($('#capture').get(0),20,20,{
width:500
})
pdf.save("download.pdf");

Related

How can I pass parameter from scala.html to javascript in play framework?

#(message: String)(exchangelist: java.util.ArrayList[String])(implicit session: play.mvc.Http.Session)
#main(title = message)(session) {
<head>
...
</head>
<body>
<script>
startup(exchangelist);
<script>
</body>
Code like this, how can I pass parameter "exchangelist" to Js function "startup()"? This method don't work.
I suggest trying the meta tag:
<html>
<head>
<!-- <meta name="exchangelist" content='#{exchangelist.mkstring(",")}'> -->
<meta name="exchangelist" content='yellow,black,green'>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<script>
function startup(list) {
alert("startup called with " + list);
}
var el = $('meta[name=exchangelist]').attr("content").split(",");
startup(el);
</script>
</html>

Exporting the webpage into pdf file

I am trying to export the webpage(not whole page, but some part of page) into pdf file when user click the button.
But the below code is not working for me. Can any one please help me where I went wrong. I am using jsPDF to export the web page into pdf.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jspdf.js"></script>
<script type="text/javascript" src="libs/Deflate/adler32cs.js"></script>
<script type="text/javascript" src="libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="libs/Blob.js/BlobBuilder.js"></script>
<script type="text/javascript" src="jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf.plugin.from_html.js"></script>
<script>
$(function() {
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>
</head>
<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>
Check the fiddle here :
Fiddle
Is this code of yours from some tutorial.
$(function () {
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');
});
});
I tried it on Mozilla firefox and your code is working fine. On which browser you are checking cause on my side it is not working on Google chrome.

pure.js must work with the existing page nodes?

<html lang="en">
<head>
<meta charset="utf-8">
<script type='text/javascript' src="js/jquery/jquery-min.js"></script>
<script type='text/javascript' src="js/pure/pure.js"></script>
</head>
<body>
<div class='result'>Test Page</div>
<script type='text/javascript'>
$(document).ready(function(){
var p;
p = $("<div><ul><li></li></ul></div>");
directives = {"li": "error"};
data = {"error": "name must be between 3 and 250 characters long"};
p.render(data, directives);
$(".result").after(p);
});
</script>
</body>
</html>
The above codes don't insert data into p object.But the following works,
<html lang="en">
<head>
<meta charset="utf-8">
<script type='text/javascript' src="js/jquery/jquery-min.js"></script>
<script type='text/javascript' src="js/pure/pure.js"></script>
</head>
<body>
<div class='result'>Test Page</div>
<script type='text/javascript'>
$(document).ready(function(){
var p;
p = $("<div><ul><li></li></ul></div>");
$(".result").after(p);
directives = {"li": "error"};
data = {"error": "name must be between 3 and 250 characters long"};
p.render(data, directives);
});
</script>
</body>
</html>
It seems to insert data, the jquery object(here,it is p)must manipulate the existing html tags? It is not reasonable like the latter,i want the first codes to insert data,but how?
Thanks, :)
render returns always a node. And if the template is in the DOM, it is replaced with the rendered node.
You can do this:
p = p.render(data, directives);
$(".result").after(p);
or
$(".result").after( p.render(data, directives) );

Code inside Event.observe executed continously

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="finance.css"/>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript" src="base64.js"></script>
<script type="text/javascript" src="canvas2image.js"></script>
<script type="text/javascript" src="canvastext.js"></script>
<script type="text/javascript" src="excanvas.js"></script>
<script type="text/javascript" src="flotr.js"></script>
<script type="text/javascript" src="HumbleFinance.js"></script>
<script type="text/javascript" src="prettify.js"></script>
<script type="text/javascript">
var priceData=[];
var dateData=[];
var NewdateData = [];
var NewData=[];
var date1 ;
var date2;
function callMe()
{
alert('dddw');
}
function drawChart(data)
{
for (var i = 0; i < data.jobs.length; i++) {
priceData.push([i, data.jobs[i].INCPU]);
dateData.push(data.jobs[i].Dater);
}
HumbleFinance.init('finance', priceData , dateData);
Event.observe(HumbleFinance.containers.summary, 'flotr:select', function (e) {
var area = e.memo[0];
xmin = Math.floor(area.x1);
xmax = Math.ceil(area.x2);
date1 = dateData[xmin];
date2 = dateData[xmax];
$('dateRange').update(dateData[xmin] + ' - ' + dateData[xmax]);
alert(date1);
alert(date2);
This two alerts are being called continously .
}
);
}
Event.observe(document, 'dom:loaded', function() {
new Ajax.Request('/HumblFin/Serv',
{
method:'get',
onSuccess: function(transport){
var data = transport.responseText.evalJSON();
drawChart(data);
},
onFailure: function(){ alert('Something went wrong...') }
});
});
</script>
</head>
<body>
<form id="sample">
<div id="finance">
<div id="dateRange">
</div>
</div>
</form>
</body>
</html>
The div dateRange is being updated only once , but the two alerts are being executed continuously
Please help ( Like the div tag , i want my alerts also want once )
It sounds like the custom event 'flotr:select' is being fired continuously.
Looking at the limited code provided i suspect that updating the 'dateRange' element is firing the 'flotr:select' event.
if you have firebug or google chrome, put a break point into the code and examine the call stack.

Body onload function in JavaScript

I have the code that I have posted below in my webpage. As you can see it uses the body onload function to launch the script. Is there any way of making this script work without this and in JavaScript instead?
<!doctype html>
<html>
<head>
<script type="text/javascript">
function box(query){
return document.getElementById(query)
}
</script>
</head>
<body onload="box('query').focus();">
<input id="query" type="text">
</body>
</html>
Thanks in advance,
Callum
This might what you're looking for: Attach a body onload event with JS
I'd suggest using jQuery or some other JavaScript framework unless you're exploring JS or have some stringent restrictions on using libraries and frameworks.
the following code helpful for you
this is jquery:
$(document).ready(function(){
function name();
});
or
$(window).load(function(){
function name();
});
the following answers using javascript:
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function load() {
alert('function loaded');
}
window.onload = load;
</script>
</head>
<body>
</body>
</html
----------
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function load() {
alert('function loaded');
}
</script>
</head>
<body onload="load();">
</body>
</html
if you are talking about catching the onload event with writting any javascript in your html you can use this function:
// Add event
var addEvent = function (obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, false);
return true;
}else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
};
Now you can run all the functions you need in your onload event.
addEvent(window,'load',function () {
box('query').focus();
// or
document.getElementById('query').focus();
});

Categories