js 文件下载,当前页下载,新标签下载____后端返回 GET/POST 文件流,下载文件
- ajax
-
/** * Created by kjf on 2019-03-25. * * axios.request(config) axios.get(url[, config]) axios.post(url[, data[, config]]) axios.delete(url[, config]) axios.head(url[, config]) axios.options(url[, config]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]]) */ import axios from 'axios'; export default function (url, data = {}, method = 'GET', params, headers) { return new Promise((resolve, reject) => { let promise = null; if (method === 'GET') { promise = axios.get(url, {params: data, headers}); } else if (method === 'POST') { promise = axios.post(url, data, {params: params, headers}); } promise .then(response => resolve(response)) .catch(err => { // console.log("/src/axios/ajax.js----error: "+err) reject(err); }); }); }
1. 直接用 Ajax 发 POST/GET 请求
错误的方式:
-
export const requestDownloadLabFile = (id) => { // 下载附件 const url = preFixed + '/lab/myExperimentOperator/download/' + id; return ajax(url, {}, 'GET', {}, {'labAuth': 'http://localhost:7000'}); };
正确的方式:(缺点: 必须要知道 文件名.类型,意味着后端必须给到 这样的一个字段)
-
export const requestDownloadLabFile = (id) => { // 下载附件 const url = preFixed + '/lab/myExperimentOperator/download/' + id; ajax(url, {}, 'GET', {}, {'labAuth': 'http://localhost:7000'}).then(res=> { const content = res.data; const blob = new Blob([content]); const fileName = 'fileName.type'; if ('download' in document.createElement('a')) { // 非IE下载 const elink = document.createElement('a'); elink.download = fileName; elink.style.display = 'none'; elink.href = URL.createObjectURL(blob); document.body.appendChild(elink); elink.click(); URL.revokeObjectURL(elink.href); // 释放URL 对象 document.body.removeChild(elink); } else { // IE10+下载 navigator.msSaveBlob(blob, fileName); } }); return 0; }
2. window.open 此类方法,兼容性不好
-
export const requestDownloadLabFile = (id) => { // 下载附件 const url = preFixed + '/lab/myExperimentOperator/download/' + id; window.open(url, '_blank'); // 新打开窗口 };
3. form 当前页下载: (当 链接失效 时,影响当前页, 但是可以接受)____推荐使用
- diyDownload
-
export const diyDownload = (url, data, method = 'GET') => { const body = document.getElementsByTagName('body')[0]; const form = document.createElement('form'); form.method = method; form.action = url; for (let key in data) { let param = document.createElement('input'); param.type = 'hidden'; param.name = key; param.value = data[key]; form.appendChild(param); } body.appendChild(form); form.submit(); body.removeChild(form); };
-
export const requestDownloadLabFile = (id) => { // 下载附件 const url = preFixed + '/lab/myExperimentOperator/download/' + id; diyDownload(url, {}, 'GET'); };
4. iframe 标签下载: (当 链接失效 时,不会影响当前页)
-
export const requestDownloadLabFile = (id) => { // 下载附件 const url = preFixed + '/lab/myExperimentOperator/download/' + id; try { let elemIF = document.createElement('iframe'); elemIF.src = url; elemIF.style.display = 'none'; document.body.appendChild(elemIF); } catch (e) { myConsole('下载异常!'); } };
--------小尾巴
________一个人欣赏-最后一朵颜色的消逝-忠诚于我的是·一颗叫做野的心.决不受人奴役.怒火中生的那一刻·终将结束...