I have taken a look at other related questions but unable to understand or change this to get it working. Basically i am trying to save a pdf of presented flot data contained in tab0 . for some reason the pdf output cuts half the page off, even though I am using the largest size a0 and it is also missing the legend of charts, here is the code.
(function ($) {
$(function() {
// $.plot($("#placeholder0"), [ { label: 'Test', data: [[0, 0], [1, 1]] } ], { yaxis: { max: 1 } });
$("#generate0").on("click", function(e) {
var pdf = new jsPDF('p', 'pt', 'a0');
// var pdf = new jsPDF();
var canvas = pdf.canvas;
canvas.height = 6000;
html2canvas($('#content').get(0), {
canvas:canvas,
allowTaint: true,
onrendered: function(canvas) {
// document.body.appendChild(canvas);
console.log("rendered");
/* var iframe = document.createElement('iframe');
iframe.setAttribute('style','position:absolute;right:0; top:0; bottom:0; height:10000px; width:500px');
document.body.appendChild(iframe);
iframe.src = pdf.output('datauristring'); */
pdf.save("Current Data2.pdf")
//var div = document.createElement('pre');
//div.innerText=pdf.output();
//document.body.appendChild(div);
}
});
});
});
}(jQuery))
all i want to do is allow the saved pdf to capture all of the data even if it means spanning over 3 or 10 pdf pages. Any help greatly recieved... oh here is the html/php ...
<!DOCTYPE html>
<html lang="en">
<head>
<!-- start: Meta -->
<meta charset="utf-8">
<title>Vibe Music Therapy Dashboard</title>
<meta name="description" content="Vibe Music Therapy Daashboard - OpenFace Service user 1 Data">
<meta name="author" content="Greg Hanford">
<meta name="keyword" content="Vibe, MusicTherapy, Dashboard, Metrics, disability, support, research, kpi">
<!-- end: Meta -->
<!-- start: Mobile Specific -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- end: Mobile Specific -->
<!-- start: CSS -->
<!-- <link id="bootstrap-style" href="css/bootstrap.min.css" rel="stylesheet"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link id="base-style" href="css/style.css" rel="stylesheet">
<link id="base-style-responsive" href="css/style-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="css/graphing.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,latin-ext' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/91366f1215.js"></script>
<!-- end: CSS -->
<!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link id="ie-style" href="css/ie.css" rel="stylesheet">
<![endif]-->
<!--[if IE 9]>
<link id="ie9style" href="css/ie9.css" rel="stylesheet">
<![endif]-->
<!-- start: Favicon -->
<link rel="shortcut icon" href="img/favicon.ico">
<!-- end: Favicon -->
<!-- Piwik -->
<script type="text/javascript">
var pkBaseURL = (("https:" == document.location.protocol) ?
"https://sweb5.secure-secure.co.uk/musictherapy.co.uk/piwik/" :
"http://musictherapy.co.uk/piwik/");
document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 1);
piwikTracker.trackPageView();
piwikTracker.enableLinkTracking();
} catch (err) {}
</script><noscript><p><img src="http://musictherapy.co.uk/piwik/piwik.php?idsite=1" style="border:0" alt="" /></p></noscript>
<!-- End Piwik Tracking Code -->
</head>
<body>
<!-- start: Header -->
<div class="navbar">
<div class="navbar-inner"><img class="main-logo" style="width: 150px; height: 74px;" alt="vibe dashboard logo" src="img/Vibe-dashboard-logo.png">
<a class="brand" href="index.html"><span>Music Therapy Dashboard</span></a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".top-nav.nav-collapse,.sidebar-nav.nav-collapse">
</a>
</div>
</div>
<!-- start: Header -->
<div class="container-fluid-full">
<div class="row-fluid">
<!-- start: Main Menu -->
<div id="sidebar-left" class="span2">
<div class="nav-collapse sidebar-nav">
<ul class="nav nav-tabs nav-stacked main-menu">
<li>
<a class="dropmenu" href="#"><i class="icon-folder-close-alt"></i><span class="hidden-tablet"> Davenham Metrics</span></a>
<ul>
<li><a class="submenu" href="overview-main1.html"><i class="icon-dashboard"></i><span class="hidden-tablet"> Overview</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser1.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Joyce</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser2.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Margaret</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser3.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Jenny</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser4.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Gillian</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser5.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Alf</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser6.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Jean</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser7.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Maureen</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser8.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Judith</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser9.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Wendy</span></a></li>
</ul>
</li><li>
<a class="dropmenu" href="#"><i class="icon-folder-close-alt"></i><span class="hidden-tablet"> OpenFace Data</span></a>
<ul>
<?php
$data = "./data";
$dir = scandir($data);
$users = [];
// $i starts at 2 to skip the dir entries '.' and '..'
for ($i = 2, $size = count($dir); $i < $size; ++$i) {
$users[] = explode("-", $dir[$i])[0];
}
foreach (array_unique($users) as $user){
echo '<li> <a class="submenu2" href="graph.php?user=' . $user . '">',
'<i class="icon-bar-chart"></i><span class="hidden-tablet">' . $user . '</span></a></li>';
}
?>
</ul>
</li>
</ul>
</div>
</div>
<!-- end: Main Menu -->
<noscript>
<div class="alert alert-block span10">
<h4 class="alert-heading">Warning!</h4>
<p>You need to have <a href="http://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a> enabled to use this site.</p>
</div>
</noscript>
<!-- start: Content -->
<div id="content" class="span10">
<?php
$user = $_GET['user'];
$data_dir = "./data";
$dir_listing = scandir($data_dir);
$users = [];
// $i starts at 2 to skip the dir entries '.' and '..'
for ($i = 2, $size = count($dir_listing); $i < $size; ++$i) {
$split = explode("-", $dir_listing[$i]);
$users[$split[0]][] = $split[1];
}
$dates = array_unique($users[$user]);
$overview = array_search('Overview', $dates);
if($overview) {
unset($dates[$overview]);
array_unshift($dates,'Overview');
}
$dates = array_values($dates);
// print_r("DATES");
// print_r($dates);
?>
<div class="box-content">
<ul class="nav nav-pills" id="myTab">
<?php
echo '<li class="active"><a href="#tab0">' . $dates[0] . '</a></li>';
for($i = 1, $size = count($dates); $i < $size; ++$i) {
echo '<li><a href="#tab' . $i . '">' . $dates[$i] . ' </a></li>';
}
?>
</ul>
</div>
<div id="myTabContent" class="tab-content">
<?php
foreach ($dates as $id => $date) {
if ($id == 0) {
echo '<div class="tab-pane active" id="tab0">';
} else {
echo '<div class="tab-pane" id="tab' . $id . '">';
}
echo <<<END
<div class="row-fluid">
<button type="button" disabled class="select-chart btn btn-primary btn-lg" data-toggle="modal" data-target="#main-variable$id">
Loading chart data</button>
<button type="button" disabled class="select-features btn btn-primary btn-lg">
Loading features data</button>
<button type="button" id="generate$id">Generate pdf</button>
<div id="triple-chart-holder$id" class="container charts"></div>
<div id="single-chart-holder$id" class="container charts"></div>
<div id="features-chart-holder$id" class="container charts"></div>
<div id="features$id" class="f-chart", style="height:382px"></div>
<div id="features-translation$id" class="f-chart", style="height:282px"></div>
<div id="features-rotation$id" class="f-chart", style="height:282px"></div>
<div class="container charts">
<div id="radar$id" style="width:1000px; height:1000px"></div>
</div>
<div id="dial-chart-holder$id" class="container charts"></div>
<div id="placeholder$id" style="width:600px;height:300px"></div>
</div>
<!-- Modal -->
<div class="modal fade" id="comparison$id" tabindex="-1" role="dialog" aria-labelledby="choose comparisions modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Select datasets for comparison</h4>
</div>
<div class="modal-body">
<div class="row">
<div id="IMT$id" class="col-md-6 col-sm-6 col-xs-12">
IMT
</div>
<div id="OOT$id" class="col-md-6 col-sm-6 col-xs-12">
OOT
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="plot-chart btn btn-primary">Plot</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="main-variable$id" tabindex="-1" role="dialog" aria-labelledby="main variable modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Select independent dataset</h4>
</div>
<div class="modal-body">
<div class="row">
<div id="IMT-main$id" class="col-md-6 col-sm-6 col-xs-12">
IMT
</div>
<div id="OOT-main$id" class="col-md-6 col-sm-6 col-xs-12">
OOT
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="select-all-imt btn btn-secondary">Select all, IMT</button>
<button type="button" class="select-all-oot btn btn-secondary">Select all, OOT</button>
<button type="button" class="main-variable btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
</div>
END;
}
?>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>
<span style="text-align:left;float:left">© 2016 <a href="http://www.musictherapy.co.uk" alt="Vibe Music Therapy Dashboard">Vibe Music Therapy Dashboard</a></span>
</p>
</footer>
<!-- start: JavaScript-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-migrate-1.0.0.min.js"></script>
<script src="js/jquery-ui-1.10.0.custom.min.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
<script src="js/modernizr.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <script src="js/bootstrap.min.js"></script> -->
<script src="js/jquery.cookie.js"></script>
<script src="js/excanvas.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.stack.js"></script>
<script src="js/jquery.flot.resize.min.js"></script>
<script src="js/jquery.cleditor.min.js"></script>
<script src="js/jquery.knob.js"></script>
<script src="js/jquery.sparkline.min.js"></script>
<script src="js/counter.js"></script>
<script src="js/retina.js"></script>
<script src="js/papaparse.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/jquery.viewport.js"></script>
<script src="js/jquery.flot.downsample.js"></script>
<script src="js/jquery.flot.animator.min.js"></script>
<script src="js/jquery.flot.selection.js"></script>
<script src="js/jquery.flot.JUMlib.js"></script>
<script src="js/jquery.flot.spider.js"></script>
<script src="js/jquery.flot.grow.js"></script>
<script type="text/javascript" src="js/async.min.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/prepareplots.js"></script>
<script type="text/javascript" src="js/jspdf.min.js"></script>
<script type="text/javascript" src="js/image.js"></script>
<script type="text/javascript">
(function () {
// defensively json_encode(ing) to make sure nothing odd gets passed to the
// javascript.
var dirRoot = <?php echo json_encode($data_dir . "/" . $user . "-") ?>;
var dates = <?php echo json_encode($dates) ?>;
$(function () {
preparePlots(0, dirRoot + dates[0]);
});
$('.nav-pills a').on('click', function() {
var id = $(this).parent('li').index();
preparePlots(id, dirRoot + dates[id]);
});
})();
</script>
<!-- end: JavaScript-->
</body>
</html>
I'm facing the same issue, I found that it's not the problem of jsPDF page size, but the html2canvas.
If you indicate canvas option to html2canvas, then html2canvas won't probably capture the element $('#content').get(0) by its width, it will capture this element by the width of whole window, if the width of the canvas is less than the window's, the captured picture cutting off.
have a try :
canvas.width = document.body.clientWidth
It's not a final solution, but works for me.