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

    2020-08-10 09:32:43
    // 自定义文件名 link.click() // 下载文件 URL.revokeObjectURL(objectUrl); // 释放内存 }, (error) => { console.log(error) } ) } 结束语: 希望这篇文章能帮助到大家。 喜欢的加个关注,点个收藏,给个赞~ ...
     allList() {
          var that = this;
          var data = this.listQuery;
          const link = document.createElement('a')
          that.$http.get('/api/operate/yjb/export', {
            params: data
          }, {
            emulateJSON: true
          }, { responseType: 'blob' }, {
            headers: {
              'Content-Type': 'application/vnd.ms-excel;charset=GBK'
    
            }
          }).then(function(res) {
              console.log(res);
              var data="\ufeff" +res.data;
              let blob = new Blob([data], { type: "application/vnd.ms-excel;charset=GBK" })
              let objectUrl = URL.createObjectURL(blob) // 创建URL
              link.href = objectUrl
              link.download = '文档名称' + res.headers.filename; // 自定义文件名
              link.click() // 下载文件
              URL.revokeObjectURL(objectUrl); // 释放内存
            }, (error) => {
              console.log(error)
            }
    
          )
    
        }

     

    结束语:

    希望这篇文章能帮助到大家。

    喜欢的加个关注,点个收藏,给个赞~ 大家一起成长

    展开全文
  • 第一种:文件流形式,第二种接口返回url地址一、文件流形式( responseType: 'blob',)js文件封装axios:export function controlsExport(params) { //微站站点导出return request({responseType: 'blob',url: '/ebap-...

    写在前面

    本文实现文件下载的两种方式。第一种:文件流形式,第二种接口返回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

    展开全文
  • 用Axios调用导出方法返回的文件流下载时控制台返回乱码 vue需要用 new Blob([data])来处理 后台接口 @PostMapping(value = “exportKeHuFormat”) @ApiOperation(value = “导出-客户信息导入模板”, notes = “”...

    用Axios调用导出方法返回的文件流下载时控制台返回乱码
    在这里插入图片描述
    在这里插入图片描述
    vue需要用 new Blob([data])来处理
    后台接口

     @PostMapping(value = "exportKeHuFormat")
        @ApiOperation(value = "导出-客户信息导入模板", notes = "")
        public void exportKeHuFormat(HttpServletRequest request, HttpServletResponse response){
            try {
                api.exportKeHuFormat(request,response);
            } catch (Exception e) {
                e.printStackTrace();
    
            }
        }
    

    前台方法

    axios.post(local+'kehu/exportKeHuFormat',
                  {},{
                    headers:{
                      'Authorization': sessionStorage.getItem('token')
                    },
                    responseType: 'blob',
                  }).then(res => {
                  let blob1 = new Blob([res.data]);//new Blob([res])中不加data就会返回[objece objece]内容(少取一层)
                  let fileName = '客户信息.xlsx';//下载文件名称
                  let elink = document.createElement('a');
                  elink.download = fileName;
                  elink.style.display = 'none';
                  elink.href = URL.createObjectURL(blob1);//创建一个DOMString包含了一个对象URL,该URL可用于指定源 参数对象的内容。
                  document.body.appendChild(elink);
                  elink.click();
                  URL.revokeObjectURL(elink.href); // 释放URL 对象
                  document.body.removeChild(elink);
                }).catch(err => {
    
                })
    
    展开全文
  • downLoadFile (url, name) { this.xhr = new XMLHttpRequest() this.xhr.open('GET', url, true) this....'') url 是后端接口全路劲 name 导出文件名称 转载于:https://www.cnblogs.com/taochengyong/p/10873480.html
    downLoadFile (url, name) {
                    this.xhr = new XMLHttpRequest()
                    this.xhr.open('GET', url, true)
                    this.xhr.responseType = 'blob'
                    var vmThis = this
                    this.xhr.onload = () => {
                        if (this.xhr.status === 200) {
                            if (this.xhr.response && this.xhr.response.size && this.xhr.response.size > 0) {
                                let file = this.xhr.response
                                let fileName = name
                                if ('msSaveOrOpenBlob' in navigator) {
                                    window.navigator.msSaveOrOpenBlob(file, fileName)
                                } else {
                                    let fileUrl = window.URL.createObjectURL(file)
                                    let a = document.createElement('a')
                                    a.download = fileName
                                    a.href = fileUrl
                                    document.getElementsByTagName('body')[0].appendChild(a)
                                    a.click()
                                    a.parentNode.removeChild(a)
                                    window.URL.revokeObjectURL(fileUrl)
                                }
                            }
                        } else {
                            //
                        }
                    }
                    this.xhr.setRequestHeader('x-manage-token', this.$store.state.userInfo.data.sessionId)
                    this.xhr.send()
                },this.downLoadFile(this.url+'/authc/jzmOrder/exportJzmOrder','')

    url 是后端接口全路劲    name 导出文件名称

    转载于:https://www.cnblogs.com/taochengyong/p/10873480.html

    展开全文
  • vue 文件流下载xlsx 功能实现

    千次阅读 2019-05-16 08:28:00
    downLoadFile (url, name) { this .xhr = new XMLHttpRequest() this .xhr.open( ...url 是后端接口全路劲 name 导出文件名称 转载于:https://www.cnblogs.com/taochengyong/p/10873480.html
  • 请求后后端会返回一堆乱码,这个是文件流,用 new blob 转换,然后生成url,直接就可以下载了。 this.axios.get(`/arap/getInWarehouseLabel/18944448300`,{responseType: 'arraybuffer'}) .then((res) => { ...
  • vue 文件流导出下载

    2019-11-22 15:19:44
    业务场景:点击下载按钮,... 关于文件名:我司后端将文件名放在请求头headers里,需要代码获取 请求响应消息Response 控制台打印结果: 文件流 ... * 文件流下载 * data:接口返回文件流 * fileName:文件名 ...
  • vue实战 流文件下载

    2020-07-20 15:48:44
    vue ts 流文件 excel下载
  • 文件下载 文件流下载 vue element
  • vue使用文件流下载文件

    千次阅读 2020-04-02 11:02:38
    使用node做了转发,前端请求数据,后端直接返回数据,于是使用node将数据生成了excel文件(这一步详见文章node生成exce),然后返回给前端二进制文件流 第一步:安装Blob npm install blob Blob详解:...
  • vue下载流文件

    2020-05-11 18:20:23
    实现思路:点击下载按钮请求后端接口,获取文件流下载时文件显示的名称,a标签触发 <span class="table_look" @click="toDownload(scope.$index,scope.row)" >下载</span> <a ref="download" :...
  • 今天遇到一个问题,就是下载的zip文件打不开,一直显示文件被损坏。 本来觉得是后端的问题,但是排除了好久,确实没有问题,postman也实验成功。 后来发现系统main.js中引入了mock数据,影响了axios请求,造成了...
  • vue下载文件流

    2020-09-25 15:43:03
    下载文件流 1.第一种 element-ui基础框架上的一个下载 {responseType: ‘Blob’} 代码封装在untils.js的一个单独文件中 /** * 判断是否IE浏览器,为IE返回true * @returns {boolean} */ isIE() { let ...
  • Vue下载流文件

    千次阅读 2019-09-16 17:35:36
    //创建下载的链接 downloadElement . href = href ; downloadElement . download = fileName ; //下载后文件名 document . body . appendChild ( downloadElement ) ; downloadElement . click ( ) ; //...
  • vue blob流下载zip文件

    千次阅读 2019-11-19 13:57:54
    asset_zip(this.delarr).then((res) => { const content = res.data const blob = new Blob([content],{type:"application/zip"}) ...不能用base64转成blob,不然会文件大小对里边没东西,下载其他类型修改type,
  • vue 下载 流文件 我们在有时候会接到导出的任务,这里如果是后端给你下载地址的话,这样会好很多,但是也有很多是后端返回的流文件,这个时候 后台返回的 然后我们需要转码 方法一: 通过插件...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 720
精华内容 288
关键字:

vue文件流下载

vue 订阅