使用JavaScript在用户单击时将HTML页面导出为PDF

作者

当用户单击GeneratePDF按钮时，我需要将html页面导出为PDF文件。我正在成功地将HTML页面导出到PDF文件中，但仅在第一次单击时，我就可以将数据下载到PDF中，但在第二次单击时，我无法将数据下载到PDF文件中。我不确定我在代码中哪里出错了

请在此处检查代码：

$（函数（）{
var doc=new jsPDF（）；
变量specialElementHandlers={
“#编辑器”：函数（元素、渲染器）{
返回true；
}
};
$（'#cmd'）。单击（函数（）{
doc.fromHTML（$（'#target'）.html（），15,15{
“宽度”：170，
“elementHandlers”：specialElementHandlers
});
doc.save（'sample-file.pdf'）；
});
});
&lt；脚本src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“&gt&lt/脚本&gt；
&lt；script type=“text/javascript”src=”https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js“&gt&lt/脚本&gt；
&lt；script type=“text/javascript”src=”https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.1.135/jspdf.min.js“&gt&lt/脚本&gt；
&lt；script type=“text/javascript”src=”http://cdn.uriit.ru/jsPDF/libs/adler32cs.js/adler32cs.js“&gt&lt/脚本&gt；
&lt；script type=“text/javascript”src=”https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js
“&gt&lt/脚本&gt；
&lt；script type=“text/javascript”src=”https://stackoverflow.com/questions/19786113/libs/Blob.js/BlobBuilder.js“&gt&lt/脚本&gt；
&lt；script type=“text/javascript”src=”http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.addimage.js“&gt&lt/脚本&gt；
&lt；script type=“text/javascript”src=”http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.standard_fonts_metrics.js“&gt&lt/脚本&gt；
&lt；script type=“text/javascript”src=”http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.split_text_to_size.js“&gt&lt/脚本&gt；
&lt；script type=“text/javascript”src=”http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.from_html.js“&gt&lt/脚本&gt；
&lt；script type=“text/javascript”src=”https://stackoverflow.com/questions/19786113/js/basic.js“&gt&lt/脚本&gt；
&lt；body id=“target”&gt；
&lt；div id=“content”&gt；
&lt；h3&gt；您好，这是H3标签&lt/h3&gt；
&lt；a class=“上传”&gt；上传至Imgur&lt/a&gt；
&lt；h2&gt；这是&lt；b&gt；粗体&lt/b&gt&书信电报；span style=“color:red”&gt；红色&lt/span&gt&lt/h2&gt；
&lt；p&gt；带有屏幕截图的反馈表单此脚本允许您创建反馈表单，其中包括在客户端浏览器上创建的屏幕截图以及表单。屏幕截图是基于DOM的，因此可能无法100%精确到真实的表示形式
因为它不会生成实际的屏幕截图，而是基于页面上可用的信息构建屏幕截图。它是如何工作的？该脚本基于html2canvas库，该库通过读取
DOM和应用于元素的不同样式。此脚本为用户添加了在图像顶部绘制元素的选项，例如标记图像上的兴趣点以及它们发送的反馈。它不需要任何渲染
在客户端浏览器上创建整个映像时，从服务器开始。没有插件，没有flash，服务器不需要交互，只有纯JavaScript！浏览器兼容性Firefox 3.5+谷歌Chrome、Safari和；歌剧IE9
&lt/p&gt；
&lt/部门&gt；
&lt；按钮id=“cmd”&gt；生成PDF&lt/按钮&gt；
&lt/车身&gt；
&lt/html&gt

这是因为您在单击事件之外定义了“doc”变量。第一次单击按钮时，doc变量包含一个新的jsPDF对象。但是当你再次点击时，这个变量就不能再以同样的方式使用了。因为上次已经定义并使用了它

将其更改为：

$（函数（）{
变量specialElementHandlers={
“#编辑器”：函数（元素、渲染器）{
返回true；
}
};
$（'#cmd'）。单击（函数（）{
var doc=new jsPDF（）；
doc.fromHTML(
$（'#target'）.html（），15,15，
{'width'：170，'elementHandlers'：specialElementHandlers}，
函数（）{doc.save（'sample-file.pdf'）；}
);
});  
});

它会起作用的

相关文章：

  1. 如何在jQuery中选择具有多个类的元素？
  2. 如何在jQuery中选择具有多个类的元素？
  3. 如何使用jQuery获取元素的ID？
  4. 在jQuery中删除事件处理程序的最佳方法是什么？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with