Vue中实现页面上点击按钮下载文件(exe)

桃扇骨 2023-10-02 02:31 44阅读 0赞

## 场景 ##

若依前后端分离版手把手教你本地搭建环境并运行项目：

[若依前后端分离版手把手教你本地搭建环境并运行项目\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客][BADAO_LIUMANG_QIZHI_-CSDN]

在上面搭建起来的Vue前端项目中，实现对接摄像头显示预览页面。但是该摄像头需要安装插件(exe文件)。

所以需要在页面上添加下载插件按钮，实现手动点击下载插件。实现效果如下

![9bd401879ba84b849eb94319e234369b.gif][]

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi ][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、首先将插件exe文件放在前端代码目录public下

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_18_color_FFFFFF_t_70_g_se_x_16][]

2、页面中添加按钮

<el-button
              type="success"
              plain
              icon="el-icon-setting"
              size="mini"
              @click="pluginDownload"
              >下载插件</el-button
            >

3、点击按钮的实现方法中

pluginDownload(){
          window.location.href = "/WebComponentsKit.exe";
        },

[BADAO_LIUMANG_QIZHI_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662
[9bd401879ba84b849eb94319e234369b.gif]: https://img-blog.csdnimg.cn/9bd401879ba84b849eb94319e234369b.gif
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_18_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/23118176f20b45a89b179bb2274ab15d.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_18,color_FFFFFF,t_70,g_se,x_16