zoukankan      html  css  js  c++  java
  • axios下载pdf

    一般情况下,网页上下载资源,都是通过<a href="https://aaa.com/download?a=b">选组</a>连接跳转之后,会自动下载,说白了就是get请求
    这种是最简单的,但是有时候满足不了要求,比如添加header参数等。

    postman是个好东西,可以通过点击Send and Download来实现。如果只是进行send操作,那返回的就是流数据

    前端用的axios发起的请求,那axios如果发送下载操作呢

      function downloadFile () {
        let data = {
          'pageSize': 10,
          'producer': 3,
          'country': 'ke'
        }
    
        axios({
          method: 'get',
          url: 'http://127.0.0.1:9090/download',
          params: data,
          responseType: 'blob'
        }).then((res) => {
            console.log('headers', res.headers)
            let fileName = res.headers['content-disposition'].split('=')[1]
            handle(res.data, fileName)
          }
        )
      }
    
      function handle (data, fileName) {
        // 文件导出
        if (!data) {
          return
        }
        let url = window.URL.createObjectURL(new Blob([data], { type: 'application/pdf' }))
    
        const a = document.createElement('a')
        a.style.display = 'none'
        a.download = fileName
        a.href = url
        a.click()
        if (document.body.contains(a)) {
          document.body.removeChild(a)
        }
      }
    

    注意点

    1. type: 'application/pdf' 是需要处理下,如果指定为pdf,那下载的文件名后缀就是pdf。
    2. 响应头'content-disposition'如果为空,有可能是服务端跨域未处理该头。
      比如如果是nginx处理的,需要加add_header 'Access-Control-Expose-Headers' 'Content-Disposition';

    OK,简简单单!

  • 相关阅读:
    uva-712 S-Trees
    Liunx下文件权限详解
    uva-699 The Falling Leaves
    Oracle sql loader 使用案例
    设计模式学习--迭代器模式(Iterator Pattern)和组合模式(Composite Pattern)
    XML 简单介绍
    UVA 11107(Life Forms-后缀数组+二分)
    SRM 212 Div II Level One: YahtzeeScore
    HDU 5695 Gym Class 拓扑排序
    HDU 5694 BD String 迭代
  • 原文地址:https://www.cnblogs.com/chywx/p/13891706.html
Copyright © 2011-2022 走看看