আমি জিইটি এবং পোস্টের মতো বেসিক http অনুরোধগুলির জন্য অক্ষর ব্যবহার করছি এবং এটি ভালভাবে কাজ করে। এখন আমারও এক্সেল ফাইলগুলি ডাউনলোড করতে সক্ষম হওয়া দরকার। অক্ষর দিয়ে কি এটা সম্ভব? তা হলে কারও কি কিছু নমুনা কোড রয়েছে? যদি তা না হয় তবে আমি এটির জন্য একটি প্রতিক্রিয়া প্রয়োগে আর কী ব্যবহার করতে পারি?
উত্তর:
প্রতিক্রিয়া যখন ডাউনলোডযোগ্য ফাইলের সাথে আসে তখন প্রতিক্রিয়া শিরোনামগুলি এমন কিছু হবে
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.get(`http://localhost/downloadFile`)
.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 এ দেখুন
সম্পূর্ণ ক্রেডিট: https://gist.github.com/javilobo8
responseType: 'blob'
responseসম্পূর্ণ হওয়ার পরে পরিবর্তনশীলতে সংরক্ষণ করা হবে । তারপরে createObjectURLএই ডেটাতে একটি স্থানীয় ইউআরএল তৈরি করে যা <a> এ নেভিগেট করতে পারে।
আপনি যখন অ্যাকজিওস এবং সুরক্ষার কিছু উপায় ব্যবহার করে ফাইলগুলি ডাউনলোড করতে চান তখন এটি আসলে আরও জটিল। এটি নির্ণয় করতে অন্য কাউকে অতিরিক্ত সময় ব্যয় করতে বাধা দিতে, আমাকে আপনাকে এখান থেকে চলতে দিন।
আপনার 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 সার্ভারের দ্বারা প্রেরিত HTTP শিরোনামগুলির মধ্যে কেবল 6 টিরই [ডিজাইন দ্বারা] অ্যাক্সেস করতে পারে। যদি আমরা সার্ভারটি ডাউনলোডের জন্য কোনও ফাইলের নাম প্রস্তাব করতে চাই, তবে আমাদের অবশ্যই ব্রাউজারকে জানাতে হবে যে জাভাস্ক্রিপ্টের জন্য অন্যান্য হেডারগুলিতে অ্যাক্সেস দেওয়া উচিত যেখানে প্রস্তাবিত ফাইলের নাম স্থানান্তরিত হবে।
আসুন আমরা আলোচনার খাতিরে ধরে নিতে পারি - আমরা চাই যে সার্ভারটি একটি প্রস্তাবিত ফাইলের নামটি একটি এইচটিটিপি শিরোনামের মধ্যে এক্স-প্রস্তাবিত-ফাইলের নামান্তরিত করে । এইচটিটিপি সার্ভারটি ব্রাউজারকে জানায় যে এই প্রাপ্ত কাস্টম শিরোনামটি নিম্নলিখিত শিরোনাম সহ জাভাস্ক্রিপ্ট / অ্যাক্সিয়াসে প্রকাশ করা ঠিক আছে:
Access-Control-Expose-Headers: X-Suggested-Filename
এই শিরোনামটি সেট করতে আপনার এইচটিটিপি সার্ভারটি কনফিগার করার সঠিক উপায়টি পণ্য থেকে পরিবর্তিত হয়।
এই স্ট্যান্ডার্ড শিরোনামগুলির পুরো ব্যাখ্যা এবং বিশদ বিবরণের জন্য https://developer.mozilla.org/en-US/docs/Web/HTTP/Heeda/Access-Control-Expose-Heilers দেখুন ।
আপনার সার্ভার-সাইড পরিষেবা প্রয়োগের জন্য এখন অবশ্যই 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
আপনার নির্বাচিত প্রযুক্তি স্ট্যাকের উপর নির্ভর করে এটি বিভিন্ন উপায়ে করা হয়। আমি জাভাউই 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();
}
পরিষেবাটি এখন বাইনারি ডকুমেন্টটি বের করে (এক্ষেত্রে একটি এক্সেল প্রতিবেদন), সঠিক সামগ্রীর ধরণ নির্ধারণ করে - এবং দস্তাবেজটি সংরক্ষণ করার সময় প্রস্তাবিত ফাইলের নামযুক্ত একটি কাস্টম এইচটিটিপি শিরোনাম প্রেরণ করে।
এখানে কয়েকটি সমস্যা রয়েছে, সুতরাং আসুন নিশ্চিত হয়ে নিন যে সমস্ত বিবরণ সঠিকভাবে কনফিগার করা হয়েছে:
কঙ্কাল অ্যাক্সিয়োস বাস্তবায়ন তখন এর লাইনে কিছু হবে:
// 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("/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.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.
})
অক্ষর দিয়ে এপিআই কল করার ফাংশন:
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()
})
এটি ব্যবহারকারীর জন্য একটি ডাউনলোড ট্রিগার করার জন্য খুব সহজ জাভাস্ক্রিপ্ট কোড:
window.open("<insert URL here>")
আপনি এই অপারেশনের জন্য অক্ষ / অক্ষর চান না; এটি কেবল ব্রাউজারটিকে এটি করতে দেওয়া মানসম্পন্ন হওয়া উচিত।
দ্রষ্টব্য: ডাউনলোডের জন্য যদি আপনার অনুমোদনের প্রয়োজন হয় তবে এটি কাজ নাও করতে পারে। আমি নিশ্চিত যে আপনি কুকিগুলি এই জাতীয় অনুরোধের অনুমোদনের জন্য ব্যবহার করতে পারেন তবে শর্ত থাকে যে এটি একই ডোমেনের মধ্যে রয়েছে তবে নির্বিশেষে, এই ক্ষেত্রে এটি অবিলম্বে কাজ করতে পারে না।
হিসাবে এটি সম্ভব কিনা ... অন্তর্নির্মিত ফাইল ডাউনলোড করার প্রক্রিয়া সহ নয়, না ।
কৌশলটি হ'ল একটি অদৃশ্য অ্যাঙ্কর ট্যাগ তৈরি করা 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/ ।
অক্ষ অক্ষর পোস্ট অনুরোধের জন্য, অনুরোধটি এরকম কিছু হওয়া উচিত: এখানে মূল কীটি হ'ল 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;
}
আমার উত্তরটি মোট হ্যাক - আমি সবেমাত্র একটি লিঙ্ক তৈরি করেছি যা বোতামের মতো দেখায় এবং এতে ইউআরএল যুক্ত করি।
<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 ভিত্তিক নকশার জন্য কাজ করবে for