ব্রাউজার থেকে ফাইল হিসাবে জেএসওএন অবজেক্টটি ডাউনলোড করুন

Question

ব্যবহারকারীদের সিএসভি ফাইলে ডেটা স্ট্রিংগুলি ডাউনলোড করতে দেওয়ার জন্য আমার কাছে নিম্নলিখিত কোড রয়েছে।

exportData = 'data:text/csv;charset=utf-8,';
exportData += 'some csv strings';
encodedUri = encodeURI(exportData);
newWindow = window.open(encodedUri);

এটি ঠিক কাজ করে যদি ক্লায়েন্ট কোড চালায় তবে এটি খালি পৃষ্ঠা উত্পন্ন করে এবং সিএসভি ফাইলে ডেটা ডাউনলোড শুরু করে।

তাই আমি জেএসএন এর মতো বস্তুর সাথে এটি করার চেষ্টা করেছি

exportData = 'data:text/json;charset=utf-8,';
exportData += escape(JSON.stringify(jsonObject));
encodedUri = encodeURI(exportData);
newWindow = window.open(encodedUri);

তবে আমি এটিতে JSON ডেটা প্রদর্শিত একটি পৃষ্ঠা দেখছি, এটি ডাউনলোড করছে না।

আমি কিছু গবেষণার মধ্য দিয়ে গিয়েছিলাম এবং এটি এক কাজ করার দাবি করে তবে আমি আমার কোডের সাথে কোনও পার্থক্য দেখছি না।

আমি কি আমার কোডটিতে কিছু মিস করছি?

আমার প্রশ্ন পড়ার জন্য ধন্যবাদ :)

Answer 1

এইভাবে আমি আমার অ্যাপ্লিকেশনটির জন্য এটি সমাধান করেছি:

এইচটিএমএল: <a id="downloadAnchorElem" style="display:none"></a>

জেএস (খাঁটি জেএস, এখানে jQuery নয়):

var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(storageObj));
var dlAnchorElem = document.getElementById('downloadAnchorElem');
dlAnchorElem.setAttribute("href",     dataStr     );
dlAnchorElem.setAttribute("download", "scene.json");
dlAnchorElem.click();

এই ক্ষেত্রে, storageObjআপনি যে জেএস অবজেক্টটি সংরক্ষণ করতে চান তা কি, এবং "দৃশ্যে.জসন" ফলাফল ফাইলের কেবল উদাহরণের নাম।

অন্যান্য প্রস্তাবিতগুলির চেয়ে এই পদ্ধতির নিম্নলিখিত সুবিধা রয়েছে:

• কোনও HTML উপাদান ক্লিক করার প্রয়োজন নেই
• ফলাফল আপনি যেমন চান তেমন নামকরণ করা হবে
• কোন jQuery প্রয়োজন

আমি স্পষ্ট ক্লিক না করে আমার এই আচরণটি প্রয়োজন, যেহেতু আমি জেএস থেকে কোনও সময়ে স্বয়ংক্রিয়ভাবে ডাউনলোডটি ট্রিগার করতে চাই।

জেএস সমাধান (কোনও HTML প্রয়োজন নেই):

  function downloadObjectAsJson(exportObj, exportName){
    var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj));
    var downloadAnchorNode = document.createElement('a');
    downloadAnchorNode.setAttribute("href",     dataStr);
    downloadAnchorNode.setAttribute("download", exportName + ".json");
    document.body.appendChild(downloadAnchorNode); // required for firefox
    downloadAnchorNode.click();
    downloadAnchorNode.remove();
  }

Comments

এটিই একমাত্র সমাধান যা ডেটা = characters 2000 টিরও বেশি অক্ষরের জন্য কাজ করবে। কারণ আপনি ডেটা

— চাপিয়ে রেখেছেন

