লিঙ্ক ছাড়াই জাভাস্ক্রিপ্ট ব্লব ফাইলের নাম

Question

উইন্ডো.লোকেশনের মাধ্যমে জোর করে ডাউনলোড করার সময় আপনি জাভাস্ক্রিপ্টে কোনও ব্লব ফাইলের নাম কীভাবে সেট করবেন?

function newFile(data) {
    var json = JSON.stringify(data);
    var blob = new Blob([json], {type: "octet/stream"});
    var url  = window.URL.createObjectURL(blob);
    window.location.assign(url);
}

উপরের কোডটি চালানো কোনও পৃষ্ঠা রিফ্রেশ ছাড়াই তত্ক্ষণাত্ একটি ফাইল ডাউনলোড করে যা দেখে মনে হচ্ছে:

bfefe410-8d9c-4883-86c5-d76c50a24a1d

আমি পরিবর্তে ফাইলটি আমার- download.json হিসাবে সেট করতে চাই ।

Answer 1

ফাইলসেভার.জেএস দ্বারা ব্যবহৃত কৌশলটি সম্পর্কে আমি কেবলমাত্র অবগত আছি :

1. একটি লুকানো <a>ট্যাগ তৈরি করুন ।
2. hrefব্লবের URL এ এর বৈশিষ্ট্যটি সেট করুন ।
3. downloadফাইলটির নামের সাথে এর বৈশিষ্ট্যটি সেট করুন ।
4. <a>ট্যাগ ক্লিক করুন ।

এখানে সরলীকৃত উদাহরণ ( jsfiddle ):

var saveData = (function () {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    return function (data, fileName) {
        var json = JSON.stringify(data),
            blob = new Blob([json], {type: "octet/stream"}),
            url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
    };
}());

var data = { x: 42, s: "hello, world", d: new Date() },
    fileName = "my-download.json";

saveData(data, fileName);

আমি এই উদাহরণটি লিখেছি কেবল ধারণাটি চিত্রিত করার জন্য, প্রোডাকশন কোডে ফাইলসভার.জেএস ব্যবহার করুন।

মন্তব্য

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

Comments

@ অ্যাশব্লিউ "ডাউনলোড" বৈশিষ্ট্যটির এইচটিএমএল 5 দরকার। আমার কোডটি একটি উদাহরণ, আপনি ফাইলসভার.জেএসএস ডেমো পৃষ্ঠাটিও চেষ্টা করতে পারেন: eligrey.com/demos/FileSaver.js

— kol

মজার বিষয় হল, আপনি যদি বার বার এইভাবে কোনও txt ডাউনলোড করার চেষ্টা করেন (jsfiddle.net এ রান বোতাম টিপুন বার বার), ডাউনলোডটি কখনও কখনও ব্যর্থ হয়।

— kol

কেবল উল্লেখ করতে চেয়েছিলেন যে এই দ্রবণটি নির্দিষ্ট প্রান্তিকের চেয়ে বেশি আকারের ফাইলগুলির জন্য কাজ করবে না। যেমন-> ক্রোমের জন্য 2 এমবি। এই আকারটি ব্রাউজার থেকে ব্রাউজারে পরিবর্তিত হয়।

— মনোজাদমস

এটি আমার পক্ষে কাজ করে না কারণ আমার একটি নতুন ট্যাবে ফাইলটি খুলতে হবে। আমাকে ক্রোমে একটি পিডিএফ দেখাতে হবে, তবে ইউআরএল টুলবারে আমার একটি ব্যবহারকারী বান্ধব নামটি দেখাতে হবে এবং যদি ব্যবহারকারী ডাউনলোড আইকনটির মাধ্যমে ডাউনলোড করতে চান তবে আমাকে একই ব্যবহারকারীর বন্ধুত্বপূর্ণ নামটি ফাইলে রাখতে হবে।

— অ্যাড্রিয়ান

কেবল যোগ করার জন্য, এটি কাজ করার জন্য আপনাকে শরীরে কোনও ট্যাগটি মাউন্ট করার দরকার নেই (ক্রোমে এখনই চেষ্টা করা হয়েছে)

— -এ কোড

Answer 2

আমি কেবল ইন্টারনেট এক্সপ্লোরার (বেশিরভাগ আধুনিক সংস্করণ, যাইহোক) এর সমর্থন সহ গৃহীত উত্তরটি প্রসারিত করতে এবং jQuery ব্যবহার করে কোডটি পরিপাটি করতে চেয়েছিলাম:

$(document).ready(function() {
    saveFile("Example.txt", "data:attachment/text", "Hello, world.");
});

function saveFile (name, type, data) {
    if (data !== null && navigator.msSaveBlob)
        return navigator.msSaveBlob(new Blob([data], { type: type }), name);
    var a = $("<a style='display: none;'/>");
    var url = window.URL.createObjectURL(new Blob([data], {type: type}));
    a.attr("href", url);
    a.attr("download", name);
    $("body").append(a);
    a[0].click();
    window.URL.revokeObjectURL(url);
    a.remove();
}

এখানে একটি উদাহরণ ফিল্ডল । গডস্পিড ।

Comments

নিখুঁতভাবে কাজ করেছেন।

— N8allan

আমি গৃহীত সমাধানটি ব্যবহার করেছি তবে এটি ফায়ারফক্সে কার্যকর হয়নি! আমি এখনও জানি না কেন। আপনার সমাধানটি ফায়ার ফক্সে কাজ করেছে। ধন্যবাদ।

— ইলাহেব

Answer 3

