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