<p><code></p> <p>今天在开发的过程中需要做一个<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>的导出功能。<br />老司机开车使用 <a href="https://github.com/SheetJS/js-xlsx" rel="nofollow noreferrer" target="_blank">js-xlsx</a> 里面有vue的部分可以参考<br />废话不多说了,直接贴代码</p> <p>一、在index.html中引用js文件</p> <p><span class="img-wrap"><img data-src="/img/bVSsSR?w=1920&amp;h=618" src="/img/bVSsSR?w=1920&amp;h=618" alt="clipboard.png" title="clipboard.png" style="cursor: pointer; display: inline;"></span></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js&quot;></script><br /> <script src=&quot;http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>二、在vue文件中</p> <p><span class="img-wrap"><img data-src="/img/bVSsU1?w=1522&amp;h=966" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p><span class="img-wrap"><img data-src="/img/bVSsVI?w=1890&amp;h=1444" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>三、展示</p> <p><span class="img-wrap"><img data-src="/img/bVSsWf?w=1410&amp;h=782" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>注意:这里使用了html的id,如果是element-ui 注意使用 ref</p> <p>如果有帮助请点赞</p> <p>2018年4月10日更新一下<br />这个导出只能导出当前页面的table的内容。<br />如果需要【导出分页数据】这样的需求是没法满足的。<br />需要后台生成一个文件链接,然后点击下载。</p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_24746.html