HTML5 前端將 dom 元素轉化爲 Word，EXCEL 或者圖片並實現下載

時間 2019-11-30

標籤 html5 html 前端 dom 元素轉化 word excel 或者圖片實現下載欄目 HTML5 简体版

原文原文鏈接

< 一 > word javascript

1，依賴於 jquery.html.word.js 插件 => https://blog-static.cnblogs.com/files/lovling/jquery.html.word.jscss

2，該插件依賴於 jquery，須要先引入 jquery , 使用方式以下html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jQuery 之 HTML 生成 Word 文檔</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
    <script src="https://blog-static.cnblogs.com/files/lovling/jquery.html.word.js"></script>
</head>
<body>
    <div id="box">
        <h1 style="font-size: 14px; color: red;">你好啊</h1>
        <img src="./123.jpg" width="100" height="100" />
        <table width="300" border="1" cellspacing="0" cellpadding="0">
            <tr style="text-align: center;">
                <td>第1列</td>
                <td>第2列</td>
                <td>第3列</td>
                <td>第4列</td>
                <td>第5列</td>
            </tr>
            <tr style="text-align: center;">
                <td>第1列</td>
                <td>第2列</td>
                <td>第3列</td>
                <td>第4列</td>
                <td>第5列</td>
            </tr>
            <tr style="text-align: center;">
                <td>第1列</td>
                <td>第2列</td>
                <td>第3列</td>
                <td>第4列</td>
                <td>第5列</td>
            </tr>
        </table>
    </div>
    <button id="leading-out">導出 Word</button>
</body>
<script type="text/javascript">
    /**
     * 支持各類標籤, 支持行間樣式, 不支持全局樣式
     * 圖片不支持 style 樣式, 支持標籤自己屬性，不支持不一樣域名的圖片
     * 支持表格, 支持表格行間樣式
     * 不支持 form 表單
     */
    $("#leading-out").click(function() {
        $("#box").wordExport();
    });
</script>
</html>

3，效果，可能會有些許誤差java

< 二 > exceljquery

1，依賴於 jquery.table.excel.js 插件 => https://blog-static.cnblogs.com/files/lovling/jquery.table.excel.jscanvas

2，該插件依賴於 jquery，須要先引入 jquery , 使用方式以下app

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery 之 TABLE 生成 Excel 文檔</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
    <script src="https://blog-static.cnblogs.com/files/lovling/jquery.table.excel.js"></script>
</head>
<style type="text/css">
    .box {
        width: 600px;
    }
    td {
        text-align: center;
        vertical-align: middle;
    }
    #btn {
        width: 600px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 16px;
        color: red;
    }
</style>
<body>
    <div class="box">
        <table width="600" height="400px" border="1">
            <tr class="no">
                <td>該行不會被輸出到excel中</td>
                <td>該行不會被輸出到excel中</td>
            </tr>
            <tr>
                <td>這一行會被導出到excel中</td>
                <td>這一行會被導出到excel中</td>
            </tr>
            <tr>
                <td>單元格1-1</td>
                <td>單元格1-2</td>
            </tr>
            <tr>
                <td>單元格2-1</td>
                <td>單元格2-2</td>
            </tr>
            <tr>
                <td>單元格3-1</td>
                <td>單元格3-2</td>
            </tr>
            <tr>
                <td colspan="2">123</td>
            </tr>
        </table>
        <button id="btn">點擊這裏將表格內容導出到excel中</button> 
    </div> 
</body>
<script type="text/javascript">
    $("#btn").click(function() {
        $(".box").table2excel({
            exclude: ".no",          // 不被生成的行
            filename: "myFileName",  // 生成的文件名稱
            exclude_img: true,       // 是否過濾圖片
            exclude_links: true,     // 是否過濾 a 標籤
            exclude_inputs: true     // 是否過濾表單
        });
    });
</script>
</html>

< 三 > IMGdom

1，依賴於 html.canvas.js 插件 => https://blog-static.cnblogs.com/files/lovling/html.canvas.js編碼

2，使用方式spa

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>頁面截屏</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
    <script src="https://blog-static.cnblogs.com/files/lovling/html.canvas.js"></script>
</head>
<style type="text/css">
    #box {
        width: 360px;
    }
    .dom-area {
        width: 360px;
        background: white;
    }
    .dom-area-line {
        height: 44px;
        font-size: 0;
        border-bottom: 1px solid #e5e5e5;
    }
    .dom-area-line > span {
        display: inline-block;
        vertical-align: top;
        line-height: 44px;
        width: 60px;
        font-size: 14px;
        text-indent: 14px;
    }
    .dom-area-line > input {
        display: inline-block;
        vertical-align: top;
        border: none;
        height: 42px;
        line-height: 42px;
        width: 300px;
        outline: none;
    }
    .cut-button {
        font-size: 0;
        height: 44px;
        background: #000000;
    }
    .cut-button > a {
        display: inline-block;
        width: 180px;
        line-height: 44px;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        text-decoration: none;
    }
    .cut-area {
        width: 360px;
    }
    .cut-area > canvas {
        width: 360px;
    }
</style>
<body>
<div id="box">
    <div class="dom-area">
        <div class="dom-area-line">
            <span>姓名:</span>
            <input type="text" />
        </div>
        <div class="dom-area-line">
            <span>性別:</span>
            <input type="text" />
        </div>
        <div class="dom-area-line">
            <span>生日:</span>
            <input type="text" />
        </div>
    </div>
    <div class="cut-button">
        <a id="cuts-outs">截屏</a>
        <a id="down-load">下載</a>
    </div>
    <div class="cut-area"></div>
</div>
</body>
<script type="text/javascript">

    var domArea = $('.dom-area');
    var cutArea = $('.cut-area');
    var downLoad = $("#down-load");

    $("#cuts-outs").on("click", function (ev) {
        html2canvas(domArea, {
            onrendered: function (canvas) {
                // 將生成的 canvas 放入到 dom 中, 這裏能夠作畫布操做
                cutArea.append(canvas);

                // 將操做完成的畫布轉化爲 base64 編碼的文件
                dataURL = canvas.toDataURL("image/png");
                console.log(dataURL);

                // 將文件設置到下載區, 點擊就能下載了
                downLoad.attr("href", dataURL);
                downLoad.attr("download", 'myjobdeer.png');
            }
        });
    });
</script>
</html>