javascript - Convert HTML table to canvas using html2canvas - Stack Overflow

admin2025-04-08 0

I am trying to convert html table to pdf. I have tried using jspdf. it works well with plain table . But doesn't works when there are images in the table. Now I am trying to convert at least to canvas and there by to pdf. But it is also not working when there are images.

<html>
<head>
<style>
button{
    display:block;
    height:20px;
    margin-top:10px;
    margin-bottom:10px;
}
</style>
<script src=".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=".jpg" alt="W3Schools"> </td>
      <td>saf</td></tr>
      <tr><td>saff</td>
      <td>wdqwewe</td></tr>
      </table>
    </div>

    <button onclick="takeScreenShot()">to image</button>
<body>
</html>

<html>
<head>
<style>
button{
    display:block;
    height:20px;
    margin-top:10px;
    margin-bottom:10px;
}
</style>
<script src="https://cdnjs.cloudflare./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./images/w3schools_green.jpg" alt="W3Schools."> </td>
      <td>saf</td></tr>
      <tr><td>saff</td>
      <td>wdqwewe</td></tr>
      </table>
    </div>

    <button onclick="takeScreenShot()">to image</button>
<body>
</html>

Share Improve this question asked May 21, 2017 at 6:14 techhunter 6931 gold badge12 silver badges27 bronze badges

Added a fiddle here: jsfiddle/Safoora/ahkrwt30/5 – techhunter Commented May 21, 2017 at 6:18

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

Your issue was quite simple please add

allowTaint:true,

as options like this

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

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

and it will solve your problem

ps: allowTaint: Whether to allow cross-origin images to taint the canvas

[update] as @ℊααnd the better answer would be using You need to set useCORS property to true in the options. This will load the image as CORS served.

check documentation https://html2canvas.hertzen./documentation.html

ꜰɪʀꜱᴛ

You need to set useCORS property to true in the options. This will load the image as CORS served.

see available options

ꜱᴇᴄᴏɴᴅ

Since, the current host site (w3schools.) of the image doesn't support CORS hence, you'd have to host the image on your local server or a site that supports cross-origin resource sharing (ie. imgur.)

Here is a working example ...

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./ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div id="target">
    <table>
        <tr>
            <td> <img src="https://i.imgur./WamrIt4.jpg" alt="W3Schools."> </td>
            <td>saf</td>
        </tr>
        <tr>
            <td>saff</td>
            <td>wdqwewe</td>
        </tr>
    </table>
</div>
<button onclick="takeScreenShot()">to image</button>

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1744127413a232527.html

javascriptConvert HTML table to canvas using html2canvasStack Overflow

最新回复(0)