- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
jsPDF 的 addHTML
需要 html2canvas.js
或 rasterizeHTML.js
。
我想使用rasterizeHTML.js
,但它不起作用。网上找不到任何示例。
使用html2canvas.js
:
html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<body>
<p id="to-pdf">HTML content...</p>
</body>
js
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML(document.body,function() {
pdf.save('web.pdf');
});
无法使用rasterizeHTML.js
(没有任何反应;没有错误):
html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rasterizehtml/1.2.2/rasterizeHTML.allinone.js"></script>
<body>
<p id="to-pdf">HTML content...</p>
</body>
js
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML(document.body,function() {
pdf.save('web.pdf');
});
我错过了什么?
最佳答案
我最近遇到了同样的问题,并设法从各种来源拼凑出一个工作示例。
基本 HTML
<div id="canvas" width="100%">
<table class='CSSTableGenerator'>
<tr>
<td>Item</td>
<td>Cost</td>
<td>Description</td>
<td>Available</td>
</tr>
<tr>
<td>Milk</td>
<td>$1.00</td>
<td>Cow puss</td>
<td>Out Of Stock</td>
</tr>
<tr>
<td>Milk</td>
<td>$1.00</td>
<td>white stuff</td>
<td>Out Of Stock</td>
</tr>
</table>
</div>
<button id="download">Create PDF</button>
JS
$(document).ready(function () {
$('#download').click(function () {
html2canvas(document.getElementById('canvas'), {
onrendered: function (canvas) {
var imgData = canvas.toDataURL('image/png');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('download.pdf');
}
});
});
});
http://jsfiddle.net/andyg2/mtLqparw/
资源
https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js
https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js
关于javascript - jsPDF + rasterizeHTML 不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38907272/
jsPDF 的 addHTML 需要 html2canvas.js 或 rasterizeHTML.js。 我想使用rasterizeHTML.js,但它不起作用。网上找不到任何示例。 使用html2
我正在使用 rasterizehtml.js 插件将我的 html 渲染到 Canvas 中!我遇到了一些问题,但设法解决了所有问题,除了非常重要的问题。我遇到了 toDataUrl(); 问题它表明
显然有捕获网页屏幕截图的解决方案: Snapabug通过使用小程序工作 GrabzIt我想这是在服务器端完成的。 Webkit2png是一个命令行工具,因此实际上并不是浏览器代码的一部分。 可能还有其
我是一名优秀的程序员,十分优秀!