zoukankan      html  css  js  c++  java
  • jQuery wordexport导出 word

    同事给我说了简单的导出word的插件,亲测了下,做个随笔。

    这个导出插件是jQuery自带的的插件,通过调用wordexport.js来实现导出功能。

    1.引入的js

    <script type="text/javascript" src="/resources/jQuery/jquery.min.js"></script>
    <script type="text/javascript" src="/resources/FileSaver/FileSaver.js"></script>
    <script type="text/javascript" src="/resources/jQuery/jquery.wordexport.js"></script>

        其中  wordexport.js   在   jquery.min.js   和   FileSaver.js  引用。

    2.需要导出的数据

    <a class="word-export" href="javascript:void(0)"> 导出word</a>
    <div id="page-content">
         jquery  测试
    </div>

       注意  id="page-content"   class="word-export"   要与 下面的 js 中的相对应。

    3.jquery wordExport的使用方法

    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $("a.word-export").click(function(event) {
                $("#page-content").wordExport();
            });
        });
    </script>

     

    4.导出文件的自定义名称

    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $("a.word-export").click(function(event) {
                $("#page-content").wordExport("导出文件的名称");
            });
        });
    </script>

       在  wordExport("导出文件的名称")  加入文件名称就能自定义文件名称

    完整的代码:

    <body>
    <a class="word-export" href="javascript:void(0)"> 导出word</a>
    <div id="page-content">
         jquery  测试
    </div>
    
    <script type="text/javascript" src="/resources/jQuery/jquery.min.js"></script>
    <script type="text/javascript" src="/resources/FileSaver/FileSaver.js"></script>
    <script type="text/javascript" src="/resources/jQuery/jquery.wordexport.js"></script>
    
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $("a.word-export").click(function(event) {
                $("#page-content").wordExport("测试");
            });
        });
    </script>
    
    </body>
    

      更改js路径后可以直接使用。。

  • 相关阅读:
    wampserver2.2e-php5.3.13 版本 增加 php7 支持
    23种设计模式[3]:抽象工厂模式
    23种设计模式[2]:工厂方法模式
    23种设计模式[1]:单例模式
    [转]设计模式六大原则[6]:开闭原则
    [转]设计模式六大原则[5]:迪米特法则
    [转]设计模式六大原则[4]:接口隔离原则
    [转]设计模式六大原则[3]:依赖倒置原则
    [转]设计模式六大原则[2]:里氏替换原则
    [转]设计模式六大原则[1]:单一职责原则
  • 原文地址:https://www.cnblogs.com/FengLog/p/8465944.html
Copyright © 2011-2022 走看看