html导出word、excel文档插件jquery.wordexport

html导出word、excel文档插件jquery.wordexport

html导出word、excel文档插件jquery.wordexport,可以将html内的元素导出为word文档 excel文档 甚至html文档等

使用方式:

第一步引入bfwone 加载依赖项jquery

第二步use插件

第三步配置参数

 var data = {
     fileName: "测试文档", //文档名
     fileType: ".xls", //文档类型  经测试  可以doc xls html 其他的自己去试
     isHeader: true, //是否显示页眉  *xls  不要设置页眉页脚  改为false
     isFooter: true, //是否显示页脚  *xls  不要设置页眉页脚  改为false
     header: "测试页眉", //页眉标题
     styles: $("#wordExPortCss"), //要导出的内容style
     updateExportCss: $("#updateExportCss") //需要修改导出的word样式  宽度高度 margin之类的
 }

代理示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17|filesaver&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.wordexport"], function() {
                $("a.word-export").click(function (event) {
                    var data = {
                        fileName: "测试文档", //文档名
                        fileType: ".xls", //文档类型  经测试  可以doc xls html 其他的自己去试
                        isHeader: true, //是否显示页眉  *xls  不要设置页眉页脚  改为false
                        isFooter: true, //是否显示页脚  *xls  不要设置页眉页脚  改为false
                        header: "测试页眉", //页眉标题
                        styles: $("#wordExPortCss"), //要导出的内容style
                        updateExportCss: $("#updateExportCss")//需要修改导出的word样式  宽度高度 margin之类的
                    }
                    $("#page-content").wordExport(data);
                });
            });
        });
    </script>
    <style>
    </style>
</head>
<body>
    <h3 style="text-align: center;margin:50px;"><a class="word-export" href="javascript:void(0)"> 导出xls </a></h3>
    <div id="page-content">
        <table>
            <thead>
                <th>姓名</th>
                <th>电话</th>
                <th>地址</th>
                <th>邮箱</th>
                <th>订单号</th>
            </thead>
            <tr class="">
                <td class="redCorlor">标题1标题1标题1标题1标题1标题1标题1标题1标题1</td>
                <td>标题2标题2标题2标题2标题2标题2标题2标题2标题2标题2标题2标题2标题2</td>
                <td>标题2标题2标题2标题2标题2标题2标题2标题2标题2标题2</td>
                <td>标题2标题2标题2标题2标题2标题2标题2标题2标题2标题2标题2</td>
                <td>标题5标题5标题5标题5标题5标题5标题5标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr class="bgColor">
                <td class="redCorlor">标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr class="bgColor">
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td class="redCorlor">标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr class="bgColor">
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td class="redCorlor">标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td class="redCorlor">标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td class="redCorlor">标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
            <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
                <td>标题4</td>
                <td>标题5</td>
            </tr>
        </table>
    </div>
</body>
<style type="text/css" id="wordExPortCss">
    .redCorlor {
        color: red
    }

    table {
        border-collapse: collapse;
        margin: 0 auto;
        text-align: center;
        font-size: 12px;
        width: 1200px;
    }

    td {
        height: 50px;
        border: 1px solid blue;
        font-family: 宋体;
        font-weight: bold;
    }

    .bgColor {
        background: red
    }
</style>
<style type="text/css" id="updateExportCss">
@page WordSection {
    size: 1260px 500px;/*宽高*/
    margin: 30px;/*边距*/
    mso-header-margin: 20px;/*页眉距*/
    mso-footer-margin: 20px;/*页脚距*/
}
</style>
</body>
</html>


立即下载jquery.wordexport.js查看所有js插件

网友评论0

程序员在线工具箱