精华内容
下载资源
问答
  • 主要介绍了vue点击按钮下载文件,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue点击按钮下载文件

    万次阅读 热门讨论 2019-10-09 16:01:30
    项目中需要用到文件下载功能,查了资料发现需要用到a标签的特性,但是这边需要用到点击按钮下载,懒得写样式,于是用了以下代码. <div class="btns"> <el-button size="mini" type="primary" @click="$router...

    在这里插入图片描述
    方法一: 当后端直接返回文件下载路径给你时
    .项目中需要用到文件下载功能,查了资料发现需要用到a标签的特性,但是这边需要用到点击按钮下载,懒得写样式,于是用了以下代码.

    <div class="btns">
      	<el-button size="mini" type="primary" @click="$router.push(`/portal/${item.id}/detail`)">查看软件</el-button>
        <el-link target="_blank" :href="item.sourceUrl | filterUrl" :underline="false" style="margin-left:15px">
            <el-button size="mini" type="warning">软件下载</el-button>
        </el-link>
    </div>
    

    在el-button的外面套了一层el-link,如下图,可以正常下载
    在这里插入图片描述
    以下是el-link文字链接的属性
    在这里插入图片描述

    2020/8/13----
    新增方法二: 当后端返回文件UID给你是时
    有时候,后端接口返回的是文件的uid,需要调用接口获取文件的相关信息
    在这里插入图片描述
    返回值如下图
    在这里插入图片描述
    此处如果用第一种方法肯定不行,于是做如下处理

    handLoad(uid){   //handload可以绑到下载按钮上,点击按钮时调用此方法
    	//此方法根据自己项目来的,getFileInfoByUid是项目接口,根据项目自行调整
        getFileInfoByUid(uid).then(res=>{
        	//res就是上图的返回值,然后调用下面的download方法
            this.download(res.name,res.originalPath)
        })        
    },
    download(name,url){
       const ele = document.createElement('a');
       ele.setAttribute('href', this.$options.filters['filterUrl'](url));
         //this.$options.filters['filterUrl']是调用全局过滤器,filterUrl是你自己项目main.js里面定义的过滤器
       ele.setAttribute('download',name);
       ele.style.display = 'none';
       document.body.appendChild(ele);
       ele.click();
       document.body.removeChild(ele);
    },
    
    展开全文
  • vue】实现按钮点击下载文件

    千次阅读 2021-03-19 15:46:56
    项目要求实现表格按钮点击下载文件,之前做下载都是直接接接口,这次下载路径在表格中已经返回了,需要在前端处理下载需求。 以下是方法代码 download(data) { if (!data) { return } let blob = ...

    项目要求实现表格按钮点击下载文件,之前做下载都是直接接接口,这次下载路径在表格中已经返回了,需要在前端处理下载需求。

    以下是方法代码

        exportExcel() {
                axios.defaults.headers['content-type'] = 'application/json;charset=UTF-8'
                axios.defaults.headers['TOKEN'] = util.cookies.get('token')
                axios({
                    method: 'get',
                    url: url, // 请求地址
                    responseType: 'blob' // 表明返回服务器返回的数据类型
                }).then(res => {
                    let tempName = res.headers['content-disposition'].split(';')[1].split('filename=')[1]
                    // iconv-lite解决中文乱码
                    let iconv = require('iconv-lite')
                    iconv.skipDecodeWarning = true// 忽略警告
                    let fileName = iconv.decode(tempName, 'utf-8')
                    let blob = new Blob([res.data], {type: 'application/octet-stream'})//转换成二进制对象
                    if ('download' in document.createElement('a')) { // 不是IE浏览器
                        let url = window.URL.createObjectURL(blob)//二进制对象转换成url地址
                        let link = document.createElement('a')
                        link.style.display = 'none'
                        link.href = url
                        link.setAttribute('download', fileName)
                        document.body.appendChild(link)
                        link.click()
                        document.body.removeChild(link) // 下载完成移除元素
                        window.URL.revokeObjectURL(url) // 释放掉blob对象
                    } else {
                        window.navigator.msSaveBlob(blob, fileName)
                    }
                }, err => {
                    console.error('download err', err)
                })
            },
    

    方法二 (其他情况)
    【已经确定路径的单一文件】
    (直接页面打开,部分文件类型好像实现不了)

    templateUpload(){//下载模板
    				window.open(this.$app_config.api_host +'/excel/daoruyuangong.xlsx')
    			}
    

    方法三(其他情况)
    【(利用a标签实现)利用可传参的接口】

    downLoad(id){
                    let a = document.createElement('a')
                    a.href = this.config.uploadURL+"/api/activitiesPhotoResources/download?id="+id 
                    a.target = '_blank'//在新窗口打开
                    a.click();
                },
    

    方法四
    【写在html里的】

     <a :href="$app_config.api_host+`/api/attachments/showFile?path=${encodeURI(row.path)}`" download>
         <el-button type="text" size="mini" class="table-btn-reply">下载</el-button>
    </a>
    
    展开全文
  • vue 点击事件 点击下载文件

    万次阅读 2019-07-22 11:03:58
    // 点击下载文件 downloadFile(item) { this.contextFile.index = -1; item.path = item.path.replace(/^http:/,"https:"); this.download(item.path, item.title); }, download (src,...
    // 点击下载文件     
        downloadFile(item) {
          this.contextFile.index = -1;
          item.path = item.path.replace(/^http:/,"https:");
          this.download(item.path, item.title);
        },
        download (src, fileName) {
          let x = new XMLHttpRequest();
          x.open("GET", src, true);
          x.responseType = 'blob';
          x.onload = function(e) {
            let url = window.URL.createObjectURL(x.response)
            let a = document.createElement('a');
            a.href = url
            a.download = fileName
            a.click()
          }
          x.send();
        },
    
    展开全文
  • 主要介绍了Vue触发input选取文件点击事件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 使用Vue时,我们前端如何处理后端返回的文件流 首先后端返回流,这里我把流的动作拿出来了,我很多地方要用 /** * 下载单个文件 * * @param docId */ @GetMapping(/download/{docId}) public void download(@...
  • vue 点击下载按钮下载图片

    千次阅读 2020-10-29 16:13:13
    样子就类似于下图: 在data中定义一个变量addImg data() { return { adImg:require('../../../../public/aixin.png') }; }, 定义一个事件 ... 下载模板 </div> downLoad() { this.click();

    样子就类似于下图:
    在这里插入图片描述
    在data中定义一个变量addImg

     data() {
        return {
           adImg:require('../../../../public/aixin.png')
        };
      },
    

    定义一个事件

    <div class="text" @click="downLoad" id="mubanId">
              下载模板
            </div>
    
    downLoad() {
          this.click();
        },
        click() {
          var link = document.createElement("a");
          link.download = 'muban';
          link.href = this.adImg;
          link.click();
          link.remove();
        },
    
    展开全文
  • vue 实现点击下载文件

    2021-09-01 16:44:42
    vue实现点击下载文件文档 1.代码如下 //导出事件 Export() { let link = document.createElement("a"); //创建一个a标签 link.style.display = "none"; //将a标签隐藏 link.href = safe + "/work/plan/...
  • * vue中 *> <input v-show="false" ref="fileRef" type="file" @change="fileChange"> <el-button @click="uploadFile"></el-button> methods:{ // 按钮事件 触发input输入框 xuan () ...
  • 如何使用vue进行按钮点击后指定区域内容隐藏,再次点击按钮隐藏内容显示。实现思路:首选需要设置一个属性为true(show:true),然后使用v-if把show属性绑定到要显示与内容的标签身上,最后给点击按钮添加点击事件,当...
  • Vue 点击按钮下载视频

    千次阅读 2020-08-09 21:26:06
    download(loadAddress,id){...//下载产品 letfiles={}; files.name="作品压缩包"; //files.filePath=loadAddress letnotifyinfo=this.$notify({ title:'正在下载产品...', iconClass:'el-icon-loading' }); ...
  • 我们项目现在有这样一个需求,通过select元素来选择音频文件的名称,点击按钮可以进行试听。 话不多说,直接上代码: HTML: 提示声音: 请选择> label=item.label value=item.valueOpt> </el>
  • 代码实现 ... 解决了若文件为图片或浏览器支持的格式类型,点击下载会直接打开文件的问题, * 2. 下载文件时,浏览器会有闪动的问题 * * 页面内使用 * 1. 引入指令 import downLoad from '@/direc..
  • 场景 ...所以需要在页面上添加下载插件按钮,实现手动点击下载插件。实现效果如下 注: 博客:https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推.
  • const tbit = require('../tbit')// const filebtn = require("./filebtn")import filebtn from "./control/filebtn"import pager from "./control/pager.vue"export default {mounted:function (){var me = this// ...
  • vue点击图片,pdf,文件,预览 <div style="width: 50%; display: inline-block; vertical-align: bottom"> <div class="tit-top">上传图片</div> <div style="min-height: 151px"> <...
  • 最近项目中需要实现点击按钮下载文件的需求,前端用的vue,因为文件是各种类型的,比如图片、pdf、word之类的。这里后端是可以返回文件的地址给前端的,但我看了下网上各种五花八门的答案,感觉都不是我想要的。 ...
  • index.vue文件中: 点我 传递中介 <addForm show=formShow xss=removed></addForm> 引入组件,即是要弹出的组件 import addForm from './docsForm' export default { components: { addForm },
  • 本文给大家介绍js点击点击某个图标或按钮弹出文件选择框的实现代码,代码简单易懂,非常不错,感兴趣的朋友可以参考下
  • VUE 触发式二进制流文件下载 文件下载遇坑 文件下载时没有添加 responseType: 'blob’ 文件能够正常下载,但是获取后端的文件流数据为乱码无法正常使用。 通过点击事件进行文件下载: @click=‘download(row)’ ...
  • .vue 文件 // 点击下载 touchDowload (item) { // 将当前链接换成本地代理的方式 var baseUrl = '/ProxyDownload' + item.url.replace('https://file.hp.video', '') // 创建一个a节点插入的document var a = ...
  • 我添加了一个按钮,该按钮可删除当前图像,但是它的问题在于表单也正在提交,因此我想避免这种情况。 我只需要删除当前图像(如果存在)。 这是脚本:+ Remove imageexport default {props: ['imageSrc'],methods: {...
  • vue点击按钮实现文件下载 el-link

    千次阅读 2020-07-02 14:27:41
    需求:后端给一个下载链接,要实现点击按钮文件下载。解决如下: 在el-button外添加父级el-link,截图可以看到el-link通过编译后是一个a标签,el-link属性请查看https://element.eleme.cn/#/zh-CN/component/link ...
  • 导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果 icon=el-icon-upload type=primary size=mini click=importFile() >批量导入</el
  • vue 点击按钮增加一行的方法

    千次阅读 2020-12-23 04:41:45
    vue 点击按钮增加一行的方法如下所示:data() {return {customized_descs: [1],}},不要js,jq里面的方法了。以上这篇vue 点击按钮增加一行的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家...
  • vue点击下载项目中的文件

    千次阅读 2021-02-04 17:32:06
    1.将需要下载文件放在public中 2.代码如下 <a href="./2.0Axure.rplib" download="2.0Axure.rplib"> 下载 </a> 出现问题:代码完成之后点击没有马上可以实现下载,隔天才成功实现点击下载
  • vue实现动态按钮功能

    2020-12-29 02:21:34
    Vue是前台框架,可以独立完成前后端分离式web项目渐进式的javascript框架 ,今天我们来设计一个简单的动态按钮 具体效果图如下: 点击后会变成这样: 首先我们需要下载vue.js: https://vuejs.org/js/vue.min.js 将网页...
  • 浏览器本身只支持一个下载,当多个下载时只下载第一个,后续的下载会拦截,因此需要实现多个a标签同时下载需要 < el-dialog :title="‘下载列表’" v-dialogDrag v-if=“dialogFormVisible” id=“monitorStyle-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,637
精华内容 12,654
关键字:

vue点击按钮下载文件

vue 订阅