精华内容
下载资源
问答
  • 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实现文件下载

    万次阅读 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 = ...

    第一:请求的responseType为blob,以post请求为例:

    downloadClick(row){
            let entity = {
              id: row.id,
              filename: row.filename,
            }
            this.$http.post('/v1/FileManage/downloadFile', entity ,{responseType: 'blob'}).then((response)=> {
             this.download(response.body,row)
            });
          },

    第二步:请求成功,拿到response里面的数据后,调用download函数(创建a标签,设置download属性,插入到文档中并click)

    methods: {
        // 下载文件
        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 = url
            // 获取文件名
            // download 属性定义了下载链接的地址而不是跳转路径
            link.setAttribute('download', row.filename)
            document.body.appendChild(link)
            link.click()
        }
    }

    传送门:后台代码:https://blog.csdn.net/mibi8840/article/details/86742134

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

    千次阅读 2018-11-29 10:33:36
    功能:点击导出按钮,提交请求,下载excel文件; 第一步:跟后端确认交付的接口的response header设置了 response header 以及返回了文件流。 第二步:修改axios请求的responseType为blob,以post请求为例: axios({...

    功能:点击导出按钮,提交请求,下载excel文件;

    第一步:跟后端确认交付的接口的response header设置了

    response header

    以及返回了文件流。

    第二步:修改axios请求的responseType为blob,以post请求为例:

    axios({
        method: 'post',
        url: 'api/user/',
        data: {
            firstName: 'Fred',
            lastName: 'Flintstone'
        },
        responseType: 'blob'
    }).then(response => {
        this.download(response)
    }).catch((error) => {
    
    })
    

    第三步:请求成功,拿到response后,调用download函数(创建a标签,设置download属性,插入到文档中并click)

    methods: {
        // 下载文件
        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实现word或pdf文档导出的功能,后端返回一个文档流(下图),然后前端对文档流做处理进行下载,

          import axios from 'axios';      
          axios.get(`url`, { //url: 接口地址
            responseType: `arraybuffer` //一定要写
          })
          .then(res => {
            if(res.status == 200){
              let blob = new Blob([res.data], {
                type: `application/msword` //word文档为msword,pdf文档为pdf
              });
              let objectUrl = URL.createObjectURL(blob);
              let link = document.createElement("a");
              let fname = `我的文档`; //下载文件的名字
              link.href = objectUrl;
              link.setAttribute("download", fname);
              document.body.appendChild(link);
              link.click();
            }else {
              this.$message({
              type: "error",
              message: "导出失败"
              })
            }
          })
    
    

    两种方式任选

    展开全文
  • JAVA Vue实现文件下载

    2020-11-27 16:09:32
    JAVA Vue实现文件下载 后台controller @GetMapping("/DownloadWorkorderFile") @ResponseBody public void DownloadWorkorderFile(HttpServletRequest request, HttpServletResponse response, String filePath){...

    后台controller

        @GetMapping("/DownloadWorkorderFile")
        @ResponseBody
        public void DownloadWorkorderFile(HttpServletRequest request, HttpServletResponse response, String filePath){
            File file = new File(filePath);
            // 取得文件名。
            String fileName = file.getName();
            InputStream fis = null;
            try {
                fis = new FileInputStream(file);
                request.setCharacterEncoding("UTF-8");
                String agent = request.getHeader("User-Agent").toUpperCase();
                if ((agent.indexOf("MSIE") > 0) || ((agent.indexOf("RV") != -1) && (agent.indexOf("FIREFOX") == -1)))
                    fileName = URLEncoder.encode(fileName, "UTF-8");
                else {
                    fileName = new String(fileName.getBytes("UTF-8"), "ISO8859-1");
                }
                response.reset();
                response.setCharacterEncoding("UTF-8");
                response.setContentType("application/force-download");// 设置强制下载不打开
                response.addHeader("Content-Disposition", "attachment;filename=" + fileName);
                response.setHeader("Content-Length", String.valueOf(file.length()));
    
                byte[] b = new byte[1024];
                int len;
                while ((len = fis.read(b)) != -1) {
                    response.getOutputStream().write(b, 0, len);
                }
                response.flushBuffer();
                fis.close();
            }catch (IOException e) {
                throw new RuntimeException(e);
            }
    
        }
    
    

    前端Vue

    <template>
      <div>
        <el-button type="primary" @click="download">下载</el-button>
      </div>
    </template>
    
    <script>
    
    export default {
      data() {
        return {
        };
      },
      methods: {
        // 下载事件
        download() {
          var path = '/home/axs-spring/data/ceshi.png';
          window.open("http://localhost:8041/Management/DownloadWorkorderFile?filePath=" + encodeURI(path));
        },
      }
    };
    </script>
    
    展开全文
  • Springboot+Vue实现文件下载功能

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

    2020-12-24 14:40:48
    对于Vue实现一般的下载功能很简单,一般为了方便,在项目文件的api.js配置文件中添加一个下载方法即可,这里以以下download方法为例。将download这部分方法添加到api.js文件中即可。 api.js配置 export default { ...
  • vue实现文件下载其实很简单,直接给出超级链接即可。比如: <a href="下载文件的链接">提示信息</a> 如果与Grails配合,相应的后台代码: def downLoadFile(params) { def result = [] if ...
  • 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实现文件下载的两种方式

    万次阅读 2019-05-29 21:27:10
    将列表数据导出到excel文件下载到本地 <button @click="exportFile">导出</button> 代码实现 调用接口,将后端返回的流数据new一个文件对象 exportFile () { Vue.prototype.$axios[method](...
  • 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' })....
  • 需求:点击保存本地按钮,下载对应的文件(此项目是音视频,其他类型文件未测试) 后端接口: 我是直接在controller层写的。 在请求头里,设置了文件保存地址为文件名,因为后缀有.mp4,所以弹框自动识别为视频文件...
  • // vue 中的调用方法 handleModelUpload() { alert('下载zip模板') axios({ method: 'GET', url: '/business/api/download', // params: { // // eslint-disable-next-line no-undef // reportRuleId: row....
  • 1.文件下载接口要用Get,而不是Post,使用post会出现很多问题,尤其是在前端解析数据的时候,只能拿到一串二维码。 2.axios路径参考:this.$axios.get("/a/review/download/a.jpg",{ responseType:'blob' }) 3.若...
  • 文件下载提示 失败-未发现文件的解决思路 前端vue中动态创建a标签下载文件 <div name="downloadfile" onclick="downloadClick()">下载模板</div> //下载模板 downloadClick:function(event){ var link ...
  • 一、公司项目需求要求导出表格数据,以excel文件导出,后端python处理已经可以直接将数据导出并生成Excel文件,但是前后台传输是不... * vue从后台获取数据,并导出EXCEL文件 * @param value * @returns {*} * @c...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,408
精华内容 563
关键字:

vue实现文件下载

vue 订阅