【发布时间】:2019-01-04 12:10:28
【问题描述】:
当用户填写我的表格并点击“生成简历”按钮时。 HTML 表单应以 PDF 格式自动下载到用户下载文件夹。
问题一:
我尝试使用this 第三方插件,但无法使其正常运行,因为当我单击<a class"btn btn-circle btn-outline-brand" onclick="pdfmyform(this);" href="#">Generate CV</a> 按钮时没有任何反应。我怎样才能让它工作?
问题二:
我怎样才能让这个按钮<a class"btn btn-circle btn-outline-brand" onclick="pdfmyform(this);" href="#">Generate CV</a> 看起来像<input class="btn btn-circle btn-outline-brand" type="submit" value="Generate CV"> 我确实使用了同一个类。但是,我认为引导程序中的类信息仅适用于 <input> 标记,那么我该如何解决这个问题呢?
以下是我当前的代码
<!-- Form-->
<section class="module bg-gray text-center divider-bottom p-3">
<div class="container">
<div class="row">
<div class="col-md-12">
<form id="contact-form" method="post" novalidate>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input class="form-control" type="text" name="name" placeholder="Name (Click Me)" required="">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input class="form-control" type="email" name="email" placeholder="E-mail (Click Me)" required="">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input class="form-control" type="text" name="subject" placeholder="Mobile Number (Click Me)" required="">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" name="message" placeholder="Education History (Click Me)" rows="12" required=""></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" name="message" placeholder="Previous Employers (Click Me)" rows="12" required=""></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" name="message" placeholder="Personal Skills / Hobbies (Click Me)" rows="12" required=""></textarea>
</div>
</div>
<div class="col-md-12">
<p></p>
<div class="text-center">
<input class="btn btn-circle btn-outline-brand" type="submit" value="Generate CV">
<a class"btn btn-circle btn-outline-brand" onclick="pdfmyform(this);" href="#">Generate CV</a>
</div>
</div>
</div>
</form>
<!-- Ajax response-->
<div class="ajax-response text-center" id="contact-response"></div>
</div>
</div>
</div>
</section>
<!-- Form end-->
这是我放置第三方脚本的位置。
<!-- Scripts-->
<script src="assets/js/custom/jquery-3.2.1.min.js"></script>
<script src="assets/js/custom/popper.min.js"></script>
<script src="assets/js/bootstrap/bootstrap.min.js"></script>
<script src="assets/js/custom/plugins.min.js"></script>
<script type="text/javascript" src="http://www.pdfmyform.com/js/pdfmyform.js"></script>
<script src="assets/js/custom/custom.min.js"></script>
</html>
</body>
如果需要,下面是完整的网页代码
<!-- Form-->
<section class="module bg-gray text-center divider-bottom p-3">
<div class="container">
<div class="row">
<div class="col-md-12">
<form id="contact-form" method="post" novalidate>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input class="form-control" type="text" name="name" placeholder="Name (Click Me)" required="">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input class="form-control" type="email" name="email" placeholder="E-mail (Click Me)" required="">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input class="form-control" type="text" name="subject" placeholder="Mobile Number (Click Me)" required="">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" name="message" placeholder="Education History (Click Me)" rows="12" required=""></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" name="message" placeholder="Previous Employers (Click Me)" rows="12" required=""></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" name="message" placeholder="Personal Skills / Hobbies (Click Me)" rows="12" required=""></textarea>
</div>
</div>
<div class="col-md-12">
<p></p>
<div class="text-center">
<input class="btn btn-circle btn-outline-brand" type="submit" value="Generate CV">
<a class"btn btn-circle btn-outline-brand" onclick="pdfmyform(this);" href="#">PDF this page!</a>
</div>
</div>
</div>
</form>
<!-- Ajax response-->
<div class="ajax-response text-center" id="contact-response"></div>
</div>
</div>
</div>
</section>
<!-- Form end-->
<!-- Copyright -->
<div class="footer-copyright text-center text-black py-3">© Copyright 2018 Handcrafted By Zeplur. All Rights Reserved |
<a href="terms.pdf">Terms and conditions</a>
</div>
<!-- To top button--><a class="scroll-top" href="#top"><i class="fas fa-angle-up"></i></a>
<!-- Scripts-->
<script src="assets/js/custom/jquery-3.2.1.min.js"></script>
<script src="assets/js/custom/popper.min.js"></script>
<script src="assets/js/bootstrap/bootstrap.min.js"></script>
<script src="assets/js/custom/plugins.min.js"></script>
<script type="text/javascript" src="http://www.pdfmyform.com/js/pdfmyform.js"></script>
<script src="assets/js/custom/custom.min.js"></script>
</body>
</html>
【问题讨论】:
-
只想指出你所有的lib都应该放在你自定义的js之前。所以, 会在 pdfmyform 之后.js 声明
-
您是否在浏览器的检查视图中遇到某种错误?
-
好的,谢谢,我现在更新一下,看看它是否有效。 @RaviKumarGupta 检查错误 > imgur.com/a/xv5FlPJ 可能是因为我现在在本地托管文件?
-
有人可以帮忙吗?
-
我想你需要正确地托管东西。您可以制作本地服务器并在那里托管内容。然后所有的脚本都应该可以工作了。