ডেটা ইউআরএল ফাইল ডাউনলোড করুন

Question

আমি একটি সম্পূর্ণ জাভাস্ক্রিপ্ট-ভিত্তিক জিপ / আনজিপ ইউটিলিটি তৈরির ধারণার সাথে খেলছি যা যে কোনও ব্রাউজার থেকে অ্যাক্সেস করতে পারে। তারা সরাসরি তাদের জিপ সরাসরি ব্রাউজারে টেনে আনতে পারে এবং এটি তাদের মধ্যে সমস্ত ফাইল ডাউনলোড করতে দেয়। এগুলি পৃথক ফাইলগুলিকে টেনে এনে নতুন জিপ ফাইল তৈরি করতে পারে।

আমি জানি এটি সার্ভারসাইড করা আরও ভাল হবে তবে এই প্রকল্পটি কিছুটা মজা করার জন্য।

ব্রাউজারে ফাইলগুলি টেনে আনতে যথেষ্ট সহজ হওয়া উচিত যদি আমি উপলব্ধ বিভিন্ন পদ্ধতির সুবিধা গ্রহণ করি। (Gmail শৈলী)

এনকোডিং / ডিকোডিং আশা করি ঠিক আছে। আমি কয়েকটি as3 জিপ লাইব্রেরি দেখেছি যাতে আমি নিশ্চিত যে এটির সাথে আমার ভাল হওয়া উচিত।

আমার ইস্যুগুলি ফাইলগুলি ডাউনলোড করার শেষে রয়েছে।

window.location = 'data:jpg/image;base64,/9j/4AAQSkZJR....' 

এটি ফায়ারফক্সে ঠিক কাজ করে তবে ক্রোমে নয়।

আমি ক্রোম ব্যবহার করে ঠিক মতো সূক্ষ্ম চিত্র হিসাবে ফাইলগুলি এম্বেড করতে পারি <img src="data:jpg/image;ba.." />, তবে ফাইলগুলি অগত্যা চিত্র হবে না। তারা যে কোনও বিন্যাস হতে পারে।

কেউ কি অন্য সমাধান বা একধরণের কাজের সমাধান চিন্তা করতে পারেন?

Comments

বর্তমান সমর্থন , দুর্ভাগ্যক্রমে, বরং সীমাবদ্ধ

— কেসব্যাশ

Answer 1

ধারনা:

• একটি <a href="data:...." target="_blank">(অনির্ধারিত) চেষ্টা করে দেখুন

• ব্যবহার করুন downloadify ডেটা URL গুলির পরিবর্তে (পাশাপাশি ইন্টারনেট কাজ হবে)

Comments

মৃত লিঙ্কটি দেখানোর জন্য @ জেকিউমিক ধন্যবাদ নতুন ডাউনলোডের অবস্থানটি মনে হচ্ছে github.com/dcneiner/Downloadify

— পেক্কা

আপনি যদি ফ্ল্যাশ ব্যবহার করতে না পারেন তবে একটি জাভা সার্ভার-সাইড উপাদান চালাচ্ছেন তবে আপনি এটি ব্যবহার করতে পারেন: github.com/suprememoocow/databounce । এটি ক্লায়েন্টের ডেটা 'বাউন্স' করতে একটি সার্লেট ব্যবহার করে। পাইথন, এএসপি.এনইট ইত্যাদির মতো অন্যান্য সার্ভার সাইড প্রযুক্তিগুলিতে একই কৌশলটি সম্পাদন করা মোটামুটি সহজ হবে

— অ্যান্ড্রু নিউডিগেট

