angular使用_HttpClient或者Fetch发送POST/GET请求下载/上传文件

一：下载文件写法

1.post请求_HttpClient写法、

myTest() {
    const params = { aa: "aa", bb: "bb" }; // body的参数
    const url = 'http://10.10.10.22:8080/sss'
    const queryParams = undefined; // url query的参数
    this.http.post(url, params, queryParams, {
      responseType: "blob",
      headers: new HttpHeaders().append("Content-Type", "application/json")
    }).subscribe(res => {
      // res: 文件流
      this.downloadFile(res);
    })
  }
  /**
   * 创建blob对象，并利用浏览器打开url进行下载
   * @param data 文件流数据
   */
  downloadFile(data) {
    // 下载类型 xls
    const contentType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
    // 下载类型：csv
    // const contentType2 = 'text/csv';
    const blob = new Blob([data], { type: contentType });
    const url = window.URL.createObjectURL(blob);
    // 打开新窗口方式进行下载
    // window.open(url); 
    // 以动态创建a标签进行下载
    const a = document.createElement('a');
    const fileName = 'file';
    a.href = url;
    a.download = fileName + '.xlsx';
    a.click();
    window.URL.revokeObjectURL(url);
  }

2.post请求使用Fetch  写法、

requestData = {
        aa: aa,//這個給的是勾選的no列表
        bb: bb
      }
      //下载execl文件
      fetch(url, {
        method: "POST",
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(requestData)
      })
        .then(res => res.blob())
        .then(data => {
          this.showSpin = false;
          let blobUrl = window.URL.createObjectURL(data)
          const a = document.createElement('a')
          a.style.display = 'none';
          a.setAttribute('target', '_blank');
          a.download = '<List>';
          a.href = blobUrl;
          a.click();
        })

 3.GET请求第一种写法、

let url = `${BaseUrl.path}/aa/bb/cc?no=${this.sqcode}&pae=${this.wlName}&ase=${this.setDate(this.data[0])}&eae=${this.setDate(this.data[1])}&esy=${this.empId}&aay=${this.sqName}`;
      const a = document.createElement('a')
      a.style.display = 'none';
      a.setAttribute('target', '_blank');
      a.href = url;
      a.click();

4.GET请求第二种写法、

 myExport() {
      
      var elemIF = document.createElement('iframe');
      elemIF.src = myUrl.myParticleBaseUrl + '/qqq/file?aaa=vvvvvfl';
      elemIF.style.display = 'none';
      document.body.appendChild(elemIF);
      
    },

二：上传文件的写法

三：VUE中上传一个文件给后端，后端返回另一个文件下载

 

<template>
  <div>
    <!-- 導入 -->
    <a
      href="javascript:;"
      class="button_s my_file el-button button_s el-button--primary el-button--small"
    >
      <input id="upload" type="file" class="my_input" @change="importExcel" />上傳111
    </a>
    <!-- 導入 -->
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {}
  },
  mounted() {},
  methods: {
    async importExcel(e) {
      const files = e.target.files
      if (files.length <= 0) {
        return false
      } else if (!/\.(xlsx)$/.test(files[0].name.toLowerCase())) {
        alert('上传格式不正确，请上传xlsx格式')
        return false
      }
      this.fileName = files[0].name
      // 如果要發送後端處理，這個代碼1
      const url1 = 'http://10.10.10.10:8088/abc'
      const myformdataFile = new FormData()
      myformdataFile.append('file', e.target.files[0], 'a.xlsx')
      axios
        .post(url1, myformdataFile, {
          'responseType': 'blob',
          'Content-Type': 'application/json'
        })
        .then(({ data }) => {
          const contentType =
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
          // 下载类型：csv
          // const contentType2 = 'text/csv';
          const blob = new Blob([data], { type: contentType })
          const url = window.URL.createObjectURL(blob)
          // 以动态创建a标签进行下载
          const a = document.createElement('a')
          const fileName = 'file'
          a.href = url
          a.download = fileName + '.xlsx'
          a.click()
          window.URL.revokeObjectURL(url)
        })
      var input = document.getElementById('upload')
      input.value = ''
    }
    // 導入
  }
}
</script>
<style lang="less" scoped>
</style>