精华内容
下载资源
问答
  • Vue实现文件下载
    千次阅读
    2021-12-17 11:31:26

     前端新人一枚,诸多技术还在学习,各种原理尚不了解,如有错误请大佬指正

    将该方法绑定到按钮的点击事件上,即可实现文件下载

    Download(){
        axios
        .post('接口',{
          //如果没有要传给后台的数据这里可以为空,但最好留着这个花括号,不然后台可能将response当做数据
            },{
            responseType:'blob',
          },{
            headers: {
                  "Content-Type": "application/json;charset=UTF-8",
          },
          })
        .then((response)=>{
          console.log(response);
          //headers请求头的乱码数据转换为中文
          const fileName = decodeURI(response.headers['content-disposition'].split(';')[1].split('=')[1])
          //下载文件
          let blob = new Blob([response.data], {type: "application/vnd.ms-excel"})
              let objectUrl = URL.createObjectURL(blob) // 创建URL
              const link = document.createElement('a')
              link.href = objectUrl
              // link.download = '.xlsx'// 自定义文件名
              //这里是获取后台传过来的文件名
              link.setAttribute("download",fileName)
              link.click() // 下载文件
              URL.revokeObjectURL(objectUrl) // 释放内存
        })
        .catch((error)=>{
          console.log(error);
          alert('下载失败')
        })
      },

    关于文件下载还有很多方法,我所分享的只是其中一种 

    更多相关内容
  • 主要介绍了vue中点击按钮下载文件,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 本文实例为大家分享了springboot+vue实现文件上传下载的具体代码,供大家参考,具体内容如下 一、文件上传(基于axios的简单上传) 所使用的技术:axios、springboot、vue; 实现思路:通过h5 :input元素标签进行...
  • vue实现文件下载

    万次阅读 2021-01-21 18:30:16
    Vue浏览器文件下载最简单的方法就是用a链接实现,然后加一个download属性。让后端返回[blob]文件格式,需要传递 responseType: ‘blob’ 一、使用步骤 展示文件文件点击后查看方法为handlePreview <span style=...

    vue中文件下载

    前言

    Vue浏览器文件下载最简单的方法就是用a链接实现,然后加一个download属性。让后端返回[blob]文件格式,需要传递 responseType: ‘blob’

    一、使用步骤

    展示文件,文件点击后查看方法为handlePreview

    <span style="margin-top:50px;">附件</span>
            <el-upload 
                    action=""
                    list-type="text"
                    :on-preview="handlePreview"
                    disabled
                    :file-list="fileList">
            <i class="el-icon-plus"></i>
            </el-upload>
    

    二、使用步骤

    1.设置文件返回类型

    config.responseType='blob'
    

    如图所示:
    在这里插入图片描述

    2.前端请求接口方法

    handlePreview(file) {
            let data={}
            let typeArray=file.url.split(".")
            let type=typeArray[typeArray.length-1]
            debugger
            data.url=file.url
            data.name=file.name
            fileupload._getDownLoad(data).then((res) => {
                let url = window.URL.createObjectURL(new Blob([res]))
                let link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.setAttribute('download', file.name)
                document.body.appendChild(link)
                link.click()
            })
        }
    

    3.后端返回文件接口

    @RequestMapping(value = "/getDownLoad", method = RequestMethod.POST)
        public void getDownLoad(HttpServletResponse response,@RequestBody Imgurl imgurl) throws IOException {
            FileInputStream inputStream = null;
            try{
                File file = new File(imgurl.getUrl());
                inputStream = new FileInputStream(file);
                ByteArrayOutputStream os = new ByteArrayOutputStream();
                byte[] buffer = new byte[1024];
                int length;
                while ((length = inputStream.read(buffer)) != -1) {
                    os.write(buffer, 0, length);
                }
                byte[] data = os.toByteArray();
                response.resetBuffer();
                response.resetBuffer();
                response.setHeader("Content-Disposition", "attachment");
                response.addHeader("file-name",URLEncoder.encode(imgurl.getName(), "UTF-8"));
                response.addHeader("Content-Length", "" + data.length);
                response.setContentType("application/octet-stream; charset=UTF-8");
                IOUtils.write(data,response.getOutputStream());
            }
            catch (IOException e)
            {
                e.printStackTrace();
            }
            finally {
                if(inputStream != null)
                {
                    inputStream.close();
                }
            }
        }
    

    总结

    今天遇到一个vue下载文件的开发功能,按照正常方法请求一直报错,经过请教大神,用a链接简单的方法实现,本文仅仅简单记录自己的开发过程。

    展开全文
  • vue 实现文件下载

    2021-04-16 15:40:46
    // 实现文件下载 byte []buffer = new byte[1024]; try { InputStream is = new FileInputStream(file); OutputStream os= response.getOutputStream();//向浏览器写数据 while((len = is....

    1.前台

    按钮

       <el-button
                              size="mini"
                              icon="el-icon-edit-outline"
                              type="primary"                      
                              @click="fileDownload(scope.row)"
                            >下载附件</el-button>
    

    方法

    fileDownload(row){
           window.location.href = "http://localhost:后台端口号/fileDownload/"  + row.id ;
        },
    

    2.后台

    /**
    	 * 下载文件
    	 * @param request
    	 * @param response
    	 * @param id
    	 * @return
    	 * @throws MyException
    	 */
    	@RequestMapping(value = "/fileDownload/{id}")
    	public JsonResult<Object> fileDownload(HttpServletRequest request,HttpServletResponse response,@PathVariable("id") String id) throws Exception{
    		
    		DeviceSoftware deviceSoftware = deviceSoftwareServiceImpl.getDeviceSoftware(id);//根据文件id从表格中获取该文件的所有信息
    		if(deviceSoftware!=null){
    			File file = new File(deviceSoftware.getSwpath());//获取文件存在的地方
    			//设置返回文件信息
    			if(file.exists()) {
    			//可以保存为xls格式的excel文件(兼容老版本)
    			response.setContentType("application/vnd.ms-excel;charset=UTF-8");
    			response.setCharacterEncoding("UTF-8");//解决POST乱码
    			String filename = URLEncoder.encode(file.getName(), "UTF-8");
    			//设置响应头为文件下载, // 下载文件能正常显示中文
    			response.setHeader("content-disposition", "attachment;filename="+filename);
    			response.setContentLength((int)file.length());
    			int len = 0;
    			// 实现文件下载
    			byte []buffer = new byte[1024];
    			try {
    				InputStream is = new FileInputStream(file);
    				OutputStream os= response.getOutputStream();//向浏览器写数据
    				while((len = is.read(buffer)) != -1){
    					os.write(buffer,0,len);
    				}
    				is.close();
    				os.close();
    				System.out.println("Download the song successfully!");
    			}
    			catch (Exception e) {
    				System.out.println("Download the song failed!");
    			}
    	
    		}						
    		}
    		return null;    //一定要返回null,执行后不跳转
    	}
    
    展开全文
  • 使用Vue时,我们前端如何处理后端返回的文件流 首先后端返回流,这里我把流的动作拿出来了,我很多地方要用 /** * 下载单个文件 * * @param docId */ @GetMapping(/download/{docId}) public void download(@...
  • 主要介绍了.netcore+vue 实现压缩文件下载功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 本文实例为大家分享了vue实现文件上传读取及下载的具体代码,供大家参考,具体内容如下 文件的上传利用input标签的type=”file”属性,读取用FileReader对象,下载通过创建a标签实现 下载 ...
  • vue实现文件下载功能

    千次阅读 2020-12-24 14:40:48
    对于Vue实现一般的下载功能很简单,一般为了方便,在项目文件的api.js配置文件中添加一个下载方法即可,这里以以下download方法为例。将download这部分方法添加到api.js文件中即可。 api.js配置 export default { ...
    对于Vue中实现一般的下载功能很简单,一般为了方便,在项目文件的api.js配置文件中添加一个下载方法即可,这里以以下download方法为例。将download这部分方法添加到api.js文件中即可。

    api.js配置

    export default {
    //   下载关键代码
      download(url, params) {
        return new Promise((resolve, reject) => {
            axios({
            //   和后端协商好下载方法post/get?
            method: 'Post',
            url: baseUrl + url,
            data: params,
            headers: {
                'Content-Type': 'application/json',
                // 设置请求头携带的token
              token: JSON.parse(localStorage.getItem('userInfo')).token,
            },
            responseType: 'blob',
          })
            .then((res) => {
              console.log(res);
              const fileName = res.headers['content-disposition'].split('filename=')[1];
              const response = res.data;
              const r = new FileReader();
              r.onload = () => {
                try {
                  const resData = JSON.parse(this.result);
                  if (resData) {
                    if (resData.error_no === undefined) {
                      throw new Error('解析成功!');
                    } else if (resData.error_no !== '0') {
                      Message({
                        message: resData.error_info || 'Error',
                        type: 'error',
                        duration: 5 * 1000,
                      });
                    }
                  }
                } catch (err) {
                  // 兼容ie11
                  if (window.navigator.msSaveOrOpenBlob) {
                    try {
                      const blobObject = new Blob([response]);
                      window.navigator.msSaveOrOpenBlob(blobObject, fileName);
                    } catch (e) {
                      console.log(e);
                      reject(e);
                    }
                    return;
                  }
                  const url = window.URL.createObjectURL(new Blob([response]));
                  const link = document.createElement('a');
                  link.style.display = 'none';
                  link.href = url;
                  link.setAttribute('download', fileName);
                  document.body.appendChild(link);
                  link.click();
                }
              };
              r.readAsText(response);
              resolve();
            })
            .catch((error) => {
              console.log(error);
              Message({
                message: '下载失败!',
                type: 'error',
                duration: 5 * 1000,
              });
              reject(error);
            });
        });
      },
    };
    
    
    Vue实例中使用该方法。使用方式和get和post、put等接口请求方式一样。
    <template>
      <div class="contain">
        <div class="tableArea">
          <el-table v-loading="loading" :data="tableData" stripe>
            <!-- <template slot="empty" slot-scope="scope">
              <p>sadssadssadsadsdsadsa</p>
            </template> -->
            <el-table-column type="index" label="序号" width="100"></el-table-column>
            <el-table-column prop="fileOrgName" label="名称" min-width="180">
              <template slot-scope="scope">
                                           触发下载函数
                <div @click="downloadHandler(scope.row)">
                  <p style="color:#4880ff;cursor: pointer;">{{ scope.row.fileOrgName }}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="数据日期" min-width="180">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.createTime | createformat() }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="remainDay" label="数据表类型" min-width="180">
            </el-table-column>
            <el-table-column prop="updateTime" label="上传时间" min-width="180">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.updateTime | updateformat() }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="createUserName" label="上传人" min-width="180"></el-table-column>
          </el-table>
    
          <pagination :size="page.pageSize" :current="page.current" :total="page.total" @currentChange="handleCurrentChange" @sizeChange="handleSizeChange" />
        </div>
        <tips :dialogVisible="tipsVisible" @on-cancel="tipsVisible = false" @on-ok="enterCover"></tips>
      </div>
    </template>
    <script>
    import moment from 'moment';
    import tips from '../../components/tips';
    
    export default {
      filters: {
        createformat(val) {
          return moment(val).format('YYYY/MM/DD');
        },
        updateformat(val) {
          return moment(val).format('MM/DD HH:mm');
        },
      },
      components: {
        tips,
      },
      data() {
        return {
          fileList: [],
          tableData: [],
          fileAgain: null,
          loading: false,
          tipsVisible: false,
          page: {
            total: 1,
            current: 1,
            pageSize: 5,
          },
        };
      },
      created() {
        this.readExcel();
      },
      methods: {
        // 下载当前表单,使用方式和get和post、put等接口请求方式一样
        downloadHandler(val) {
          this.$api.download(`/file/downloadFile?fileId=${val.id}`).then((res) => {
            console.log(res);
          });
        },
      },
    };
    </script>
    
    
    
    展开全文
  • 主要为大家详细介绍了springboot整合vue实现上传下载文件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • SpringBoot+VUE实现文件下载功能

    千次阅读 2020-12-10 16:26:33
    需求:点击保存本地按钮,下载对应的文件(此项目是音视频,其他类型文件未测试) 后端接口: 我是直接在controller层写的。 在请求头里,设置了文件保存地址为文件名,因为后缀有.mp4,所以弹框自动识别为视频文件...
  • springBoot+vue实现文件下载功能

    千次阅读 2020-04-28 22:50:16
    springBoot+vue实现文件,图片浏览器下载功能 前端请求 export function down(id){ return request({ url:'/file/upload/down/'+id, method:'get', **responseType:'blob'** }) } 前端请求方法 引入请求的方法...
  • 主要介绍了vue中使用axios实现excel文件下载的功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • Springboot+Vue实现文件下载功能

    千次阅读 2020-04-06 11:40:39
    Springboot+Vue实现文件下载功能 之前写文件下载功能,看网上的代码很复杂,不容易懂(网上的博客越来越没水平,不知道是不是百度搜索引擎的问题),其实挺简单的,下面我分享下代码及效果 后端 package ...
  • SpringBoot+Vue实现文件下载

    千次阅读 2019-07-04 15:35:49
    1、前台vue代码,没有使用axios,用的是this.$http.post来实现的 this.$http({ url: this.$http.adornUrl('/stats/importExportUsers/downloadTemplate'), method: 'post', responseType: 'arraybuffer' })....
  • 主要为大家详细介绍了vue实现在线预览pdf文件下载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 基于springboot与vue.js开发的前后端分离的超大文件分片上传下载系统,拥有简洁漂亮的界面,实现了G级别文件极速上传下载,断点续传以及秒传功能
  • 主要介绍了vue+axios实现文件下载vue中使用axios的实例,需要的朋友可以参考下
  • // vue 中的调用方法 handleModelUpload() { alert('下载zip模板') axios({ method: 'GET', url: '/business/api/download', // params: { // // eslint-disable-next-line no-undef // reportRuleId: row....
  • 针对android系统不支持pdf文档在线预览,可通过引入pdf.js插件实现,其具体实现步骤如下 一、引入插件 方式一:npm install –save pdfjs-dist,安装完成后在vue项目的node_modules出现如下依赖 方式二:只引入pdf....
  • Vue 实现文件下载

    千次阅读 2018-11-29 10:33:36
    功能:点击导出按钮,提交请求,下载excel文件; 第一步:跟后端确认交付的接口的response header设置了 response header 以及返回了文件流。 第二步:修改axios请求的responseType为blob,以post请求为例: axios({...
  • 今天小编就为大家分享一篇在VUE实现文件下载并判断状态的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • VUE实现文件下载

    万次阅读 2019-02-01 15:52:30
    // 下载文件 download (data,row) { if (!data) { return } let url = window.URL.createObjectURL(new Blob([data])) let link = document.createElement('a') link.style.display = 'none' link.href = ...
  • 1.前端vue:模板下载与导入Excel 导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果 icon=el-icon-upload type=primary size=mini click=importFile() >...
  • 该案例实现前端Vue通过axios请求SpringBoot后台,实现文件下载功能。 filepack : 前端项目 8081端口。 fileServer: 后端项目 8080端口。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 172,152
精华内容 68,860
关键字:

vue实现文件下载