ফ্ল্যাশ ছাড়াই এটি করার কোনও উপায় আছে? সমস্ত ব্রাউজারের জন্য ডেটা ইউআরএল, তবে আইই এবং একরকম অ্যাক্টিভ এক্স ফো? (এইভাবে আমি ফ্ল্যাশ ছাড়াই সংগীত বাজানো পরিচালনা করেছি: সমস্ত ব্রাউজারের জন্য এইচটিএমএল 5 অডিও তবে আইই এবং

— আইটিএক্সএক্সএক্স

ডাউনলোডইফ ব্রাউজারে ফ্ল্যাশ প্লেয়ার আশা করে। ব্যবহারকারীর যদি কোনও ফ্ল্যাশ প্লেয়ার না থাকে তবে ফাইলটি ডাউনলোড হবে না

— জীবনানন্দন জে

Answer 2

আপনি যদি ফাইলটিতে প্রস্তাবিত নাম দিতে চান (ডিফল্ট 'ডাউনলোড' এর পরিবর্তে) তবে আপনি ক্রোম, ফায়ারফক্স এবং কয়েকটি আইআই সংস্করণে নিম্নলিখিতটি ব্যবহার করতে পারেন:

function downloadURI(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  delete link;
}

এবং নিম্নলিখিত উদাহরণটি এর ব্যবহার দেখায়:

downloadURI("data:text/html,HelloWorld!", "helloWorld.txt");

Comments

আপনি link.click()আপনার eventFireফাংশনটির পরিবর্তে এটি আরও সরল করতে পারেন ... jsfiddle.net/ARTsinn/Ezx5m

— ইয়াকার্ট

সুন্দর সমাধান। কিন্তু এর পরে লিঙ্কটি কী হয়ে যায়?

— ওয়েবশেকার

ভেরিয়েবল 'লিঙ্ক' ফাংশন শেষে সুযোগের বাইরে চলে যায় (দ্রষ্টব্য আমরা এটি কখনই ডোমে যুক্ত করিনি) সুতরাং শীঘ্রই আবর্জনা সংগ্রহ করা হবে।

— owenComp

এটি কেবল ক্রোমে কাজ করে। আপনি যদি এটি ফায়ারফক্স / আইই তে কাজ করতে চান তবে @ মার্টিনোডিনো থেকে উত্তরটি দেখুন।

— ট্রুউইল

আমি এখানে প্রস্তাবিত হিসাবে ডাউনলোড. js দিয়ে চেষ্টা করেছি এবং এটি কার্যকর বলে মনে হচ্ছে। :)

— joorodr84

Answer 3

function download(dataurl, filename) {
  var a = document.createElement("a");
  a.href = dataurl;
  a.setAttribute("download", filename);
  a.click();
}

download("data:text/html,HelloWorld!", "helloWorld.txt");

বা:

function download(url, filename) {
fetch(url).then(function(t) {
    return t.blob().then((b)=>{
        var a = document.createElement("a");
        a.href = URL.createObjectURL(b);
        a.setAttribute("download", filename);
        a.click();
    }
    );
});
}

download("https://get.geojs.io/v1/ip/geo.json","geoip.json")
download("data:text/html,HelloWorld!", "helloWorld.txt");

Comments

অ অযৌক্তিক উপাদানগুলিতে ইভেন্ট ক্লিক করুন: ডি অ্যাপেনডাইল্ডের প্রয়োজন নেই।

— জিব্রি

হ্যাঁ. আপনি উপাদান 'এ' তৈরি করার পরে আপনি কেবলমাত্র ক্লিক করুন () কল করতে পারেন এবং তারপরে একটি এর href সেট করতে পারেন।

— ব্যবহারকারী1709076

অতীতে কল করার সময় a.click () সরাসরি কাজ করবে না তবে এটি ইভেন্টটির সাথে জড়িত। এখন তারা দুজনেই কাজ করে।

— জিব্রি

এটি বেশিরভাগ আধুনিক ব্রাউজারগুলিতে কাজ করে, তবে আমি নোট করব যে নথিতে সংযোজন করার পরে কিছু পুরানো ব্রাউজারগুলিকে সমর্থন করার জন্য অপসারণ জরুরি।

— owencm

আপনার দ্বিতীয় সমাধানটি ব্যবহার করা উচিত যখনই ডেটাউরি খুব বড় হয়ে যায় (ব্রাউজারের উপর নির্ভর করে তবে Chrome আমার অভিজ্ঞতায় একাধিক মেগাবাইটের উরি গ্রহণ করে না)। স্ট্যাকওভারফ্লো . com/ প্রশ্নগুলি / 38781968/… দেখুন ।

— নিউরাল 5 টিম

Answer 4