কেউ কি আমাকে কোনও নির্দিষ্ট বা MDN পৃষ্ঠায় নির্দেশ করতে পারে যা এই পুরো প্রিপেন্ডেড ডেটা-টাইপ জিনিসটি কীভাবে কাজ করে তা আরও বিশদে ব্যাখ্যা করে। "ডেটা: টেক্সট / JSON; অক্ষরসেট = UTF-8"? আমি এটি ব্যবহার করছি, তবে এটি যাদু বলে মনে হচ্ছে, বিশদটি পড়তে দুর্দান্ত লাগবে তবে কীভাবে এটি গুগল করতে হয় তা আমি জানি না।

— পাশেরউইঞ্জু

আইই তে কাজ করে না যদিও আপনাকে যখন 2000 এরও বেশি অক্ষরের একটি বড় ফাইল ডাউনলোড করতে হয়।

— user388969

যদিও এটি সীমা ছাড়াই কাজ করবে না। আপনি কেবল প্রায় 1MB ডেটা ডাউনলোড করতে পারেন। উদাহরণস্বরূপ, var storageObj = []; for (var i=0; i<1000000; ++i) storageObj.push('aaa');ক্রোম 61 এ "ডাউনলোড ব্যর্থ - নেটওয়ার্ক ত্রুটি" দেয়

— ওসইস্কর

@ যশদাভে এর JSON.stringify(exportObj, null, 2)পরিবর্তে ব্যবহার করুন

— টুআইপ্রোভ

Answer 2

একটি উত্তর খুঁজে পেয়েছি।

var obj = {a: 123, b: "4 5 6"};
var data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));

$('<a href="data:' + data + '" download="data.json">download JSON</a>').appendTo('#container');

আমার জন্য ভাল কাজ বলে মনে হচ্ছে।

** সমস্ত কৃতিত্ব @ কাউবয়-বেন-আলমানের কাছে যায়, যিনি উপরের কোডটির লেখক **

Comments

@ সাইবার আপনি আমাকে তৃতীয় লাইনটি ব্যাখ্যা করতে পারেন?

— রাহুল খাতরী 4'15

আপনি ডেটা প্রিপেন্ড করতে চান: আপনার ইউআরএলে, অন্যথায় ব্যবহারকারী অনেক ব্রাউজারে 2000 বর্ণের সীমাতে আঘাত হানতে পারে।

— rjurney

আরে, আমি জানি এটি একটি পুরানো উত্তর তবে, এই সমাধানটি আইইয়ের উপর কাজ করে না জানুন (তাদের সকলের) আইই ডাউনলোড অ্যাট্রিবিউট রেফারেন্সের সাথে পরিচিত নয় - লিংক

— আয়ালন গ্রিনফেল্ড

Answer 3

এটি একটি খাঁটি জেএস সংস্করণ হবে (কাউভয়ের থেকে অভিযোজিত):

var obj = {a: 123, b: "4 5 6"};
var data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));

var a = document.createElement('a');
a.href = 'data:' + data;
a.download = 'data.json';
a.innerHTML = 'download JSON';

var container = document.getElementById('container');
container.appendChild(a);

http://jsfiddle.net/sz76c083/1

Comments

আমি এই প্রশ্নটি জিজ্ঞাসা করার পরে 2 বছর পরেও প্রতিক্রিয়াটির জন্য ধন্যবাদ! আমি jQuery সিনট্যাক্সের চেয়ে খাঁটি জেএস পছন্দ করি।

— ইউজিন ইউ

আপনি ডেটা প্রিপেন্ড করতে চান: আপনার ইউআরএলে, অন্যথায় ব্যবহারকারী অনেক ব্রাউজারে 2000 বর্ণের সীমাতে আঘাত হানতে পারে।

— rjurney

আমি কীভাবে এই ডাউনলোডটিকে পৃষ্ঠার লোড থেকে শুরু করতে পারি। যখনই কোনও ব্যবহারকারী পৃষ্ঠার ইউআরএল ব্রাউজ করবেন তিনি ডাউনলোডের জন্য প্রম্পট পাবেন

— user388969

এজ এ আজকের পরীক্ষা: ডেটা.জসন ডাউনলোড করা যায়নি।

— সারা গাছগুলি

Answer 4

আপনি ব্যবহার করে চেষ্টা করতে পারেন:

