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

左手的ㄟ右手 2023-07-13 12:10 1阅读 0赞

1.利用vue-cli2.0创建一个vue项目：

第一步：vue install -g vue-cli （全局安装，安装一次就行，下次创建项目可以直接执行第二步）安装完毕，用命令 vue -V(注意大写)，输出vue版本，说明安装成功，下次就不用安装了

第二部：vue init webpack name(项目名称)

2.在index.html全局引入jQuery

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d3ZjEyMjU_size_16_color_FFFFFF_t_70][]

3.安装依赖：jquery 和file-saver(不需要在webpack.base.conf.js中配置jquery)

命令： npm install  jquery  file-saver --save

4.在需要的vue文件中引入（如我是在app.vue页面中引入，如图）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d3ZjEyMjU_size_16_color_FFFFFF_t_70 1][]

app.vue页面代码：

<div id="app">

<img src="./assets/logo.png">

<router-view/>

<button @click="btnWord">按钮</button>

</div>

</template>

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了：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d3ZjEyMjU_size_16_color_FFFFFF_t_70 2][]

6.参考下载jquery导出插件：[https://blog.csdn.net/MISS\_CJL/article/details/89466710][https_blog.csdn.net_MISS_CJL_article_details_89466710]

另一篇：[https://blog.csdn.net/dwb123456123456/article/details/84875706][https_blog.csdn.net_dwb123456123456_article_details_84875706]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d3ZjEyMjU_size_16_color_FFFFFF_t_70]: /images/20230529/5f5b623bc75442b096b853bca48e8588.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d3ZjEyMjU_size_16_color_FFFFFF_t_70 1]: /images/20230529/319de0ade3784966b34bd9e34e2cd4e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d3ZjEyMjU_size_16_color_FFFFFF_t_70 2]: /images/20230529/acb94a6b6a2f4724bf47060c6ac03995.png
[https_blog.csdn.net_MISS_CJL_article_details_89466710]: https://blog.csdn.net/MISS_CJL/article/details/89466710
[https_blog.csdn.net_dwb123456123456_article_details_84875706]: https://blog.csdn.net/dwb123456123456/article/details/84875706