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 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 scoped> </style>