同事给我说了简单的导出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路径后可以直接使用。。