把HTML变成图片并下载到本地-蒲公英云

把HTML变成图片并下载到本地

同学问如何把生成的HTML网页变成图片并下载到本地，去网上搜了一下，大部分都是部分代码，没有详细的源码，现把源码贴出，供大家参考。

本例子是用Hbulider写的静态页面，不用再服务器运行。采用了html2canvas.js插件的方法。首先下载html2canvas.js插件，下载地址：

http://download.csdn.net/download/hr541659660/9489386，或者去官方网站下载。

下载后的界面如下：

Center

在dist文件夹下把html2canvas.js文件拷贝到Hbulider的js文件夹下。

Center 1

HTML源码文件如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>html2canvas example</title>
    <script type="text/javascript" src="js/html2canvas.js"></script>
    <script type="text/javascript">
        function takeScreenshot() {
          console.log('test');
            html2canvas(document.getElementById('view'), {
                onrendered: function(canvas) {
                     var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url  
                     window.location.href= imgUri; // 下载图片
                },
               width: 500,
               height: 500//下载图片的大小
            });
    }
    </script>
    </head>
    <body>
        <div id="view" style="background:url(img/carousel1.jpg);">//图片地址任意本地图片即可
            <table id="data" border="1px" cellpadding="10px" bordercolor="red" border="2">
            <caption><h3>Employee payroll</h3></caption>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Salary</td>
                    <th>career time</th>
                    <th>opertion</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                <td>nancy</td>
                <td>2000</td>
                <td>2016.7</td>
                <td>saler</td>
            </tr>
            <tr>
                <td>ruthy</td>
                <td>4000</td>
                <td>2016.7</td>
                <td> technicians</td>
            </tr>
            <tr>
                <td>tom</td>
                <td>5000</td>
                <td>2013.5</td>
                <td>manager</td>
            </tr>
            <tr>
                <td>perter</td>
                <td>20000</td>
                <td>2011.5</td>
                <td>boss</td>
            </tr>
            </tbody>
        </table>
        <input type="button" value="截图" οnclick="takeScreenshot()">
    </div>
    </body>
</html>