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>