脚本宝典收集整理的这篇文章主要介绍了

Vue2 导出excel

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<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>

总结

以上是脚本宝典为你收集整理的

Vue2 导出excel

全部内容,希望文章能够帮你解决

Vue2 导出excel

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过