使用 JavaScript 在用户单击时将 HTML 页面导出为 PDF
Export HTML page to PDF on user click using JavaScript
当用户单击"生成PDF"按钮时,我需要将html页面导出为PDF文件。我已成功将HTML页面导出为PDF文件,但只有第一次单击我才能将数据下载到PDF,但从第二次单击开始,我无法将数据下载到PDF文件。我不确定我在代码中哪里出错了。
请在此处查看代码:
$(function() {
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function(element, renderer) {
return true;
}
};
$('#cmd').click(function() {
doc.fromHTML($('#target').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.1.135/jspdf.min.js"></script>
<script type="text/javascript" src="http://cdn.uriit.ru/jsPDF/libs/adler32cs.js/adler32cs.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js
"></script>
<script type="text/javascript" src="libs/Blob.js/BlobBuilder.js"></script>
<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.from_html.js"></script>
<script type="text/javascript" src="js/basic.js"></script>
<body id="target">
<div id="content">
<h3>Hello, this is a H3 tag</h3>
<a class="upload">Upload to Imgur</a>
<h2>this is <b>bold</b> <span style="color:red">red</span></h2>
<p>Feedback form with screenshot This script allows you to create feedback forms which include a screenshot, created on the clients browser, along with the form. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation
as it does not make an actual screenshot, but builds the screenshot based on the information available on the page. How does it work? The script is based on the html2canvas library, which renders the current page as a canvas image, by reading the
DOM and the different styles applied to the elements. This script adds the options for the user to draw elements on top of that image, such as mark points of interest on the image along with the feedback they send. It does not require any rendering
from the server, as the whole image is created on the clients browser. No plugins, no flash, no interaction needed from the server, just pure JavaScript! Browser compatibility Firefox 3.5+ Newer versions of Google Chrome, Safari & Opera IE9
</p>
</div>
<button id="cmd">generate PDF</button>
</body>
</html>
这是因为
您在点击事件之外定义了"doc"变量。第一次单击该按钮时,doc 变量包含一个新的 jsPDF 对象。但是,当您再次单击时,此变量不能再以相同的方式使用。因为它已经定义并使用了上次。
将其更改为:
$(function () {
var specialElementHandlers = {
'#editor': function (element,renderer) {
return true;
}
};
$('#cmd').click(function () {
var doc = new jsPDF();
doc.fromHTML(
$('#target').html(), 15, 15,
{ 'width': 170, 'elementHandlers': specialElementHandlers },
function(){ doc.save('sample-file.pdf'); }
);
});
});
它会起作用。
相关文章:
- 如何使用javascript或html下载PDF格式的填写表单
- 在提交时打开thankyou.html+下载PDF
- 生成pdf或其他非html文件时的错误处理
- how to convert html <div> to pdf
- 如何在使用jsPDF将html转换为pdf的同时,在pdf中的某个点进行分页
- 如何将带有大量svg图表的html转换为pdf
- 将php页面的一个部分渲染为HTML和CSS后生成PDF,并考虑PDF分页符
- 如何使用javascript或jquery将整个html页面转换为pdf
- 如果iframe在src(pdf或text)中有非html文档,则iframe中的onload不起作用
- HTML表格导出为具有适当列宽和字体的pdf
- 具有可拖动元素的HTML到PDF
- c# mvc nreco HtmlToPdfConverter 问题将 html 文档转换为 pdf
- 来自HTML图像的jsPDF 会导致 pdf 为空
- 使用 php 将 pdf 文件转换为 html 文件
- HTML到PDF的转换仅在客户端使用JavaScript
- 从横向格式的HTML页面制作PDF
- 使用TableExport.js将HTML表格导出为PDF、WORD、PNG
- HTML和CSS转换为JavaScript中的PDF
- JQuery-HTML到PDF没有'无法在IE中工作(来自C#asmx Web服务)
- 保存样式'导出到pdf'html表