Alaniah N
Reputation: 1
Is it possible to generate html2canvas image with the same sizes for every browser?
I'm currently struggling with using html2canvas with jspdf. I wanted to capture my html table and paste it to a pdf as an image. Here is what I have right now:
HTML side:
<body>
<!--Header.-->
<div id="title_top">
<h1>Assesment Generator</h1>
</div>
<div id="student_details">
<h2>Participant Details</h2>
<ul>
<li><label>Name:</label>
<input type="text" id="txtParName" placeholder="enter participant's name" />
</li>
<li><label>Age:</label>
<input type="text" id="txtAge" placeholder="enter participant's age" />
</li>
<li><label>Education:</label>
<input type="text" id="txtEd" placeholder="enter participant's education" />
</li>
<li><label>Date:</label> <!--ganti jadi date/time format-->
<input type="text" id="txtTestDate" placeholder="enter participant's test date" />
</li>
</ul>
</div>
<table id="cat_sect">
<tr>
<td>
<h2>Option 1</h2>
<p id="p_1">Details 1</p>
<div id="op_1_drop" name="tk">
<select id="op_1_d1">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F"></option>
</select>
</div>
<p id="p_2">Details 2</p>
<div id="op_2_drop" name="kmm">
<select id="op_1_d2">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</select>
</div>
<p id="p_3">Details 3</p>
<div id="op_3_drop" name="pb">
<select id="op_1_d3">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</select>
</div>
</td>
<td>
<h2>Option 2</h2>
<p id="p_10">Details 1</p>
<div id="op_4_drop" name="sd">
<select id="op_2_d1">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</select>
</div>
<p id="p_11">Details 2</p>
<div id="op_5_drop" name="kc">
<select id="op_2_d2">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</select>
</div>
<p id="p_12">Details 3</p>
<div id="op_6_drop" name="pd">
<select id="op_2_d3">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</select>
</div>
<h2>Option 3</h2>
<p id="p_16">Details 1</p>
<div id="op_7_drop" name="se">
<select id="op_3_d1">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</select>
</div>
<p id="p_17">Details 2</p>
<div id="op_8_drop" name="pp">
<select id="op_3_d2">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</select>
</div>
<p id="p_18">Details 3</p>
<div id="op_9_drop" name="kmdr">
<select id="op_3_d3">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</select>
</div>
</td>
</tr>
</table>
<div id="submit_button">
<button id="submit" onclick="submitOption()">Submit</button>
</div>
<div id="tablecontent">
<table id="myTable" border="1" cellspacing="1" cellpadding="1" style= "display: none;">
<tr>
<th>Options</th>
<th>Details</th>
<th id="k_head">A</th>
<th id="s_head">B</th>
<th id="c_head">C</th>
<th id="cb_head">D</th>
<th id="b_head">E</th>
<th id="bs_head">F</th>
</tr>
<tr>
<th rowspan="3">Option 1</th>
</tr>
<tr>
<td>Details 1</td>
<td id="a_1"></td>
<td id="b_1"></td>
<td id="c_1"></td>
<td id="d_1"></td>
<td id="e_1"></td>
<td id="f_1"></td>
</tr>
<tr>
<td>Details 2</td>
<td id="a_2"></td>
<td id="b_2"></td>
<td id="c"></td>
<td id="d_5"></td>
<td id="e_6"></td>
<td id="f_7"></td>
</tr>
<tr>
<td>Details 3</td>
<td id="a_3"></td>
<td id="b_3"></td>
<td id="c_3"></td>
<td id="d_3"></td>
<td id="e_3"></td>
<td id="f_3"></td>
</tr>
<tr>
<th rowspan="3">Option 2</td>
</tr>
<tr>
<td>Details 1</td>
<td id="a_4"></td>
<td id="b_4"></td>
<td id="c_4"></td>
<td id="d_4"></td>
<td id="e_4"></td>
<td id="f_4"></td>
</tr>
<tr>
<td>Details 2</td>
<td id="a_5"></td>
<td id="b_5"></td>
<td id="c_5"></td>
<td id="d_5"></td>
<td id="e_5"></td>
<td id="f_5"></td>
</tr>
<tr>
<td>Details 3</td>
<td id="a_6"></td>
<td id="b_6"></td>
<td id="c_6"></td>
<td id="d_6"></td>
<td id="e_6"></td>
<td id="f_6"></td>
</tr>
<tr>
<th rowspan="3">Option 3</td>
</tr>
<tr>
<td>Details 1</td>
<td id="a_7"></td>
<td id="b_7"></td>
<td id="c_7"></td>
<td id="d_7"></td>
<td id="e_7"></td>
<td id="f_7"></td>
</tr>
<tr>
<td>Details 2</td>
<td id="a_8"></td>
<td id="b_8"></td>
<td id="c_8"></td>
<td id="d_8"></td>
<td id="e_8"></td>
<td id="f_8"></td>
</tr>
<tr>
<td>Details 3</td>
<td id="a_9"></td>
<td id="b_9"></td>
<td id="c_9"></td>
<td id="d_9"></td>
<td id="e_9"></td>
<td id="f_9"></td>
</tr>
<tbody>
</tbody>
</table>
</div>
<div id="gen_button">
<button id="generate" onclick="generatePDF()">Generate PDF</button>
</div>
</body>
<script type="text/javascript" src="bu_script_1.js"></script>
</html>
JS side:
function submitOption(){
var table = document.getElementById("myTable");
//Option 1
var op1d1_res = document.getElementById("op_1_d1").value;
var op1d2_res = document.getElementById("op_1_d2").value;
var op1d3_res = document.getElementById("op_1_d3").value;
//Option 2
var op2d1_res = document.getElementById("op_2_d1").value;
var op2d2_res = document.getElementById("op_2_d2").value;
var op2d3_res = document.getElementById("op_2_d3").value;
//Option 3
var op3d1_res = document.getElementById("op_3_d1").value;
var op3d2_res = document.getElementById("op_3_d2").value;
var op3d3_res = document.getElementById("op_3_d3").value;
table.style.display = "inline-block";
switch (op1d1_res){
case 'A':
document.getElementById("a_1").innerHTML = "X";
document.getElementById("a_1").style.backgroundColor = "#e13e52ff";
break;
case 'B':
document.getElementById("b_1").innerHTML = "X";
document.getElementById("b_1").style.backgroundColor = "#ea818fff";
break;
case 'C':
document.getElementById("c_1").innerHTML = "X";
document.getElementById("c_1").style.backgroundColor = "#f4c3ccff";
break;
case 'D':
document.getElementById("d_1").innerHTML = "X";
document.getElementById("d_1").style.backgroundColor = "#d7c6e6ff";
break;
case 'E':
document.getElementById("d_1").innerHTML = "X";
document.getElementById("e_1").style.backgroundColor = "#9e7cb0ff";
break;
case 'F':
document.getElementById("f_1").innerHTML = "X";
document.getElementById("f_1").style.backgroundColor = "#8746a5ff";
break;
}
switch (op1d2_res){
case 'A':
document.getElementById("a_2").innerHTML = "X";
document.getElementById("a_2").style.backgroundColor = "#e13e52ff";
break;
case 'B':
document.getElementById("b_2").innerHTML = "X";
document.getElementById("b_2").style.backgroundColor = "#ea818fff";
break;
case 'C':
document.getElementById("c_2").innerHTML = "X";
document.getElementById("c_2").style.backgroundColor = "#f4c3ccff";
break;
case 'D':
document.getElementById("d_2").innerHTML = "X";
document.getElementById("d_2").style.backgroundColor = "#d7c6e6ff";
break;
case 'E':
document.getElementById("e_2").innerHTML = "X";
document.getElementById("e_2").style.backgroundColor = "#9e7cb0ff";
break;
case 'F':
document.getElementById("f_2").innerHTML = "X";
document.getElementById("f_2").style.backgroundColor = "#8746a5ff";
break;
}
switch (op1d3_res){
case 'A':
document.getElementById("a_3").innerHTML = "X";
document.getElementById("a_3").style.backgroundColor = "#e13e52ff";
break;
case 'B':
document.getElementById("b_3").innerHTML = "X";
document.getElementById("b_3").style.backgroundColor = "#ea818fff";
break;
case 'C':
document.getElementById("c_3").innerHTML = "X";
document.getElementById("c_3").style.backgroundColor = "#f4c3ccff";
break;
case 'D':
document.getElementById("d_3").innerHTML = "X";
document.getElementById("d_3").style.backgroundColor = "#d7c6e6ff";
break;
case 'E':
document.getElementById("e_3").innerHTML = "X";
document.getElementById("e_3").style.backgroundColor = "#9e7cb0ff";
break;
case 'F':
document.getElementById("f_3").innerHTML = "X";
document.getElementById("f_3").style.backgroundColor = "#8746a5ff";
break;
}
switch (op2d1_res){
case 'A':
document.getElementById("a_4").innerHTML = "X";
document.getElementById("a_4").style.backgroundColor = "#e13e52ff";
break;
case 'B':
document.getElementById("b_4").innerHTML = "X";
document.getElementById("b_4").style.backgroundColor = "#ea818fff";
break;
case 'C':
document.getElementById("c_4").innerHTML = "X";
document.getElementById("c_4").style.backgroundColor = "#f4c3ccff";
break;
case 'D':
document.getElementById("d_4").innerHTML = "X";
document.getElementById("d_4").style.backgroundColor = "#d7c6e6ff";
break;
case 'E':
document.getElementById("e_4").innerHTML = "X";
document.getElementById("e_4").style.backgroundColor = "#9e7cb0ff";
break;
case 'F':
document.getElementById("f_4").innerHTML = "X";
document.getElementById("f_4").style.backgroundColor = "#8746a5ff";
break;
}
switch (op2d2_res){ //do for all aspects, ganti juga nama id nya
case 'A':
document.getElementById("a_5").innerHTML = "X";
document.getElementById("a_5").style.backgroundColor = "#e13e52ff";
break;
case 'B':
document.getElementById("b_5").innerHTML = "X";
document.getElementById("b_5").style.backgroundColor = "#ea818fff";
break;
case 'C':
document.getElementById("c_5").innerHTML = "X";
document.getElementById("c_5").style.backgroundColor = "#f4c3ccff";
break;
case 'D':
document.getElementById("d_5").innerHTML = "X";
document.getElementById("d_5").style.backgroundColor = "#d7c6e6ff";
break;
case 'E':
document.getElementById("e_5").innerHTML = "X";
document.getElementById("e_5").style.backgroundColor = "#9e7cb0ff";
break;
case 'F':
document.getElementById("f_5").innerHTML = "X";
document.getElementById("f_5").style.backgroundColor = "#8746a5ff";
break;
}
switch (op2d3_res){
case 'A':
document.getElementById("a_6").innerHTML = "X";
document.getElementById("a_6").style.backgroundColor = "#e13e52ff";
break;
case 'B':
document.getElementById("b_6").innerHTML = "X";
document.getElementById("b_6").style.backgroundColor = "#ea818fff";
break;
case 'C':
document.getElementById("c_6").innerHTML = "X";
document.getElementById("c_6").style.backgroundColor = "#f4c3ccff";
break;
case 'D':
document.getElementById("d_6").innerHTML = "X";
document.getElementById("d_6").style.backgroundColor = "#d7c6e6ff";
break;
case 'E':
document.getElementById("e_6").innerHTML = "X";
document.getElementById("e_6").style.backgroundColor = "#9e7cb0ff";
break;
case 'F':
document.getElementById("f_6").innerHTML = "X";
document.getElementById("f_6").style.backgroundColor = "#8746a5ff";
break;
}
switch (op3d1_res){
case 'A':
document.getElementById("a_7").innerHTML = "X";
document.getElementById("a_7").style.backgroundColor = "#e13e52ff";
break;
case 'B':
document.getElementById("b_7").innerHTML = "X";
document.getElementById("b_7").style.backgroundColor = "#ea818fff";
break;
case 'C':
document.getElementById("c_7").innerHTML = "X";
document.getElementById("c_7").style.backgroundColor = "#f4c3ccff";
break;
case 'D':
document.getElementById("d_7").innerHTML = "X";
document.getElementById("d_7").style.backgroundColor = "#d7c6e6ff";
break;
case 'E':
document.getElementById("e_7").innerHTML = "X";
document.getElementById("e_7").style.backgroundColor = "#9e7cb0ff";
break;
case 'F':
document.getElementById("f_7").innerHTML = "X";
document.getElementById("f_7").style.backgroundColor = "#8746a5ff";
break;
}
switch (op3d2_res){ //do for all aspects, ganti juga nama id nya
case 'A':
document.getElementById("a_8").innerHTML = "X";
document.getElementById("a_8").style.backgroundColor = "#e13e52ff";
break;
case 'B':
document.getElementById("b_8").innerHTML = "X";
document.getElementById("b_8").style.backgroundColor = "#ea818fff";
break;
case 'C':
document.getElementById("c_8").innerHTML = "X";
document.getElementById("c_8").style.backgroundColor = "#f4c3ccff";
break;
case 'D':
document.getElementById("d_8").innerHTML = "X";
document.getElementById("d_8").style.backgroundColor = "#d7c6e6ff";
break;
case 'E':
document.getElementById("e_8").innerHTML = "X";
document.getElementById("e_8").style.backgroundColor = "#9e7cb0ff";
break;
case 'F':
document.getElementById("f_8").innerHTML = "X";
document.getElementById("f_8").style.backgroundColor = "#8746a5ff";
break;
}
switch (op3d3_res){ //do for all aspects, ganti juga nama id nya
case 'A':
document.getElementById("a_9").innerHTML = "X";
document.getElementById("a_9").style.backgroundColor = "#e13e52ff";
break;
case 'B':
document.getElementById("b_9").innerHTML = "X";
document.getElementById("b_9").style.backgroundColor = "#ea818fff";
break;
case 'C':
document.getElementById("c_9").innerHTML = "X";
document.getElementById("c_9").style.backgroundColor = "#f4c3ccff";
break;
case 'D':
document.getElementById("d_9").innerHTML = "X";
document.getElementById("d_9").style.backgroundColor = "#d7c6e6ff";
break;
case 'E':
document.getElementById("e_9").innerHTML = "X";
document.getElementById("e_9").style.backgroundColor = "#9e7cb0ff";
break;
case 'F':
document.getElementById("f_9").innerHTML = "X";
document.getElementById("f_9").style.backgroundColor = "#8746a5ff";
break;
}
}
//-----------------------jspdf mulai dari sini-------------------------//
function generatePDF(){
html2canvas(document.getElementById('tablecontent'), {dpi: 300, backgroundColor: null}).then(function(canvas) {
var wid;
var hgt;
var img = canvas.toDataURL("image/png", wid = canvas.width, hgt = canvas.height); //image data of canvas
var hratio = hgt / wid;
var doc = new jspdf.jsPDF("p", "mm", "a4");
var width = doc.internal.pageSize.getWidth();
var height = doc.internal.pageSize.getHeight();
var height = width * hratio;
var pr_name = document.getElementById('txtParName').value
var pr_age = document.getElementById('txtAge').value
var pr_ed = document.getElementById('txtEd').value
var pr_date = document.getElementById('txtTestDate').value
doc.setFontSize(12);
doc.text(20, 30, 'Name:');
doc.text(pr_name, 40, 30);
doc.text(20, 40, 'Age:');
doc.text(pr_age, 40, 40);
doc.text(100, 30, 'Education:');
doc.text(pr_ed, 140, 30);
doc.text(100, 40, 'Test Date:');
doc.text(pr_date, 140, 40);
doc.setFontSize(20)
doc.text('Table', 85, 55)
//table
doc.addImage(img, 'JPEG', 40, 60, width*1.20, height*1.20);
doc.save('testText.pdf')
});
}
It works and it shows up in the pdf, but as the table was in a div tag, the width and height of the section changes depending on the resolution/browser of the machine used to run the program.
Is there any possible way that I can generate the same size of table for every time it is generated? Or does anyone has a suggestion on putting tables on jspdf? (I tried the autotable plugin before, but as I needed a lot of nested tables and columns with individually colored background, it didn't work as how I wanted it to be).
Upvotes: 0
Views: 174
Answers (1)
Veterini
Reputation: 150
If you take a quick peek at the documentation (here), you'll can see that you can force the format (doc.format = "x") where x can be :
a0 - a10
b0 - b10
c0 - c10
dl
letter
government-letter
legal
junior-legal
ledger
tabloid
credit-card
Default is "a4". If you want to use your own format just pass instead of one of the above predefined formats the size as an number-array, e.g. [595.28, 841.89]
You can append the outer html of the DIV containing the table (. This way the table won't be in the div anymore. Also i'd advise you to use innerText for DOM content which is only text. Did you try to generate the table with the jspdf functions?
Upvotes: 0
Related Questions
- Convert SVG to image (JPEG, PNG, etc.) in the browser
- How to compress an image via Javascript in the browser?
- Refresh image with a new one at the same url
- Issue with HTML2Canvas and jsPDF causing browser freeze in RadiobuttonWithForm case
- jQuery to loop through elements with the same class
- jsPDF (HTML2Canvas) throwing error "Error loading image" with JPG (but not with PNG)
- Error while trying to generate a jspdf with html2canvas
- HTML2Canvas not rendering image in Safari browser
- html2canvas only renders the same image