• নেটিভ জাভাস্ক্রিপ্ট এপিআই এর ব্লব কনস্ট্রাক্টর এবং
• FileSaver.js saveAs() পদ্ধতি

মোটেও কোনও HTML উপাদানগুলির সাথে ডিল করার দরকার নেই।

var data = {
    key: 'value'
};
var fileName = 'myData.json';

// Create a blob of the data
var fileToSave = new Blob([JSON.stringify(data)], {
    type: 'application/json',
    name: fileName
});

// Save the file
saveAs(fileToSave, fileName);

আপনি যদি এই উত্তরটি অনুসারে JSON প্রিন্ট করতে চান তবে আপনি ব্যবহার করতে পারেন:

JSON.stringify(data,undefined,2)

Comments

SaveAs () ফাইলসভার.জেএস থেকে রয়েছে - github.com/eligrey/FileSaver.js

— গৌতম

"কোনও HTML উপাদানগুলির সাথে একেবারেই ডিল করার দরকার নেই" ... এবং ফাইলসভার.জেএস এর উত্স কোড পড়া ... এটি ঠিক সেইভাবেই করল

— যুদ্ধ

হ্যাঁ। আমি বলতে চাইছিলাম, সরাসরি এইচটিএমএল উপাদানগুলির সাথে ডিল করার দরকার নেই।

— গৌতম

এটি সেরা উত্তর কারণ এটিতে 1MB আকারের সীমা নেই এবং কাস্টম হ্যাকগুলির পরিবর্তে একটি লাইব্রেরি ব্যবহার করা হয়েছে

— oseiskar

ফাইল-সেভার রেফার জন্য আপ-ভোট দিয়েছেন। নিখুঁতভাবে কাজ।

— নুন

Answer 5

নিম্নলিখিত আমার জন্য কাজ করেছে:

/* function to save JSON to file from browser
* adapted from http://bgrins.github.io/devtools-snippets/#console-save
* @param {Object} data -- json object to save
* @param {String} file -- file name to save to 
*/
function saveJSON(data, filename){

    if(!data) {
        console.error('No data')
        return;
    }

    if(!filename) filename = 'console.json'

    if(typeof data === "object"){
        data = JSON.stringify(data, undefined, 4)
    }

    var blob = new Blob([data], {type: 'text/json'}),
        e    = document.createEvent('MouseEvents'),
        a    = document.createElement('a')

    a.download = filename
    a.href = window.URL.createObjectURL(blob)
    a.dataset.downloadurl =  ['text/json', a.download, a.href].join(':')
    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
    a.dispatchEvent(e)
}

এবং তারপরে এটি কল করতে

saveJSON(myJsonObject, "saved_data.json");

Comments

যদিও এটি দুর্দান্ত উত্তর, initMouseEvent()একটি অবহেলিত ওয়েব স্ট্যান্ডার্ড এবং এটি আর ব্যবহার করা উচিত নয়। পরিবর্তে, new MouseEvent()ইন্টারফেস ব্যবহার করুন । যদিও এটি কেবল একটি গৌণ রিফ্যাক্টর।

— মোরক্রো

Answer 6

আমাকে সম্প্রতি একটি বোতাম তৈরি করতে হয়েছিল যা একটি বড় ফর্মের সমস্ত মানের একটি জসন ফাইল ডাউনলোড করবে। আইই / এজ / ক্রোমের সাথে কাজ করার জন্য আমার এটি দরকার ছিল। এটি আমিই করেছি:

function download(text, name, type)
    {
        var file = new Blob([text], {type: type});
        var isIE = /*@cc_on!@*/false || !!document.documentMode;
        if (isIE)
        {
            window.navigator.msSaveOrOpenBlob(file, name);
        }
        else
        {
            var a = document.createElement('a');
            a.href = URL.createObjectURL(file);
            a.download = name;
            a.click();
        }
     }

download(jsonData, 'Form_Data_.json','application/json');

প্রান্তে ফাইলের নাম এবং এক্সটেনশান নিয়ে একটি সমস্যা ছিল তবে এটি লেখার সময় এজ এর সাথে একটি বাগ রয়েছে যা ঠিক হওয়ার কারণে।