আমার অভিজ্ঞতা ভাগ করে নিতে এবং ফায়ারফক্সে কাজ না করা ডাউনলোডগুলিতে আটকে থাকা এবং 2014 এর আপডেট হওয়া উত্তরকে সহায়তা করতে চান below নীচের স্নিপেটটি ফায়ারফক্স এবং ক্রোম উভয় ক্ষেত্রেই কাজ করবে এবং এটি একটি ফাইলের নাম গ্রহণ করবে:

  // Construct the <a> element
  var link = document.createElement("a");
  link.download = thefilename;
  // Construct the uri
  var uri = 'data:text/csv;charset=utf-8;base64,' + someb64data
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  // Cleanup the DOM
  document.body.removeChild(link);

Comments

দুর্ভাগ্যক্রমে, এটি সাফারি তে কাজ করে না। সাফারি downloadগুণটি চিনতে পারে বলে মনে হয় না । যাইহোক ধন্যবাদ, আমি এই মুহুর্তে যতটা পেতে পারি তত কাছাকাছি।

— মরিজ পিটারসেন

এর ফলে উইন্ডোটি আইই ১১ এ আমার জন্য href মানের দিকে পুনঃনির্দেশিত করছে pre prevetDefault ();

— IE-

ধন্যবাদ, এছাড়াও যদি btoaসংজ্ঞায়িত না হয় (উদাহরণস্বরূপ নোড এসিলেন্টেড ফ্রন্টএন্ড প্রকল্পে) const btxt = new Buffer(text).toString('base64'); const uri = 'data:text/csv;charset=utf-8;base64,' + btxt + ';'

— ইভান বোর্শচভ

লিঙ্কটি মোছা অর্থহীন, এটি পরের লাইনে সুযোগের বাইরে চলে যায় এবং আবর্জনা সংগ্রহ করা হবে, এটি মোছার জন্য কোনও বৈধ লক্ষ্য নয়।

— macdja38

document.body.appendChild জন্য কোন প্রয়োজন ... আমার উত্তর দেখার stackoverflow.com/a/45905238/236062

— Zibri

Answer 5

ফায়ারফক্স এবং ক্রোমে কাজ করার পরীক্ষা করেছি কিন্তু ইন্টারনেট এক্সপ্লোরারে নেই এমন একটি খাঁটি জাভাস্ক্রিপ্ট সমাধান এখানে দেওয়া হয়েছে:

function downloadDataUrlFromJavascript(filename, dataUrl) {

    // Construct the 'a' element
    var link = document.createElement("a");
    link.download = filename;
    link.target = "_blank";

    // Construct the URI
    link.href = dataUrl;
    document.body.appendChild(link);
    link.click();

    // Cleanup the DOM
    document.body.removeChild(link);
    delete link;
}

ক্রস ব্রাউজার সমাধানগুলি এখনও অবধি পাওয়া গেছে:

downloadify -> ফ্ল্যাশ প্রয়োজন Requ

ডেটাবাউনস -> আইই 10 এবং 11 এ পরীক্ষিত এবং আমার জন্য কাজ করে না। একটি সার্লেট এবং কিছু কাস্টমাইজেশন প্রয়োজন। (ভুলভাবে নেভিগেটর সনাক্ত করে। আমাকে পরীক্ষার জন্য সামঞ্জস্যতা মোডে আইই সেট করতে হয়েছিল, সার্লেলে ডিফল্ট চরসেট, নিখুঁত পাথগুলির জন্য জাভাস্ক্রিপ্ট বিকল্পগুলি সঠিক সার্লেলেট পাথের সাথে অবজেক্টস ...) নন-আইই ব্রাউজারগুলির জন্য, এটি একই উইন্ডোতে ফাইলটি খুলবে।

download.js -> http://danML.com/download.html অনুরূপ অন্য একটি লাইব্রেরি পরীক্ষিত নয়। খাঁটি জাভাস্ক্রিপ্ট হিসাবে দাবি করা হয়েছে, সার্লেট বা ফ্ল্যাশের প্রয়োজন নেই, তবে IE <= 9 এ কাজ করে না।

Comments

ডাউনলোড.js বেশ ভাল। আইই 11 এ সবেমাত্র একটি চেক চেক করেছিলেন, এটি কাজ করে। অনেক ধন্যবাদ!

