我正在尝试将html表转换为pdf。我尝试使用jspdf。它适用于普通表。但是，当表格中有图片时，则无法使用。现在，我尝试至少将其转换为 Canvas ，然后再转换为pdf。但是当有图像时它也不起作用。
<html>
<head>
<style>
button{
display:block;
height:20px;
margin-top:10px;
margin-bottom:10px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js" ></script>
<script>
window.takeScreenShot = function() {
html2canvas(document.getElementById("target"), {
onrendered: function (canvas) {
document.body.appendChild(canvas);
},
width:320,
height:220
});
}
</script>
</head>
<body>
<div id="target">
<table>
<tr><td> <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"> </td>
<td>saf</td></tr>
<tr><td>saff</td>
<td>wdqwewe</td></tr>
</table>
</div>
<button onclick="takeScreenShot()">to image</button>
<body>
</html>
最佳答案
您的问题很简单，请添加
allowTaint:true,
window.takeScreenShot = function() {
html2canvas(document.getElementById("target"), {
onrendered: function (canvas) {
document.body.appendChild(canvas);
},
allowTaint:true,
useCORS: true,
width:320,
height:220
});
}
ps:allowTaint:是否允许跨域图像污染 Canvas
[更新]
作为@ℊααnd，更好的答案是使用
您需要在选项中将 useCORS 属性设置为 true 。这将在CORS投放时加载图片。
检查文档https://html2canvas.hertzen.com/documentation.html
关于javascript - 使用html2canvas将HTML表转换为 Canvas ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44093763/