javascript - Convert HTML table to canvas using html2canvas

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

2 Answers 2

与本文相关的文章

评论列表(0)