Parece que ya estás cerca de solución. Este código se encuentra en varias preguntas en StackOverflow en inglés. Te refiero con una pregunta de allí y sua respuesta y ademas un cierto comentario.
[1] tiene una comentario, que si no se encuentra el contexto window.onePageCanvas
puedes alterar el código así:
var onePageCanvas = document.createElement("canvas");
Así no importa si existe un contexto o no, tu solo creas un var
nuevo.
Encuentro:
[1] https://stackoverflow.com/questions/24069124/how-to-save-a-image-in-multiple-pages-of-pdf-using-jspdf
Editando:
Yo hice un ejemplo que funciona live, cuando lo copias:
<!DOCTYPE html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script type="text/javascript">
function test() {
html2canvas($('.foo')[0],{allowTaint:true}).then(function(canvas) {
var imgData = canvas.toDataURL('image/png');
var imgWidth = 210;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
var doc = new jsPDF('p', 'mm', "a4");
var position = 0;
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight+10);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight+10);
heightLeft -= pageHeight;
}
doc.save("Dashboard.pdf");
});
}
</script>
<style>
table {
border: 1px solid black;
font: 64px "Open Sans", Helvetica, Arial, sans-serif;
}
</style>
</head>
<body>
<div id="container-fluid" class="foo">
<table id="tab_customers" class="table table-striped">
<colgroup>
<col width="20%">
<col width="20%">
<col width="20%">
<col width="20%">
</colgroup>
<thead>
<tr class='warning'>
<th>Country</th>
<th>Population</th>
<th>Date</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chinna</td>
<td>1,363,480,000</td>
<td>March 24, 2014</td>
<td>19.1</td>
</tr>
<tr>
<td>India</td>
<td>1,241,900,000</td>
<td>March 24, 2014</td>
<td>17.4</td>
</tr>
<tr>
<td>United States</td>
<td>317,746,000</td>
<td>March 24, 2014</td>
<td>4.44</td>
</tr>
<tr>
<td>Indonesia</td>
<td>249,866,000</td>
<td>July 1, 2013</td>
<td>3.49</td>
</tr>
<tr>
<td>Brazil</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano0</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano1</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano2</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
<tr>
<td>País lejano</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
</tbody>
</table>
</div>
<button onclick="javascript:test()">ping</button>
</body>
Con cierto nivel de zoom (90% en mi pantalla) lo gambia pagina casi suavemente:

Encontre el ejemplo de aqui. Lo que me gusta en este enquentro es, que esto es ejemplo que funciona, y por lo menos en mi caso, el gambio de pagina no toma parte fuera del texto(, aunque no esta perfecto tampoco, lo siento.)
Intente unos cinco soluciones, esto fue lo unico que me daba resultados buenas. La base de solucion que embezamos utilizar, no esta bien, o algo en versiones ha cambiado y ya no sirve por nada. Yo tenia en mi pantalla lo mismo error que tu.
html2canvas((reporte)[0],{allowTaint:true}).then((canvas) => {
y ya, estas mas cerquita!