精华内容
下载资源
问答
  • vue 文件下载

    千次阅读 2018-08-30 16:35:54
    vue 文件下载 1.一般我们下载文件基本会使用a标签下载 <a href="xxxx.txt" download="文件名.txt">点击下载</a> 但是有个问题,当浏览器可以打开这些...

    文件下载
    1.一般我们下载文件基本会使用a标签下载

    <a href="xxxx.txt" download="文件名.txt">点击下载</a>
    
    js方式
    var aTag = document.createElement('a')
    		aTag.download = '你的文件名'
            aTag.href = '你的文件地址'
            aTag.click() // 执行一次a标签的点击事件
    

    但是有个问题,当浏览器可以打开这些文件的时候,a标签会进行一个跳转,比如路径是音频文件时,会跳转播放音频。而且a标签下载一般作为文件和页面在同一个域下使用,也就是文件和页面在同一服务器,且地址为相对地址。

    2.window.location.href和window.location
    我们使用window.location.href有时是可以下载文件的,注意是“有时”,当文件是可以被浏览器读取跳转时,页面会跳转到相应页面读取文件内容和读取音频文件相似。

    	window.location.href在IE下需要兼容一般处理为
    	window.location.href = urls?name=xxx
    	部分火狐版本不支持window.location.href 
    	所以兼容火狐和IE写成window.location= urls?name=xxx
    
    	window.location.href = urls; // 本窗口打开下载
    	window.open(urls, '_blank'); // 新开窗口下载
    

    3.使用API提供的Blob下载《会出现文件损坏,未解决》

    	let fileName = xxx.mp3 // 文件地址
    	let downName = (new Date()).getTime()+".mp3" // 文件下载名称
          const blob = new Blob([fileName])
          if (window.navigator.msSaveOrOpenBlob) {
            // 兼容IE10
            navigator.msSaveBlob(blob, downName)
          } else {
            //  chrome/firefox
            let aTag = document.createElement('a')
            aTag.download = downName
            aTag.href = URL.createObjectURL(blob)
            aTag.click()
            URL.revokeObjectURL(aTag.href)
          }
    

    4.使用后台接口 用1和2的两种方式下载

    展开全文
  • 文件下载 文件流下载 vue element

    vue 文件下载,后台返回文件流

    下载呢,无非就是两种方式,第一种呢 ,就是接受后台返回的url,然就a标签下载文件,第二种呢,就说接下来要说的这种,后台返回文件流。

    在这里插入图片描述
    怎么样,没用过的小伙伴,看到这个返回结果是不是第一反应就说后台接口出错了,然后抓紧甩锅,那么当后台给你返回这种文件流,我们应该怎么处理呢。
    为了方便其它,接下来,附上一份原生的请求结果处理,当然了,不管是原生还是后封装的,请求结果都一样。

    来喽来喽

    //点击按钮,下载文件
    
    //第一步,引用axios
    import axios from 'axios'
    
    //第二步,调用接口
    axios({
       method: 'GET',
        url: process.env.VUE_APP_BASE_API + '/base/base-bom/download',
        token: getToken(),
        responseType: 'blob'
      }).then(res => {
        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
        const url = window.URL.createObjectURL(blob)
        window.open(url, '_blank')
      }).catch(err => {
        this.$message.error('文件下载失败!')
    })
    
    //第三步
    //没有第三步了,已经下载成功了
    

    因为我这个项目的需求呢,是点击一个按钮,然后下载
    如果小伙伴在使用element的< el-upload >的话,就直接在:on-success=“onSuccessFiles” 中操作就好啦。

    如果对你产生帮助的话,动动可爱的小手,点个赞呗~

    展开全文
  • vue.js vue文件下载

    2019-07-22 16:47:41
    vue.js ①实例化vue var vm=new vue({ }) ②Vue 构造器中需要哪些内容 当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将...

    vue.js

    ①实例化vue
       var vm=new vue({

        }) 

    ②Vue 构造器中需要哪些内容

    当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。

    除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来

     

    展开全文
  • 写在前面本文实现文件下载的两种方式。第一种:文件流形式,第二种接口返回url地址一、文件流形式( responseType: 'blob',)js文件封装axios:export function controlsExport(params) { //微站站点导出return ...

    写在前面

    本文实现文件下载的两种方式。第一种:文件流形式,第二种接口返回url地址

    一、文件流形式( responseType: 'blob',)

    js文件封装axios:

    export function controlsExport(params) { //微站站点导出

    return request({

    responseType: 'blob',

    url: '/ebap-business/a/control/exportControl',

    method: 'post',

    data:params

    })

    }

    image.png

    vue文件引入axios api:

    import {controlsExport} from '@/api/daManage'

    vue文件调用方法:

    methods: {

    exportExl(){

    controlsExport(this.listQuery).then(response => {

    const blob = new Blob([response]);//new Blob([res])中不加data就会返回下图中[objece objece]内容(少取一层)

    const fileName = '模板.xls';//下载文件名称

    const elink = document.createElement('a');

    elink.download = fileName;

    elink.style.display = 'none';

    elink.href = URL.createObjectURL(blob);

    document.body.appendChild(elink);

    elink.click();

    URL.revokeObjectURL(elink.href); // 释放URL 对象

    });

    }

    }

    二、接口返回url地址(正常接口获取就行)

    methods: {

    handleDownload(row) {

    loadFile({id:row.id}).then(res =>{

    const ele = document.createElement('a');

    ele.setAttribute('href', res.data); //设置下载文件的url地址

    let str=res.data.substring(res.data.lastIndexOf("/"));

    let str2=str.split('/')[1];

    ele.setAttribute('download',str2);//用于设置下载文件的文件名

    ele.click();

    })

    }

    }

    image.png

    展开全文
  • vue文件下载,java读取SFTP文件通过流的方式输出到前端 java后台Controller层代码 @RequestMapping("downloadFile") public void downLoadFile(HttpServletRequest req, HttpServletResponse response) { String...
  • 请问一下在Vue或者JS里面如果我想一次性下载多个文件(我用了个file对象数组),网上方法目前是说用a标签配合href和download,但是这只能点一次下载一个文件,我现在想点一次下载多个文件,并且能够把他们放入一个...
  • vue 文件下载(需调用接口)

    千次阅读 2019-09-26 01:49:26
    methods:{ //下载文件 filerightDown(index,fileName) {//index 接口参数 fileName文件名字 var _this = this; var fileName = fileName; this.$http({ method: "post", ...
  • 半路出家,很长一段时间我都以为下载时就只能下载文件,要是后端返回错误信息,由于响应类型是blob,所以错误提示不了。 花了半天时间找到一些资料说能同时处理下载和提示错误信息,尝试了一下,确实可行,特此记录...
  • 文件下载用form表单提交。 downloadFile(index,row){ var user = this.$getCookie().getLegalName(); var url = this.file_im_transmit_api+"/files-im/file-info/downLoad"; var form = document....
  • http://www.jb51.net/article/108457.htm 转载于:https://www.cnblogs.com/luoliangfei/p/7479174.html
  • responseType: 'blob'//注意:一定要定义返回数据类型,否则获取到的文件流无法解析,下载文件会无数据 }).then(function (response) { console.log(response); if(response.status == '200'){ download...
  • Vue实现文件上传和文件下载

    万次阅读 2018-08-22 22:09:55
    文件下载文件下载通常有几种方法 1.通过url下载 2.location.href 3.form提交直接下载 4.HTML5 a.download结合blob对象进行下载 第一种方式: 第一种方法是前后端的接口只给了一个API请求: 前端第一个...
  • 前端vue文件下载的几种方式

    万次阅读 多人点赞 2019-04-03 10:05:23
    第一种方式是前端创建超链接,通过a标签的链接向后端服务发get请求,接收后端的文件流,非常简单: <a :href='"/user/downloadExcel"' >下载模板</a> 另一种情况是创建div标签,动态创建a标签: <...
  • vue.js下载文件有个同学不知道如何去下载文件,早上比较忙,弄了一份代码给他。晚上回来,发现不对。现在整理一下,案例,下载一张图片基于axios需要有axiosimport axios from 'axios'get请求: // get请求 request...
  • vue下载文件

    2019-10-16 16:46:48
    vue使用文件下载文件 1.前端代码 上传的选择框 <el-table class="table" :data="tableData" style="width: 100%" highlight-current-row empty-text="下载测试" cell-mouse...
  • vue实现文件下载

    2021-01-21 18:30:16
    vue文件下载 前言 Vue浏览器文件下载最简单的方法就是用a链接实现,然后加一个download属性。让后端返回[blob]文件格式,需要传递 responseType: ‘blob’ 一、使用步骤 展示文件,文件点击后查看方法为...
  • let self = this;self.$axios({url: URL地址,type: "get",responseType: "blob"}).then(res =&...res) {this.$message.error("下载失败");return;} else {if (!!window.ActiveXObject || "ActiveXObject" in window...
  • vue 文件下载

    2020-08-10 09:32:43
    // 自定义文件名 link.click() // 下载文件 URL.revokeObjectURL(objectUrl); // 释放内存 }, (error) => { console.log(error) } ) } 结束语: 希望这篇文章能帮助到大家。 喜欢的加个关注,点个收藏,给个赞~ ...
  • vue进行文件下载

    千次阅读 2018-12-19 19:56:00
     总结一下,最近在vue中实现一个文件下载的功能,用了vue中ajax的方式请求下载接口, 但是返回报错,在网上查询之后,找到用ajax请求下载文件报错的原因:ajax方式请求的数据只能存放在javascipt内存空间, 可以...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,135
精华内容 3,254
关键字:

vue文件下载

vue 订阅