मैं GET और POST जैसे बुनियादी http अनुरोधों के लिए axios का उपयोग कर रहा हूं, और यह अच्छी तरह से काम करता है। अब मुझे एक्सेल फाइल भी डाउनलोड करने में सक्षम होना चाहिए। क्या यह axios के साथ संभव है? यदि ऐसा है तो किसी के पास कुछ नमूना कोड है? यदि नहीं, तो मैं ऐसा करने के लिए एक रिएक्ट एप्लिकेशन में और क्या उपयोग कर सकता हूं?
जवाबों:
जब प्रतिक्रिया एक डाउनलोड करने योग्य फ़ाइल के साथ आती है, तो प्रतिक्रिया हेडर कुछ इस तरह होगा
Content-Disposition: "attachment;filename=report.xls"
Content-Type: "application/octet-stream" // or Content-type: "application/vnd.ms-excel"
आप जो कर सकते हैं वह एक अलग घटक बना सकता है, जिसमें एक छिपा हुआ आइफ्रेम होगा।
import * as React from 'react';
var MyIframe = React.createClass({
render: function() {
return (
<div style={{display: 'none'}}>
<iframe src={this.props.iframeSrc} />
</div>
);
}
});
अब, आप इस घटक को प्रोप के रूप में डाउनलोड करने योग्य फ़ाइल के यूआरएल को पास कर सकते हैं, इसलिए जब यह घटक प्रोप प्राप्त करेगा, तो यह फिर से प्रस्तुत करेगा और फ़ाइल डाउनलोड हो जाएगी।
संपादित करें: आप जेएस-फाइल-डाउनलोड मॉड्यूल का भी उपयोग कर सकते हैं । जीथुब रेपो से लिंक करें
const FileDownload = require('js-file-download');
Axios({
url: 'http://localhost/downloadFile',
method: 'GET',
responseType: 'blob', // Important
}).then((response) => {
FileDownload(response.data, 'report.csv');
});
उम्मीद है की यह मदद करेगा :)
responseURL, शायद यह वह URL है जो आप चाहते हैं।
एक अधिक सामान्य समाधान
axios({
url: 'http://api.dev/file-download', //your url
method: 'GET',
responseType: 'blob', // important
}).then((response) => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'file.pdf'); //or any other extension
document.body.appendChild(link);
link.click();
});
Https://gist.github.com/javilobo8/097c30a233786be52070986d8cdb1743 पर quirks देखें
इसका पूरा श्रेय: https://gist.github.com/javilobo8 को जाता है
responseType: 'blob'
responseपूरा होने पर वेरिएबल में स्टोर हो जाएगा । फिर createObjectURLइस डेटा के लिए एक स्थानीय यूआरएल बनाता है जिसे एक <a> नेविगेट कर सकता है।
यह वास्तव में और भी जटिल है जब आप Axios और सुरक्षा के कुछ साधनों का उपयोग करके फ़ाइलों को डाउनलोड करना चाहते हैं। किसी अन्य व्यक्ति को यह पता लगाने में बहुत अधिक समय खर्च करने से रोकने के लिए, मुझे इसके माध्यम से चलना चाहिए।
आपको 3 चीजें करने की आवश्यकता है:
1. Configure your server to permit the browser to see required HTTP headers
2. Implement the server-side service, and making it advertise the correct file type for the downloaded file.
3. Implementing an Axios handler to trigger a FileDownload dialog within the browser
ये चरण ज्यादातर उल्लेखनीय हैं - लेकिन कॉर्स के ब्राउज़र के संबंध से काफी जटिल हैं। एक समय में एक ही कदम:
परिवहन सुरक्षा को नियोजित करते समय, जावास्क्रिप्ट एक ब्राउज़र के भीतर निष्पादित कर सकता है [डिज़ाइन द्वारा] HTTP हेडर के केवल 6 का उपयोग वास्तव में HTTP सर्वर द्वारा भेजा गया है। यदि हम सर्वर को डाउनलोड के लिए फ़ाइल नाम सुझाना चाहते हैं, तो हमें ब्राउज़र को सूचित करना होगा कि जावास्क्रिप्ट के लिए "ओके" अन्य हेडर तक पहुँच दी जाए, जहाँ सुझाया गया फ़ाइल नाम पहुँचाया जाएगा।
आइए हम चर्चा करें - चर्चा के लिए - कि हम चाहते हैं कि सर्वर सुझाए गए फ़ाइलनाम को एक HTTP हेडर के भीतर एक्स-सुझाव-फाइलन नाम से प्रसारित करे । HTTP सर्वर ब्राउज़र को बताता है कि इस प्राप्त कस्टम हेडर को जावास्क्रिप्ट / एक्सियोस के साथ निम्नलिखित हेडर के साथ उजागर करना ठीक है:
Access-Control-Expose-Headers: X-Suggested-Filename
इस शीर्ष लेख को सेट करने के लिए अपने HTTP सर्वर को कॉन्फ़िगर करने का सटीक तरीका उत्पाद से उत्पाद में भिन्न होता है।
इन मानक शीर्ष लेखों की पूरी व्याख्या और विस्तृत विवरण के लिए https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers देखें ।
आपके सर्वर-साइड सेवा कार्यान्वयन को अब 2 चीजें करनी चाहिए:
1. Create the (binary) document and assign correct ContentType to the response
2. Assign the custom header (X-Suggested-Filename) containing the suggested file name for the client
यह आपके चुने हुए प्रौद्योगिकी स्टैक के आधार पर विभिन्न तरीकों से किया जाता है। मैं JavaEE 7 मानक का उपयोग करके एक उदाहरण को स्केच करूँगा जो एक एक्सेल रिपोर्ट का उत्सर्जन करना चाहिए:
@GET
@Path("/report/excel")
@Produces("application/vnd.ms-excel")
public Response getAllergyAndPreferencesReport() {
// Create the document which should be downloaded
final byte[] theDocumentData = ....
// Define a suggested filename
final String filename = ...
// Create the JAXRS response
// Don't forget to include the filename in 2 HTTP headers:
//
// a) The standard 'Content-Disposition' one, and
// b) The custom 'X-Suggested-Filename'
//
final Response.ResponseBuilder builder = Response.ok(
theDocumentData, "application/vnd.ms-excel")
.header("X-Suggested-Filename", fileName);
builder.header("Content-Disposition", "attachment; filename=" + fileName);
// All Done.
return builder.build();
}
सेवा अब द्विआधारी दस्तावेज़ (एक एक्सेल रिपोर्ट, इस मामले में) का उत्सर्जन करती है, सही सामग्री प्रकार सेट करती है - और दस्तावेज़ को सहेजते समय उपयोग करने के लिए सुझाए गए फ़ाइलनाम वाले कस्टम HTTP हेडर भी भेजता है।
यहाँ कुछ नुकसान हैं, तो चलिए सुनिश्चित करते हैं कि सभी विवरण सही ढंग से कॉन्फ़िगर किए गए हैं:
कंकाल कुल्हाड़ी कार्यान्वयन तब की तर्ज पर कुछ होगा:
// Fetch the dynamically generated excel document from the server.
axios.get(resource, {responseType: 'blob'}).then((response) => {
// Log somewhat to show that the browser actually exposes the custom HTTP header
const fileNameHeader = "x-suggested-filename";
const suggestedFileName = response.headers[fileNameHeader];'
const effectiveFileName = (suggestedFileName === undefined
? "allergierOchPreferenser.xls"
: suggestedFileName);
console.log("Received header [" + fileNameHeader + "]: " + suggestedFileName
+ ", effective fileName: " + effectiveFileName);
// Let the user save the file.
FileSaver.saveAs(response.data, effectiveFileName);
}).catch((response) => {
console.error("Could not Download the Excel report from the backend.", response);
});
content-dispositionबजाय हेडर का उपयोग करने की सिफारिश की जाती है x-suggested-filename।
IE और अन्य ब्राउज़रों के साथ Axios.post समाधान
मुझे यहां कुछ अविश्वसनीय समाधान मिले हैं। लेकिन वे अक्सर IE ब्राउज़र के साथ समस्याओं को ध्यान में नहीं रखते हैं। शायद यह किसी और को कुछ समय बचाएगा।
axios.post("/yourUrl"
, data,
{responseType: 'blob'}
).then(function (response) {
let fileName = response.headers["content-disposition"].split("filename=")[1];
if (window.navigator && window.navigator.msSaveOrOpenBlob) { // IE variant
window.navigator.msSaveOrOpenBlob(new Blob([response.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}),
fileName);
} else {
const url = window.URL.createObjectURL(new Blob([response.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', response.headers["content-disposition"].split("filename=")[1]);
document.body.appendChild(link);
link.click();
}
}
);
उदाहरण ऊपर एक्सेल फ़ाइलों के लिए है, लेकिन थोड़े बदलाव के साथ इसे किसी भी प्रारूप में लागू किया जा सकता है।
और सर्वर पर मैंने एक्सेल फाइल भेजने के लिए ऐसा किया है।
response.contentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
response.addHeader(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=exceptions.xlsx")
Axios के साथ API कॉल करने का कार्य:
function getFileToDownload (apiUrl) {
return axios.get(apiUrl, {
responseType: 'arraybuffer',
headers: {
'Content-Type': 'application/json'
}
})
}
फ़ंक्शन को कॉल करें और फिर आपके द्वारा प्राप्त एक्सेल फ़ाइल डाउनलोड करें:
getFileToDownload('putApiUrlHere')
.then (response => {
const type = response.headers['content-type']
const blob = new Blob([response.data], { type: type, encoding: 'UTF-8' })
const link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = 'file.xlsx'
link.click()
})
axios.get(
'/app/export'
).then(response => {
const url = window.URL.createObjectURL(new Blob([response]));
const link = document.createElement('a');
link.href = url;
const fileName = `${+ new Date()}.csv`// whatever your file name .
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
link.remove();// you need to remove that elelment which is created before.
})
उपयोगकर्ता के लिए डाउनलोड को ट्रिगर करने के लिए यह बहुत सरल जावास्क्रिप्ट कोड है:
window.open("<insert URL here>")
आप इस ऑपरेशन के लिए axios नहीं चाहते / चाहते हैं; यह मानक होना चाहिए कि ब्राउजर को यह काम करने दे।
नोट: यदि आपको डाउनलोड के लिए प्राधिकरण की आवश्यकता है तो यह काम नहीं कर सकता है। मुझे पूरा यकीन है कि आप इस तरह के अनुरोध को अधिकृत करने के लिए कुकीज़ का उपयोग कर सकते हैं, बशर्ते वह एक ही डोमेन के भीतर हो, लेकिन इसकी परवाह किए बिना, यह ऐसे मामले में तुरंत काम नहीं कर सकता है।
जैसे कि यह संभव है ... इन-बिल्ट फ़ाइल डाउनलोडिंग तंत्र के साथ नहीं, नहीं ।
चाल एक अदृश्य लंगर टैग बनाने के लिए है render()और एक प्रतिक्रिया जोड़ने के refलिए एक क्लिक को ट्रिगर करने की अनुमति देता है जब हमारे पास अक्षीय प्रतिक्रिया होती है:
class Example extends Component {
state = {
ref: React.createRef()
}
exportCSV = () => {
axios.get(
'/app/export'
).then(response => {
let blob = new Blob([response.data], {type: 'application/octet-stream'})
let ref = this.state.ref
ref.current.href = URL.createObjectURL(blob)
ref.current.download = 'data.csv'
ref.current.click()
})
}
render(){
return(
<div>
<a style={{display: 'none'}} href='empty' ref={this.state.ref}>ref</a>
<button onClick={this.exportCSV}>Export CSV</button>
</div>
)
}
}
यहाँ प्रलेखन है: https://reactjs.org/docs/refs-and-the-dom.html । आप यहां एक समान विचार पा सकते हैं: https://thewebtier.com/snippets/download-files-with-axios/ ।
यह मेरे लिए काम किया। मैंने इस समाधान को reactJS में लागू किया
const requestOptions = {`enter code here`
method: 'GET',
headers: { 'Content-Type': 'application/json' }
};
fetch(`${url}`, requestOptions)
.then((res) => {
return res.blob();
})
.then((blob) => {
const href = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = href;
link.setAttribute('download', 'config.json'); //or any other extension
document.body.appendChild(link);
link.click();
})
.catch((err) => {
return Promise.reject({ Error: 'Something Went Wrong', err });
})
अक्षीय POST अनुरोध के लिए, अनुरोध कुछ इस तरह से होना चाहिए: यहां कुंजी यह है कि पोस्ट के तृतीय पैरामीटर में फ़ील्ड्स responseTypeऔर headerफ़ील्ड होना चाहिए। दूसरा पैरामीटर अनुप्रयोग पैरामीटर है।
export const requestDownloadReport = (requestParams) => async dispatch => {
let response = null;
try {
response = await frontEndApi.post('createPdf', {
requestParams: requestParams,
},
{
responseType: 'arraybuffer', // important...because we need to convert it to a blob. If we don't specify this, response.data will be the raw data. It cannot be converted to blob directly.
headers: {
'Content-Type': 'application/json',
'Accept': 'application/pdf'
}
});
}
catch(err) {
console.log('[requestDownloadReport][ERROR]', err);
return err
}
return response;
}
मेरा जवाब कुल हैक है - मैंने सिर्फ एक लिंक बनाया है जो एक बटन की तरह दिखता है और उस पर URL जोड़ें।
<a class="el-button"
style="color: white; background-color: #58B7FF;"
:href="<YOUR URL ENDPOINT HERE>"
:download="<FILE NAME NERE>">
<i class="fa fa-file-excel-o"></i> Excel
</a>
मैं उत्कृष्ट VueJs का उपयोग कर रहा हूं इसलिए विषम एनोटेशन, हालांकि, यह समाधान फ्रेमवर्क एग्नोस्टिक है। विचार किसी भी HTML आधारित डिजाइन के लिए काम करेगा।