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

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

    下载文件流

    1.第一种
    element-ui基础框架上的一个下载 {responseType: ‘Blob’}
    代码封装在untils.js的一个单独文件中

    
      /**
       * 判断是否IE浏览器,为IE返回true
       * @returns {boolean}
       */
      isIE() {
        let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        let isIE =
          userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
        let isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
        let isIE11 =
          userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1;
        if (isIE || isEdge || isIE11) {
          return true;
        } else {
          return false; //不是ie浏览器
        }
      }
    
      _webDownLoadFileConfirm(fileName, blob) {
        if (!this.isIE()) {
          // 非IE下载
          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 对象
          document.body.removeChild(elink);
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
      }
    
    
      webDownLoadFile(fileName, blob) {
        if (!fileName || !blob) {
          return false;
        }
        if (!blob.type) {
          Message.error("下载失败");
          return false;
        }
        if (blob.type === "application/json") {
          let reader = new FileReader();
          reader.readAsText(blob, "utf-8");
          reader.onload = () => {
            let result = JSON.parse(reader.result);
            if (result.result) {
              this._webDownLoadFileConfirm(fileName, blob);
            } else {
              Message.error(result.info || "下载失败");
            }
          };
        } else {
          this._webDownLoadFileConfirm(fileName, blob);
        }
      }
    

    使用:
    第一步 :引入文件

    import { utils } from "@utils/utils"; //博主自己的文件路径
    

    第二步:在下载点击事件上面使用

       downRowEvent() {
            //请求接口将接口返回数据res {responseType: 'Blob'}使用就可以了
             utils.webDownLoadFile(`名字`, res);
        },
    

    第二种:

    const download = (id, name) => {
      const aUrl = url  + id
      const a = document.createElement('a')
      a.style.display = 'none'
      a.href = aUrl
      a.target = '_blank'
      a.setAttribute('download', name)
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    }
    

    引入使用

      download(id, name)
    
    展开全文
  • vue 下载文件流

    万次阅读 2018-12-04 09:58:46
    , kalman_btn() { var that = this; that.axios({ method: 'post', url: 'kalman/export', data: { token: http.getToken() }, responseType: 'blo...
     , kalman_btn() {
          var that = this;
          that.axios({
            method: 'post',
            url: 'kalman/export',
            data: {
              token: http.getToken()
            },
            responseType: 'blob'
          }).then(response => {
            console.log(response)
            that.download(response)
          }).catch((error) => {
    
          })
        }
    //方法 
        , download (data) {
          if (!data) {
              return
          }
          let url = window.URL.createObjectURL(new Blob([data]))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', 'excel.xlsx')
    
          document.body.appendChild(link)
          link.click()
      }
    
    展开全文
  • vue下载文件流图片

    2021-01-11 17:37:31
    我的开发情景是:点击下载-----向后台发出请求-----后台返回图片的文件流 开发目标是:点击下载-----即可下载图片 我的代码: axios({ method: 'post', url: 'UCConfig/QRcode', data: { channel_user_id: row....
    • 我的开发情景是:点击下载-----向后台发出请求-----后台返回图片的文件流
    • 开发目标是:点击下载-----即可下载图片

    我的代码:

    axios({
        method: 'post',
        url: 'UCConfig/QRcode',
        data: {
            channel_user_id: row.channel_user_id,
        },
        responseType: 'blob'
    }).then(res => {
        const blob = new Blob([res.data])
        const fileName = 'qudaoerweima.jpg'
        const dlink = document.createElement('a')
        if ('download' in document.createElement('a')) { // 非IE下载
    	    const dlink = document.createElement('a')
    	    dlink.download = fileName
    	    dlink.style.display = 'none'
    	    dlink.href = URL.createObjectURL(blob)
    	    document.body.appendChild(dlink)
    	    dlink.click()
    	    URL.revokeObjectURL(dlink.href) // 释放URL 对象
    	    document.body.removeChild(dlink)
    	} else { // IE10+下载
    	    navigator.msSaveBlob(blob, fileName)
    	}
    });
    

    提醒和解释:

    • responseType: 'blob' 是设置返回值为blob类型。
    • res.data 指后台返回图片的文件流
    • const fileName = 'qudaoerweima.jpg' 改变后缀名等于改变下载文件的后缀名,即把.jpg换成.png那么下载的就是 .png 类型的图片,换成 .pdf ,下载的就是 pdf 文件。由此可以推断出,此种方法亦适合下载 pdf 等其它文件流。
    • dlink 是模拟a标签点击下载用的。
    • 百度时发现其他人有出现因为 mock.js 而不能正常下载的情况----- mockjs 初始化的时候给拦截响应设置了 responseType:'' ,所以可以尝试下屏蔽掉 mockjs 。找到这行代码 require('@/mock') 并注释,重启项目再进行测试。

    mock模块会影响原生的ajax请求,使得服务器返回的blob类型变成乱码

    额外扩展下vue使用 axios 请求后台接口的两种方式:

    1. 使用别名进行请求( axios.get 或者 axios.post等)
    axios.post('/user', {
      firstName: 'Fred',
      lastName: 'Flintstone'
    })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
    
    1. 通过向 axios 传递相关配置来创建请求
    // 发送 POST 请求
    axios({
      method: 'post',
      url: '/user/12345',
      responseType: 'blob',
      data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    });
    

    了解更多axios:https://www.kancloud.cn/yunye/axios/234845

    展开全文
  • 使用Vue时,我们前端如何处理后端返回的文件流 首先后端返回流,这里我把流的动作拿出来了,我很多地方要用 /** * 下载单个文件 * * @param docId */ @GetMapping("/download/{docId}") public void download...

    使用Vue时,我们前端如何处理后端返回的文件流

    首先后端返回流,这里我把流的动作拿出来了,我很多地方要用

        /**
         * 下载单个文件
         *
         * @param docId
         */
        @GetMapping("/download/{docId}")
        public void download(@PathVariable("docId") String docId,
                             HttpServletResponse response) {
            outWrite(response, docId);
        }
        
    	/**
         * 输出文件流
         * @param response
         * @param docId
         */
        private void outWrite(HttpServletResponse response, String docId) {
            ServletOutputStream out = null;
            try {
                out = response.getOutputStream();
                // 禁止图像缓存。
                response.setHeader("Pragma", "no-cache");
                response.setHeader("Cache-Control", "no-cache");
                response.setDateHeader("Expires", 0);
                byte[] bytes = docService.downloadFileSingle(docId);
                if (bytes != null) {
                    MagicMatch match = Magic.getMagicMatch(bytes);
                    String mimeType = match.getMimeType();
                    response.setContentType(mimeType);
                    response.addHeader("Content-Length", String.valueOf(bytes.length));
                    out.write(bytes);
                }
                out.flush();
            } catch (Exception e) {
                UnitedLogger.error(e);
            } finally {
                IOUtils.closeQuietly(out);
            }
        }
    

    前端这里我引入了一个组件 js-file-download

    npm install js-file-download --save
    

    然后在Vue文件中添加进来

    import fileDownload from "js-file-download";
    
       // 文档操作列对应事件
        async handleCommand(item, data) {
          switch (item.key) {
            case "download":
              var res = await this.download(data);
              return fileDownload(res, data.name);
            ...
            default:
          }
          // 刷新当前层级的列表
          const folder = this.getLastFolderPath();
          this.listClick(folder.folderId, folder.name);
        },
        // 下载
        async download(row) {
          if (this.isFolder(row.type)) {
            return FolderAPI.download(row.id);
          } else {
            return DocAPI.download(row.id);
          }
        },
    

    docAPI js 注意需要设置responseType

    /**
     * 下载单个文件
     * @param {*} id
     */
    const download = (id) => {
      return request({
        url: _DataAPI.download + id,
        method: "GET",
        responseType: 'blob'
      });
    };
    

    这样即可成功下载

    展开全文
  • 文件流下载需要注意的是 responseType: ‘blob’ ,否则下载的文件不能正确打开。但是当数据库返回400时,捕获不到error的错误信息,因为responseType设置了固定的返回格式。 export function ExportWeiXinOrder...
  • vue使用文件流下载文件

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

    2021-03-02 10:58:33
    Vue 下载 blob 文件 // 下载文件 showFile(item) { this.$http({ method: 'post', url: '/fileApi/downLoadFile', responseType: 'blob', data: { 'flieName': item.fileName }, }).then
  • vue下载流文件

    2020-05-11 18:20:23
    实现思路:点击下载按钮请求后端接口,获取文件流下载时文件显示的名称,a标签触发 <span class="table_look" @click="toDownload(scope.$index,scope.row)" >下载</span> <a ref="download" :...
  • 这篇文章主要为大家详细介绍了vue实现下载文件流完整前后端代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下使用Vue时,我们前端如何处理后端返回的文件流首先后端返回流,这里...
  • Vue下载数据流文件

    2020-08-14 10:57:43
    数据处理代码如下: const { data } = responce let url = new Blob([data], { type: data.type } if (window.navigator && window.navigator.msSaveBlob) { try { window.navigator.msSaveBlob(url...
  • java实现文件流下载 java Controller代码 @ApiOperation(value = "文件下载") @ApiImplicitParams({ @ApiImplicitParam(name = "filePath", value = "文件路径", required = true), @ApiImplicitParam(name = ...
  • vue下载excel流文件

    千次阅读 2019-10-02 11:23:54
    let elink = document.createElement('a') // 非IE下载 if ('download' in elink ) { elink.download = "XXX" // 文件名字 elink.style.display = 'none' elink.href = URL.createObjectURL(blob) ...

空空如也

空空如也

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

vue下载文件流

vue 订阅