আশা করি এটি কাউকে সাহায্য করবে

Comments

এটি ক্রোমে কাজ করেছে, তবে ফায়ারফক্সে কাজ করছে বলে মনে হচ্ছে না ... দয়া করে সহায়তা করুন! codepen.io/anon/pen/ePYPJb

— উর্মিল পরীখ

দুর্দান্ত ফাংশন, document.body.appendChild(a); a.style.display = 'none';এটি ফায়ারফক্সে কাজ করতে যুক্ত করুন ।

— ফ্যাবিয়ান ভন এলার্টস

Answer 7

যারা কেবল আধুনিক ব্রাউজারগুলিকে লক্ষ্য করে তাদের জন্য সহজ, পরিষ্কার সমাধান:

function downloadTextFile(text, name) {
  const a = document.createElement('a');
  const type = name.split(".").pop();
  a.href = URL.createObjectURL( new Blob([text], { type:`text/${type === "txt" ? "plain" : type}` }) );
  a.download = name;
  a.click();
}

downloadTextFile(JSON.stringify(myObj), 'myObj.json');

Comments

ধন্যবাদ, কেবলমাত্র একটি যা আমাকে আকারের সমস্যা দেয় নি

— রোলান্ট

Answer 8

downloadলিঙ্ক সম্পত্তি নতুন এবং ইন্টারনেট এক্সপ্লোরার নেই সমর্থিত (সামঞ্জস্য টেবিল দেখতে এখানে )। এই সমস্যার ক্রস ব্রাউজার সমাধানের জন্য আমি ফাইলসেভার.জেএস এ একবার দেখে নিই

Answer 9

প্রতিক্রিয়া : আপনার রেন্ডার পদ্ধতিতে আপনি যেখানে চান সেখানে এটি যুক্ত করুন।

State রাজ্যে অবজেক্ট :

<a
  className="pull-right btn btn-primary"
  style={{ margin: 10 }}
  href={`data:text/json;charset=utf-8,${encodeURIComponent(
  JSON.stringify(this.state.objectToDownload)
  )}`}
  download="data.json"
>
  DOWNLOAD DATA AS JSON
</a>

• অবজেক্ট সাজসরঞ্জাম মধ্যে :

<a
  className="pull-right btn btn-primary"
  style={{ margin: 10 }}
  href={`data:text/json;charset=utf-8,${encodeURIComponent(
  JSON.stringify(this.props.objectToDownload)
  )}`}
  download="data.json"
>
  DOWNLOAD DATA AS JSON
</a>

শ্রেণীর নাম এবং শৈলী alচ্ছিক, আপনার প্রয়োজন অনুসারে শৈলীটি পরিবর্তন করুন।

Answer 10

অন্য একটি মাইম টাইপ সেট করার চেষ্টা করুন: exportData = 'data:application/octet-stream;charset=utf-8,';

সেভ ডায়ালগটিতে ফাইলের নাম নিয়ে সমস্যা থাকতে পারে।

Comments

দেরীতে আপনার কাছে আসার জন্য দুঃখিত। আমি আপনার উত্তরটি চেষ্টা করেছিলাম এবং এটি ফাইল ডাউনলোড করে তবে এতে ভুল ডেটা থাকে .. :(

— ইউজিন ইউ

data = "data:application/octet-stream;charset=utf-8," + encodeURIComponent(JSON.stringify(data)); window.open(data); এটি আমার পক্ষে কাজ করেছে ... এটি কেবল ফাইলটি "ডাউনলোড" হিসাবে ডাউনলোড করে তবে আমি যে তথ্যটি স্ট্রিংফাই করি এবং ইউরি-এনকোড করা হয় তা হ'ল।

— জেসন ভিনিয়ার

Answer 11

আপনি যদি ফাইলের চেয়ে কনসোল স্নিপেট, রেসার পছন্দ করেন তবে আপনি এটি করতে পারেন:

window.open(URL.createObjectURL(
    new Blob([JSON.stringify(JSON)], {
      type: 'application/binary'}
    )
))