使用jsPDF实现自动打印的测试页面失败及ace.js相关引用报错求助

咱们先拆解一下你遇到的两个报错：

报错原因分析 #

1. Uncaught ReferenceError: define is not defined：这个错误来自ace.js，因为ACE编辑器默认采用AMD模块规范加载，需要依赖RequireJS这类模块加载器才能正常运行，但你的页面里没引入这类工具，直接加载ace.js就会找不到define函数。
2. Uncaught ReferenceError: ace is not defined：这是连锁反应——editor.js依赖ACE编辑器的ace对象，但前面的报错导致ace.js加载失败，自然就找不到ace对象了。

而且仔细看你的测试代码，你根本不需要ACE编辑器相关的脚本啊！这些是jsPDF官方示例里用来做代码编辑的工具，和你要实现的「生成简单文本PDF+自动打印」功能完全无关，属于多余引入。

另外还有个小问题：你把<header>标签放在了<head>里面，这不符合HTML规范，可能会导致页面结构异常，得修正。

解决方法 #

1. 移除多余的脚本引用 #

把以下几个和ACE编辑器相关的脚本标签删掉：

• <script type="text/javascript" src="../js/jspdf/jsPDF-1.3.2/examples/js/ace.js"></script>
• <script type="text/javascript" src="../js/ace/ace-master/lib/ace/ace.js"></script>
• <script type="text/javascript" src="../js/jspdf/jsPDF-1.3.2/examples/js/editor.js"></script>

2. 修正HTML结构 #

把放在<head>里的<header>标签移除（你这个标签里也没内容，留着没用）。

3. 完善自动打印逻辑 #

doc.autoPrint()只是给PDF添加了自动打印的标记，还需要把PDF输出到新窗口才能触发浏览器的打印对话框，所以要在代码最后加上doc.output('dataurlnewwindow')。

修正后的完整代码 #

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Create PDF</title>
<script src="../js/jspdf/jsPDF-1.3.2/examples/js/jquery/jquery-1.7.1.min.js"></script>
<script src="../js/jspdf/jsPDF-1.3.2/examples/js/jquery/jquery-ui-1.8.17.custom.min.js"></script>
<script src="../js/jspdf/jsPDF-1.3.2/jspdf.js"></script>
<script type="text/javascript" src="../js/jspdf/jsPDF-1.3.2/plugins/addimage.js"></script>
<script type="text/javascript" src="../js/jspdf/jsPDF-1.3.2/plugins/from_html.js"></script>
<script type="text/javascript" src="../js/jspdf/jsPDF-1.3.2/plugins/ie_below_9_shim.js"></script>
<script type="text/javascript" src="../js/jspdf/jsPDF-1.3.2/plugins/svg.js"></script>
<script type="text/javascript" src="../js/jspdf/jsPDF-1.3.2/plugins/split_text_to_size.js"></script>
<script type="text/javascript" src="../js/jspdf/jsPDF-1.3.2/plugins/standard_fonts_metrics.js"></script>
<script type="text/javascript" src="../js/jspdf/jsPDF-1.3.2/plugins/autoprint.js"></script>
</head>
<body>
<script>
var doc = new jsPDF();
// I know the proper spelling is colour ;)
doc.setTextColor(100);
doc.text("This is gray.", 20, 20);
doc.setTextColor(150);
doc.text("This is light gray.", 20, 30);
doc.setTextColor(255, 0, 0);
doc.text("This is red.", 20, 40);
doc.setTextColor(0, 255, 0);
doc.text("This is green.", 20, 50);
doc.setTextColor(0, 0, 255);
doc.text("This is blue.", 20, 60);
doc.setTextColor("red");
doc.text("This is red.", 60, 40);
doc.setTextColor("green");
doc.text("This is green.", 60, 50);
doc.setTextColor("blue");
doc.text("This is blue.", 60, 60);
// 标记PDF自动打印并输出到新窗口触发打印
doc.autoPrint();
doc.output('dataurlnewwindow');
</script>
</body>
</html>

这样修改后，页面应该就能正常生成PDF并触发自动打印对话框了。

内容的提问来源于stack exchange，提问作者Pamela Whittaker