Convert HTML-Tabelle zu Leinwand mit html2canvas

Ich versuche, HTML-Tabelle in PDF zu konvertieren. Ich habe versucht, jspdf zu verwenden. Es funktioniert gut mit normalen Tisch. Aber funktioniert nicht, wenn Bilder in der Tabelle sind. Jetzt versuche ich zumindest auf Leinwand und dort nach pdf zu konvertieren. Aber es funktioniert auch nicht, wenn Bilder vorhanden sind.Convert HTML-Tabelle zu Leinwand mit html2canvas

<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>

Quelle

2017-05-21 techhunter

Added eine Geige hier: https://jsfiddle.net/Safoora/ahkrwt30/5/ – techhunter

Ihr Problem war ganz einfach fügen Sie bitte

 allowTaint:true,

als Optionen wie dieser

window.takeScreenShot = function() { 
html2canvas(document.getElementById("target"), { 
    onrendered: function (canvas) { 
     document.body.appendChild(canvas); 

    }, 
    allowTaint:true, 
    useCORS: true, 
    width:320, 
    height:220 
});

} und es wird Ihr Problem

ps lösen: -
allowTaint : -Wenn man Cross-Origi- erlaubt n Bilder die Leinwand

[update] als @ besudeln ℊααnd die bessere Antwort wäre verwenden Sie benötigen useCORS Eigenschaft wahr in den Optionen eingestellt werden. Dadurch wird das Bild geladen, während CORS bedient wird.

Check Dokumentation https://html2canvas.hertzen.com/documentation.html

Quelle

2017-05-21 06:36:05

Das wird nicht funktionieren! –

Hallo, ich habe es versucht und es funktioniert. – techhunter

@ ℊααnd warum die negative vote ??? –

ꜰɪʀꜱᴛ

Sie müssen useCORS Eigenschaft true in den Optionen eingestellt werden. Dadurch wird das Bild geladen, während CORS bedient wird.

siehe available options

ꜱᴇᴄᴏɴᴅ

Da die aktuelle Host-Site (w3schools.com) des Bildes CORS nicht damit unterstützen, würden Sie das Bild Host auf Ihrem lokaler Server oder eine Site, die die gemeinsame Ressourcennutzung unterstützt (ie. imgur.com)

Hier ist ein funktionierendes Beispiel. .

var takeScreenShot = function() { 
 
    html2canvas(document.getElementById("target"), { 
 
     useCORS: true, 
 
     onrendered: function(canvas) { 
 
     document.body.appendChild(canvas); 
 
     }, 
 
     width: 320, 
 
     height: 220 
 
    }); 
 
}

button { 
 
    display: block; 
 
    height: 20 px; 
 
    margin - top: 10 px; 
 
    margin - bottom: 10 px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> 
 
<div id="target"> 
 
    <table> 
 
     <tr> 
 
      <td> <img src="https://i.imgur.com/WamrIt4.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>

Quelle

2017-05-21 08:02:43

@techhunter Wie hat die andere Antwort für dich funktioniert? Das sollte nicht funktionieren. Dies ist die richtige Antwort. –

Vielen Dank für Ihre Antwort. beide arbeiten. Aber ich akzeptiere darüber ist es einfach für mich. Also stimme ich deine Antwort ab. – techhunter

Convert HTML-Tabelle zu Leinwand mit html2canvas

Antwort

Verwandte Themen