— রিকি জিয়াও

Answer 6

বেশ কয়েকটি সমাধান রয়েছে তবে সেগুলি HTML5 এর উপর নির্ভর করে এবং এখনও কিছু ব্রাউজারে পুরোপুরি প্রয়োগ করা হয়নি। নীচে উদাহরণগুলি Chrome এবং ফায়ারফক্সে পরীক্ষা করা হয়েছিল (আংশিকভাবে কাজ করে)।

1. ফাইল সমর্থন করার সাথে সংরক্ষণের সাথে ক্যানভাসের উদাহরণ । আপনার document.location.hrefইউআরআই ডেটাতে কেবল সেট করুন ।
2. অ্যাঙ্কর ডাউনলোড উদাহরণ । এটি <a href="your-data-uri" download="filename.txt">ফাইলের নাম নির্দিষ্ট করতে ব্যবহার করে।

Comments

ক্যানভাস উদাহরণ 404

— ক্যারেল Bílek

ডাউনলোড অ্যাট্রিবিউটটি আমার জন্য ক্রোম এবং মোবাইল সাফারিতে পিডিএফ ডেটা ইউআরএল জন্য কাজ করছে।

— bbsimonbb

Answer 7

@ ওউনসিসিএম এবং @ চ্যাষ্ট3 এন এর উত্তরগুলির সংমিশ্রণে, এই ফাংশনটি আইই 11, ফায়ারফক্স এবং ক্রোম থেকে পাঠ্য ডাউনলোডের অনুমতি দেবে। (দুঃখিত, সাফারি বা অপেরাতে আমার অ্যাক্সেস নেই, তবে আপনি যদি চেষ্টা করেন এবং এটি কাজ করে তবে একটি মন্তব্য যোগ করুন))

initiate_user_download = function(file_name, mime_type, text) {
    // Anything but IE works here
    if (undefined === window.navigator.msSaveOrOpenBlob) {
        var e = document.createElement('a');
        var href = 'data:' + mime_type + ';charset=utf-8,' + encodeURIComponent(text);
        e.setAttribute('href', href);
        e.setAttribute('download', file_name);
        document.body.appendChild(e);
        e.click();
        document.body.removeChild(e);
    }
    // IE-specific code
    else {
        var charCodeArr = new Array(text.length);
        for (var i = 0; i < text.length; ++i) {
            var charCode = text.charCodeAt(i);
            charCodeArr[i] = charCode;
        }
        var blob = new Blob([new Uint8Array(charCodeArr)], {type: mime_type});
        window.navigator.msSaveOrOpenBlob(blob, file_name);
    }
}

// Example:
initiate_user_download('data.csv', 'text/csv', 'Sample,Data,Here\n1,2,3\n');

Answer 8

আইই-তে কারও সমস্যা রয়েছে:

দয়া করে এখানে ইত্তেটির মাধ্যমে উত্তরটি উত্সাহিত করুন: আইইতে স্থানীয়ভাবে ক্যানভাস সংরক্ষণ করুন

dataURItoBlob = function(dataURI) {
    var binary = atob(dataURI.split(',')[1]);
    var array = [];
    for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: 'image/png'});
}

var blob = dataURItoBlob(uri);
window.navigator.msSaveOrOpenBlob(blob, "my-image.png");

Answer 9

আপনার সমস্যাটি মূলত "সমস্ত ব্রাউজারগুলি এটিকে সমর্থন করবে না" এ ফোটে।

আপনি একটি ফ্ল্যাশ অবজেক্ট থেকে অবিচ্ছিন্ন ফাইলগুলি পরিবেশন করতে পারেন এবং আনজিপড ফাইলগুলি পরিবেশন করতে পারেন, তবে তারপরে আপনি জেএস-কেবলমাত্র বিশুদ্ধতা হারাবেন (যাইহোক, আপনি বর্তমানে কোনও ধরণের ফ্ল্যাশ ওয়ার্কআউন্ড ছাড়াই "ব্রাউজারে ফাইলগুলি টেনে আনতে" পারবেন কিনা তা আমি নিশ্চিত নই - এটি কি এইচটিএমএল 5 বৈশিষ্ট্য হতে পারে?)