大家。我在使用 Javascript 库方面还很陌生，目前正在努力将 html2canvas 与 jspdf 一起使用。我想捕获我的 html 表并将其作为图像粘贴到 pdf 中。这是我现在拥有的：
HTML 端：
<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端：
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')
});
}
它可以工作并显示在 pdf 中，但由于表格位于 div 标签中，因此该部分的宽度和高度会根据用于运行程序的计算机的分辨率/浏览器而变化。
是否有任何可能的方法可以让我每次生成时都生成相同大小的表？或者有人建议将表格放在 jspdf 上吗？ （我之前尝试过 autotable 插件，但由于我需要大量具有单独彩色背景的嵌套表格和列，所以它没有按照我想要的方式工作）。
提前致谢！
如果您快速浏览一下文档（here），您会发现可以强制使用格式（doc.format =“x”），其中 x 可以是：
a0 - a10
b0 - b10
c0 - c10
dl
信
政府信函
合法
初级法律
账本
小报
信用卡
默认为“a4”。如果您想使用自己的格式，只需将大小作为数字数组传递，而不是上述预定义格式之一，例如[595.28, 841.89]
您可以附加包含表格的 DIV 的外部 html (。这样表格将不再位于 div 中。另外，我建议您对仅文本的 DOM 内容使用 insideText 。您是否尝试生成带有 jspdf 函数的表？