vue 项目调用jquery插件jquery.wordexport.js将HTML导出生成word文档
1.利用vue-cli2.0创建一个vue项目:
第一步:vue install -g vue-cli (全局安装,安装一次就行,下次创建项目可以直接执行第二步)安装完毕,用命令 vue -V(注意大写),输出vue版本,说明安装成功,下次就不用安装了
第二部:vue init webpack name(项目名称)
2.在index.html全局引入jQuery
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script>
3.安装依赖:jquery 和file-saver(不需要在webpack.base.conf.js中配置jquery)
命令: npm install jquery file-saver --save
4.在需要的vue文件中引入(如我是在app.vue页面中引入,如图)
app.vue页面代码:
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<button @click="btnWord">按钮</button>
</div>
</template>
<script>
import saveAs from 'file-saver';
import '../static/js/jquery.wordexport'
export default {
name: 'App',
methods: {
btnWord() {
$("#app").wordExport("标题")
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
5.如图就成功导出word了:
6.参考下载jquery导出插件:https://blog.csdn.net/MISS_CJL/article/details/89466710
另一篇:https://blog.csdn.net/dwb123456123456/article/details/84875706