zoukankan      html  css  js  c++  java
  • 文件下载问题

    文件下载不能通过ajax请求接口下载,也不能通过vue 的axios请求接口下载。可以从以下方式:

    1.通过url下载 
    2.location.href 
    3.form提交直接下载 
    4.HTML5 a.download结合blob对象进行下载

    第一种方式: 
      第一种方法是前后端的接口只给了一个API请求: 
      前端第一个实现是使用a标签,通过href跳转下载

    第二种方式:

      直接把 DataURLs 或者 BlogURLs 传到浏览器地址中触发下载。

    window.location.href=url//本窗口打开下载
    window.open(url);//新窗口打开下载
    

    第三种:

    标签的download是HTML5标准新增的属性,作用是指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件。
    这种是定义的接口不是下载文件的路径,而是通过API可以获得文件的内容,由前端把内容写入到文件中,这种方法是通过获取文件信息,在网页上利用click事件,创建一个文件,然后将文件信息写入到文件中,然后保存

          this.content = content
          this.filename = filename
          const blob = new Blob([this.content])
          if (window.navigator.msSaveOrOpenBlob) {
            // 兼容IE10
            navigator.msSaveBlob(blob, this.filename)
          } else {
            //  chrome/firefox
            let aTag = document.createElement('a')
            aTag.download = this.filename
            aTag.href = URL.createObjectURL(blob)
            aTag.click()
            URL.revokeObjectURL(aTag.href)
          }
    

      第四种

    不需要我们处理返回二进制流直接下载,非常方便
    form的action设置为接口地址,method设置为post,Post到后台的数据设置为input的属性 name = key,value = value的形式,如果有多个key、value的值要传递,那么就设置多个input来分别储存单个的key、value;
    如果请求的接口可以不需要参数,那么input还是必须要一个,如果不要得话 会引起接口报错
    原理:form的action相当于一个浏览器本页签/页面的一个请求,不会被后台,前台的路由拦截。所以能够提交成功。

    注意点:如果设置method为get,在action中的uri添加了参数的话,想用这个参数替代input的key、value形式来提交到后台,这参数是没有效果的,后台拿不到这些参数,真正的参数还是以input的name、value的形式储存,在submit方法执行后传递到后台。
    这样我们就是实现了文件下载,但是表单提交的数据一般是简单的键值对,如果传参比较复杂可以考虑将表单序列化提交。

    因为项目是基于vue的,而且提交的请求参数涉及很多参数,比较复杂,所以采用了方法三来实现

          axios.post('/rest/inventory/oh_status/info/excel', {
            site: this.selectedsite,
            bu: this.selectedbu,
            ohHealthStatus: this.selectedtitle,
            ohHealthRootcause: this.selectedblock,
            search: this.search,
            sort: this.sort
          }, {responseType: 'arraybuffer'}).then(this.ExportFile).catch(function (error) {
            console.log(error)
          })
    
         this.content = content
          this.filename = filename
          const blob = new Blob([this.content])
          if (window.navigator.msSaveOrOpenBlob) {
            // 兼容IE10
            navigator.msSaveBlob(blob, this.filename)
          } else {
            //  chrome/firefox
            let aTag = document.createElement('a')
            aTag.download = this.filename
            aTag.href = URL.createObjectURL(blob)
            aTag.click()
            URL.revokeObjectURL(aTag.href)
          }
    

      注意我们发送请求的时候一定要写上responseType,{responseType: 'arraybuffer'} 否则下载下来的文件打不开!!!

  • 相关阅读:
    Linux ALSA音频库(一) 交叉编译 详细说明
    在KEIL下查看单片机编程内存使用情况
    Linux Socket
    QT报错随手记
    Cortex-M3双堆栈MSP和PSP+函数栈帧
    Linux命令
    cdev_alloc与cdev_init区别
    一些编译报错
    SFUD+FAL+EasyFlash典型场景需求分析,并记一次实操记录
    RTThread DFS文件系统使用: 基于使用SFUD驱动的SPI FLASH之上的ELM FATFS文件系统
  • 原文地址:https://www.cnblogs.com/weilizou/p/10772857.html
Copyright © 2011-2022 走看看