html 到 pdf 转换器出现意外错误的示例答案

【问题标题】：Example for html to pdf converter getting unexpected errorhtml 到 pdf 转换器出现意外错误的示例
【发布时间】：2016-06-19 11:45:19
【问题描述】：

此示例正在运行附加小提琴的副本（示例运行正常）。我很惊讶复制同样的东西会引发错误。为什么？

HTML：

<html>
<head> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<script>
var doc = new jsPDF();
var specialElementHandlers = {
    'body': function (element, renderer) {
        return true;
    }
};

$('button').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});
</script>
</head>

<body>
    <button>Click</button>
    <div class="container"> 
        Hello! 
    </div>
</body> 
</html>

jSFiddle

http://jsfiddle.net/5ud8jkvf/

错误：

注意事项：

由于 fiddle 运行正常，这个例子也必须运行没有任何错误。

fiddle 中没有 jQuery 文件的附件，所以我认为本示例中不需要或缺少 jQuery。

即使在添加 jQuery 文件时 - 错误消失了 - 但 pdf 没有被下载。

【问题讨论】：

除了要添加的 jQuery - 我同意所有的帖子 - 它要求带有要保存文本的容器具有“内容”的 id，因为这就是在功能。我在下面使用了@ankit 的解决方案，发现如果 yIf 你向那个 .container 添加一个 id，那么它会将文档保存为包含文本的 pdf。如果 .container 没有 id - 则 pdf 文档将保存，但其中没有文本
@peterson 你有什么问题吗？

标签： javascript jquery pdf jspdf

【解决方案1】：

控制台不会说谎。小提琴依赖于 jQuery。

您的标记需要 jQuery。将 jQuery 添加到您的代码中...

<html>
 <head> 
  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>

【讨论】：

【解决方案2】：

原因是你必须添加jQuery，像这样：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>

【讨论】：

【解决方案3】：

试试这个

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<script>
var doc = new jsPDF();
var specialElementHandlers = {
    'body': function (element, renderer) {
        return true;
    }
};
$(document).ready(function(){
$('button').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});
});
</script>
</head>

<body>
    <button>Click</button>
    <div class="container"> 
        Hello! 
    </div>
</body> 
</html>

【讨论】：

谢谢 - 我喜欢这个并复制它以供将来使用。唯一的事情 - 它要求带有要保存文本的容器具有“内容”的 id，因为这是函数中调用的内容。如果您向该 .container 添加一个 id，那么它会将文档另存为 pdf，其中包含文本。如果 .container 没有 id - 则 pdf 文档将保存，但其中没有文本。
“试试这个：code”没有回答 OP 的问题为什么？
关于你的哪个问题告诉我？