为什么 javascript onclick 事件无法正常工作
[英]Why javascript onclick event not working properly
问题描述
这是我的代码，当我在 onclick 事件的帮助下运行它时，它不起作用并打印空白 pdf。 但是当我在脚本标签的帮助下直接运行这段代码时，它可以完美运行，我想在按钮的帮助下运行它。 谁能告诉我我做错了什么？
https://jsfiddle.net/iamgeekfool/8ztc5pnm/3/
var element = document.getElementById('exportPdf');
var opt = {
margin: 1,
filename: 'myfile.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// New Promise-based usage:
html2pdf().set(opt).from(element).save();
// Old monolithic-style usage:
html2pdf(element, opt);
1 个解决方案
解决方案1
0 2022-08-26 06:08:25
由于开发团队提到最新版本存在一些问题，我们必须使用v0.9.3
参考： https://ekoopmans.github.io/html2pdf.js/
更新代码： https://jsfiddle.net/t0L82nrp/1/
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js" integrity="sha512-YcsIPGdhPK4P/uRW6/sruonlYj+Q7UHWeKfTAkBW+g83NKM+jMJFJ4iAPfSnVp7BKD4dKMHmVSvICUbE/V1sSw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
function exportPdf() {
html2pdf().set(opt).from(element).save();
}
解决方案2
0 2022-08-26 08:02:43
function myFunction() { var name = document.getElementById('name').value; var sex = document.getElementById('sex').value; var age = document.getElementById('age').value; var reportid = document.getElementById('reportid').value; var sampledate = document.getElementById('sampledate').value; var reportdate = document.getElementById('reportdate').value; var prefed = document.getElementById('prefed').value; var remark = document.getElementById('remark').value; var testname = document.getElementById('testname').value; var unit = document.getElementById('unit').value; var result = document.getElementById('result').value; var other = document.getElementById('other').value; document. getElementById("nameOutput"). innerHTML = name; document. getElementById("sexOutput"). innerHTML = sex; document. getElementById("ageOutput"). innerHTML = age; document. getElementById("reportidOutput"). innerHTML = reportid; document. getElementById("sampledateOutput"). innerHTML = sampledate; document. getElementById("reportdateOutput"). innerHTML = reportdate; document. getElementById("prefedOutput"). innerHTML = prefed; document. getElementById("remarkOutput"). innerHTML = remark; document. getElementById("testnameOutput"). innerHTML = testname; document. getElementById("unitOutput"). innerHTML = unit; document. getElementById("resultOutput"). innerHTML = result; document. getElementById("otherOutput"). innerHTML = other; } function exportPdf() { var element = document.getElementById('exportPdf'); var opt = { margin: 1, filename: 'myfile.pdf', image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2 }, jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' } }; // New Promise-based usage: html2pdf().set(opt).from(element).save(); // Old monolithic-style usage: //html2pdf(element, opt); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script> <,DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width: initial-scale=1" /> </head> <body id="exportPdfO"> <:-- data input section --> <div class="dataInput"> <h3>Basic Details</h3> <input type="text" name="name" id="name" placeholder="Name"> <input type="text" name="sex" id="sex" placeholder="Sex"> <input type="number" name="age" id="age" placeholder="Age"> <input type="number" name="reportid" id="reportid" placeholder="Report ID"> <span class="inputText">Sample Date:</span> <input type="date" name="sampledate" id="sampledate"> <span class="inputText">Report Released Date:</span> <input type="date" name="reportdate" id="reportdate"> <h3>Other Details:</h3> <input type="text" name="prefed" id="prefed" placeholder="Self or By Doctor"> <input type="text" name="remark" id="remark" placeholder="Remark"> <h3>Report Result.</h3> <input type="text" name="testname" id="testname" placeholder="Test Name"> <input type="text" name="unit" id="unit" placeholder="Unit"> <input type="text" name="result" id="result" placeholder="Result"> <input type="text" name="other" id="other" placeholder="Other"> <input type="button" onclick="myFunction()" value="Preview Report"> </div> <,-- data input section end --> <br><br> <:-- report body [#exportPdf] --> <div id="exportPdf"> <:-- head section --> <div class="head"> <:-- ============================== --> <div class="headLeft"> <br><br> 38/203 Lime Street <br> Near LD Centre <br> T9-X (Mars) 220000 <br> +001 99000 99000 </div> <:-- ============================== --> <div class="headRight"> <b>Prefed By:</b><br> <span id="prefedOutput">Dr: Ravi Deenkar</span><br> <span id="remarkOutput">AIMS. Kanpur</span> </div> <.-- ============================== --> </div> <!-- head section end --> <!-- basic information section --> <div class="main"> <!-- ============================== --> <div class="mainLeft"> <table class="mainTable"> <tbody> <tr> <td>Name:</td> <td id="nameOutput">Amit</td> </tr> <tr> <td>Sex:</td> <td id="sexOutput">Male</td> </tr> <tr> <td>Age:</td> <td id="ageOutput">21</td> </tr> </tbody> </table> </div> <!-- ============================== --> <div class="mainRight"> <table class="mainTable"> <tbody> <tr> <td>Report ID:</td> <td id="reportidOutput">00061</td> </tr> <tr> <td>Sample Collection Date:</td> <td id="sampledateOutput">18/08/2022</td> </tr> <tr> <td>Report Released Date:</td> <td id="reportdateOutput">19/08/2022</td> </tr> </tbody> </table> </div> <!-- ============================== --> </div> <!-- basic information section end --> <!-- final report --> <div class="report"> <table class="reportTable"> <caption>Final Report</caption> <thead> <tr> <th>Test Name</th> <th>Unit</th> <th>Result</th> <th>Other</th> </tr> </thead> <tbody> <tr> <td id="testnameOutput">Testname</td> <td id="unitOutput">Unit</td> <td id="resultOutput">Result</td> <td id="otherOutput">Other</td> </tr> </tbody> </table> </div> <!-- final report end --> <!-- footer section --> <div class="footer"> <center><b>END REPORT</b></center><br><br><br> <span>Thank You for business with us.</span> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the </p> </div> <!-- footer section end --> </div> <!-- report body [#exportPdf] end --> <!-- pdf download button --> <input type="button" onclick='exportPdf()' value="Download Report" class="downloadButton"> </body> </html>
Onclick事件无法正常运行
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.