এজ্যাক্স ব্যবহার করে বাইনারি ফাইলগুলি ডাউনলোড করার জন্য সমর্থন দুর্দান্ত নয়, এটি এখনও কার্যকরী খসড়া হিসাবে বিকাশাধীন ।
সাধারণ ডাউনলোড পদ্ধতি:
আপনি নীচের কোডটি ব্যবহার করে ব্রাউজারটি অনুরোধ করা ফাইলটি ডাউনলোড করতে পারেন এবং এটি সমস্ত ব্রাউজারে সমর্থিত এবং স্পষ্টতই ওয়েবএপি অনুরোধটিকে ট্রিগার করবে।
$scope.downloadFile = function(downloadPath) {
window.open(downloadPath, '_blank', '');
}
অ্যাজাক্স বাইনারি ডাউনলোড পদ্ধতি:
বাইনারি ফাইলটি ডাউনলোড করতে এজাক্স ব্যবহার করা কিছু ব্রাউজারে করা যেতে পারে এবং নীচে একটি বাস্তবায়ন যা ক্রোম, ইন্টারনেট এক্সপ্লোরার, ফায়ারফক্স এবং সাফারি এর সর্বশেষ স্বাদে কাজ করবে।
এটি একটি arraybuffer
প্রতিক্রিয়া টাইপ ব্যবহার করে , যা পরে একটি জাভাস্ক্রিপ্টে রূপান্তরিত হয় blob
, যা হয় saveBlob
পদ্ধতিটি ব্যবহার করে সংরক্ষণ করার জন্য উপস্থাপিত হয় - যদিও এটি বর্তমানে কেবলমাত্র ইন্টারনেট এক্সপ্লোরার-এ উপস্থিত রয়েছে - বা ব্রাউজার দ্বারা খোলা একটি ব্লব ডেটা URL- এ রূপান্তরিত হয়েছে, ট্রিগার করছে ডাউনলোড ডায়ালগটি যদি ব্রাউজারে দেখার জন্য মাইম টাইপ সমর্থন করে।
ইন্টারনেট এক্সপ্লোরার 11 সমর্থন (স্থির)
দ্রষ্টব্য: ইন্টারনেট এক্সপ্লোরার 11 msSaveBlob
যদি ফাংশনটি অ্যালিজ করা থাকে তবে এটি ব্যবহার পছন্দ করে না - সম্ভবত কোনও সুরক্ষা বৈশিষ্ট্য, তবে সম্ভবত একটি ত্রুটি, সুতরাং var saveBlob = navigator.msSaveBlob || navigator.webkitSaveBlob ... etc.
উপলভ্য saveBlob
সমর্থনটি নির্ধারণের জন্য একটি ব্যতিক্রম ঘটায়; সুতরাং নীচের কোডটি কেন এখন navigator.msSaveBlob
পৃথকভাবে পরীক্ষা করে । ধন্যবাদ? মাইক্রোসফট
// Based on an implementation here: web.student.tuwien.ac.at/~e0427417/jsdownload.html
$scope.downloadFile = function(httpPath) {
// Use an arraybuffer
$http.get(httpPath, { responseType: 'arraybuffer' })
.success( function(data, status, headers) {
var octetStreamMime = 'application/octet-stream';
var success = false;
// Get the headers
headers = headers();
// Get the filename from the x-filename header or default to "download.bin"
var filename = headers['x-filename'] || 'download.bin';
// Determine the content type from the header or default to "application/octet-stream"
var contentType = headers['content-type'] || octetStreamMime;
try
{
// Try using msSaveBlob if supported
console.log("Trying saveBlob method ...");
var blob = new Blob([data], { type: contentType });
if(navigator.msSaveBlob)
navigator.msSaveBlob(blob, filename);
else {
// Try using other saveBlob implementations, if available
var saveBlob = navigator.webkitSaveBlob || navigator.mozSaveBlob || navigator.saveBlob;
if(saveBlob === undefined) throw "Not supported";
saveBlob(blob, filename);
}
console.log("saveBlob succeeded");
success = true;
} catch(ex)
{
console.log("saveBlob method failed with the following exception:");
console.log(ex);
}
if(!success)
{
// Get the blob url creator
var urlCreator = window.URL || window.webkitURL || window.mozURL || window.msURL;
if(urlCreator)
{
// Try to use a download link
var link = document.createElement('a');
if('download' in link)
{
// Try to simulate a click
try
{
// Prepare a blob URL
console.log("Trying download link method with simulated click ...");
var blob = new Blob([data], { type: contentType });
var url = urlCreator.createObjectURL(blob);
link.setAttribute('href', url);
// Set the download attribute (Supported in Chrome 14+ / Firefox 20+)
link.setAttribute("download", filename);
// Simulate clicking the download link
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
link.dispatchEvent(event);
console.log("Download link method with simulated click succeeded");
success = true;
} catch(ex) {
console.log("Download link method with simulated click failed with the following exception:");
console.log(ex);
}
}
if(!success)
{
// Fallback to window.location method
try
{
// Prepare a blob URL
// Use application/octet-stream when using window.location to force download
console.log("Trying download link method with window.location ...");
var blob = new Blob([data], { type: octetStreamMime });
var url = urlCreator.createObjectURL(blob);
window.location = url;
console.log("Download link method with window.location succeeded");
success = true;
} catch(ex) {
console.log("Download link method with window.location failed with the following exception:");
console.log(ex);
}
}
}
}
if(!success)
{
// Fallback to window.open method
console.log("No methods worked for saving the arraybuffer, using last resort window.open");
window.open(httpPath, '_blank', '');
}
})
.error(function(data, status) {
console.log("Request failed with status: " + status);
// Optionally write the error out to scope
$scope.errorDetails = "Request failed with status: " + status;
});
};
ব্যবহার:
var downloadPath = "/files/instructions.pdf";
$scope.downloadFile(downloadPath);
মন্তব্য:
নিম্নলিখিত শিরোনামগুলি ফিরিয়ে আনার জন্য আপনার ওয়েবএপি পদ্ধতিটি পরিবর্তন করা উচিত:
আমি x-filename
ফাইলের নাম পাঠাতে হেডারটি ব্যবহার করেছি । এটি সুবিধার জন্য এটি একটি কাস্টম শিরোনাম, তবে আপনি content-disposition
নিয়মিত অভিব্যক্তি ব্যবহার করে শিরোনাম থেকে ফাইলের নামটি বের করতে পারেন ।
content-type
আপনার প্রতিক্রিয়াটির জন্য আপনার মাইম শিরোনামও সেট করা উচিত , তাই ব্রাউজারটি ডেটা ফর্ম্যাটটি জানে।
আশা করি এটা কাজে লাগবে.