উপরের সমাধান হিসাবে একই নীতি। তবে আমার ফায়ারফক্স ৫২.০ (৩২ বিট) নিয়ে সমস্যা হয়েছিল যেখানে বড় ফাইল (> ৪০ এমবিাইট) এলোমেলো অবস্থানে ছাঁটাই করা হয়। রিভেকওবজেক্টউআরএল () এর কলকে পুনঃসূচীকরণ এই সমস্যাটিকে সংশোধন করে।

function saveFile(blob, filename) {
  if (window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(blob, filename);
  } else {
    const a = document.createElement('a');
    document.body.appendChild(a);
    const url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = filename;
    a.click();
    setTimeout(() => {
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    }, 0)
  }
}

jsfiddle উদাহরণ

Comments

আমি দেখতে পেলাম যে এই সেটটাইমআউট () হ্যাকটি এমএস এজকে ঠিক করেছে, যেখানে ফাইলটি ডাউনলোড হবে না। তবে কেবলমাত্র প্রত্যাহার অবজেক্ট URL () -র কলটি বিলম্বিত হওয়া দরকার।

— রাসেল ফিলিপস

আমি দেখতে পেয়েছি "" if (window.navigator.msSaveOrOpenBlob) "আমার জন্য কৌশলটি কি করেছিল

— জ্যাক অলিভিয়ার

Answer 4

দেরীতে, তবে যেহেতু আমার একই সমস্যা ছিল আমি আমার সমাধানটি যুক্ত করছি:

function newFile(data, fileName) {
    var json = JSON.stringify(data);
    //IE11 support
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        let blob = new Blob([json], {type: "application/json"});
        window.navigator.msSaveOrOpenBlob(blob, fileName);
    } else {// other browsers
        let file = new File([json], fileName, {type: "application/json"});
        let exportUrl = URL.createObjectURL(file);
        window.location.assign(exportUrl);
        URL.revokeObjectURL(exportUrl);
    }
}

Comments

ধন্যবাদ @ বেন এটি ভাল কাজ করছে। কোনও ডোম উপাদান নেই, ক্লিক ইভেন্টের মতো ট্রিগার করতে কিছুই পছন্দ করে না। এটি যথাযথ এক্সটেনশান সহ দুর্দান্ত কাজ করে। তবে প্রদত্ত ফাইলের নামটি বিবেচনা করা হয় না, "<Mobile_url_id> .csv" "<myfileName> .csv" এর পরিবর্তে ডাউনলোড করা হয়

— রাম বাবু এস

ফায়ারফক্সে কল করার revokeObjectURLপরে কল করা location.assign, তবে ক্রোমে ডাউনলোডটি বিরতি দেয়।

— ফ্রেড

নোট করুন যে "এজ ফাইল কনস্ট্রাক্টরকে সমর্থন করে না।" সূত্র। caniuse.com/#feat=fileapi

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

এটি সঠিক উত্তর হওয়া উচিত। ডোম গাছে অকেজো বস্তু তৈরির কোনও অর্থ নেই

— লুইজ ফিলিপ

এখন এটি '20 জানুয়ারীর পর থেকে

— লুইজ ফিলিপ

Answer 5

saveFileOnUserDevice = function(file){ // content: blob, name: string
        if(navigator.msSaveBlob){ // For ie and Edge
            return navigator.msSaveBlob(file.content, file.name);
        }
        else{
            let link = document.createElement('a');
            link.href = window.URL.createObjectURL(file.content);
            link.download = file.name;
            document.body.appendChild(link);
            link.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));
            link.remove();
            window.URL.revokeObjectURL(link.href);
        }
    }

Comments

এটিতে কোনও নতুন উইন্ডো খোলার কোনও উপায় আছে?

— এনরিক আল্টুনা

আমি মনে করি আপনি link.click()মাউস ইভেন্ট প্রেরণের পরিবর্তে কল করতে পারেন ।

— ফ্রেড

Answer 6

"Cat.jpg" হিসাবে একটি url থেকে একটি বিড়ালের ফটো সংরক্ষণ করার জন্য ডাউনলোড বোতামের কার্যকারী উদাহরণ :

এইচটিএমএল:

<button onclick="downloadUrl('https://i.imgur.com/AD3MbBi.jpg', 'cat.jpg')">Download</button>

javascript:

function downloadUrl(url, filename) {
  let xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.responseType = "blob";
  xhr.onload = function(e) {
    if (this.status == 200) {
      const blob = this.response;
      const a = document.createElement("a");
      document.body.appendChild(a);
      const blobUrl = window.URL.createObjectURL(blob);
      a.href = blobUrl;
      a.download = filename;
      a.click();
      setTimeout(() => {
        window.URL.revokeObjectURL(blobUrl);
        document.body.removeChild(a);
      }, 0);
    }
  };
  xhr.send();
}

Answer 7

window.location.assign আমার পক্ষে কাজ করে না। এটি ডাউনলোড হয় ঠিক আছে তবে উইন্ডোজ প্ল্যাটফর্মে কোনও সিএসভি ফাইলের জন্য এক্সটেনশন ছাড়াই ডাউনলোডগুলি। নিম্নলিখিত আমার জন্য কাজ করে।

    var blob = new Blob([csvString], { type: 'text/csv' });
    //window.location.assign(window.URL.createObjectURL(blob));
    var link = window.document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    // Construct filename dynamically and set to link.download
    link.download = link.href.split('/').pop() + '.' + extension; 
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

Answer 8

এটা আমার সমাধান। আমার দৃষ্টিকোণ থেকে, আপনি বাইপাস করতে পারবেন না <a>।

function export2json() {
  const data = {
    a: '111',
    b: '222',
    c: '333'
  };
  const a = document.createElement("a");
  a.href = URL.createObjectURL(
    new Blob([JSON.stringify(data, null, 2)], {
      type: "application/json"
    })
  );
  a.setAttribute("download", "data.json");
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

<button onclick="export2json()">Export data to json file</button>