vue 项目调用jquery插件jquery.wordexport.js将HTML导出生成word文档

39 篇文章 1 订阅

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

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值