jquery.exportWord.js实现word的导出

1. 脚本如下

需要引入jquery.min.js，FileSaver.min.js和jquery.wordexport.js（注意顺序）

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <script src="https://blog-static.cnblogs.com/files/blogs/786443/jquery.wordexport.js"></script>
</head>

<body>
    <input type="button" id="test_button" value="导出word"></div>

    <div style="padding: 0 30%;">
        <h1 style="text-align: center">总标题</h1>
        <table style="border-collapse:collapse;width: 100%;" border="1">
            <tr>
                <td>
                    <h2 style="text-align: center;">标题一</h2>
                    <span>1.</span><br>
                    <span>2.</span><br>
                    <span>3.</span><br>
                    <span>4.</span><br>
                    <span>5.</span><br>
                    <span>6.</span><br>
                    <span>7.</span><br>
                    <span>8.</span><br>
                </td>
            </tr>
            <tr>
                <td>
                    <h2 style="text-align: center">标题二</h2>
                    <span>1.</span><br>
                    <span>2.</span><br>
                    <span>3.</span><br>
                    <span>4.</span><br>
                    <span>5.</span><br>
                    <span>6.</span><br>
                    <span>7.</span><br>
                    <span>8.</span><br>
                </td>
            </tr>
        </table>
    </div>
</body>
<script>
    // tmp取值为html源码的压缩，可以通过这种方式来构造导出的word样式而不影响前端界面
    // 不需要的可以给div标签加个id然后使用jquery选择这个标签调用wordExport方法
    var tmp = '<div style="padding: 0 30%;"><h1 style="text-align: center">总标题</h1><table style="border-collapse:collapse;width: 100%;"border="1"><tr><td><h2 style="text-align: center;">标题一</h2><span>1.</span><br><span>2.</span><br><span>3.</span><br><span>4.</span><br><span>5.</span><br><span>6.</span><br><span>7.</span><br><span>8.</span><br></td></tr><tr><td><h2 style="text-align: center">标题二</h2><span>1.</span><br><span>2.</span><br><span>3.</span><br><span>4.</span><br><span>5.</span><br><span>6.</span><br><span>7.</span><br><span>8.</span><br></td></tr></table></div>'
    $("#test_button").click(function () {
        $(tmp).wordExport("test")
    })
</script>

</html>

2. html界面

image

3. 导出的word效果

image

posted @ 2023-03-15 23:36  wstong  阅读(704)  评论(2)  编辑  收藏  举报