কেবল জাভাস্ক্রিপ্ট ব্যবহার করে ফাইলের জন্য ডেটা লেখা সম্ভব?


190

আমি জাভাস্ক্রিপ্ট ব্যবহার করে বিদ্যমান ফাইলে ডেটা লিখতে চাই। আমি এটি কনসোলে মুদ্রণ করতে চাই না। আমি আসলে ডেটা লিখতে চাই abc.txt। আমি অনেক উত্তর উত্তর পড়েছি কিন্তু যেখানেই তারা কনসোলে মুদ্রণ করছে। কোনও স্থানে তারা কোড দিয়েছে তবে এটি কার্যকর হচ্ছে না। সুতরাং দয়া করে যে কেউ আমাকে ফাইলটিতে ডেটা লিখতে কীভাবে সহায়তা করতে পারে।

আমি কোডটি উল্লেখ করেছি কিন্তু এটি কাজ করছে না: এটি দেওয়ার ত্রুটি:

আনকাচড টাইপ এরির: অবৈধ নির্মাণকারী

ক্রোম এবং

সিকিউরিটি এরির: অপারেশনটি নিরাপত্তাহীন।

মজিলায়

var f = "sometextfile.txt";

writeTextFile(f, "Spoon")
writeTextFile(f, "Cheese monkey")
writeTextFile(f, "Onion")

function writeTextFile(afilename, output)
{
  var txtFile =new File(afilename);
  txtFile.writeln(output);
  txtFile.close();
}

সুতরাং আমরা কি কেবল জাভাস্ক্রিপ্ট ব্যবহার করে ফাইল ফাইল করতে তথ্য লিখতে পারি বা না?


2
: এই আউট ভাই চেক করুন stackoverflow.com/questions/585234/...
welbornio

উত্তর:


89

এর জন্য কিছু পরামর্শ -

  1. আপনি যদি ক্লায়েন্ট মেশিনে কোনও ফাইল লেখার চেষ্টা করছেন তবে আপনি কোনও ক্রস-ব্রাউজার উপায়ে এটি করতে পারবেন না। ফাইলের পড়তে / লেখার জন্য অ্যাক্টিভএক্স অবজেক্টগুলি ব্যবহার করতে "বিশ্বস্ত" অ্যাপ্লিকেশনগুলি সক্ষম করার জন্য আইইয়ের পদ্ধতি রয়েছে।
  2. আপনি যদি এটি আপনার সার্ভারে সংরক্ষণের চেষ্টা করছেন তবে কেবলমাত্র সার্ভারের পাঠ্য ডেটা আপনার সার্ভারে প্রেরণ করুন এবং কিছু সার্ভারের পাশের ভাষা ব্যবহার করে ফাইল রাইটিং কোডটি কার্যকর করুন।
  3. যথেষ্ট ছোট ক্লায়েন্টের পক্ষ থেকে কিছু তথ্য সঞ্চয় করতে, আপনি কুকিজের জন্য যেতে পারেন।
  4. স্থানীয় স্টোরেজের জন্য এইচটিএমএল 5 এপিআই ব্যবহার করে।

27
এইচটিএমএল 5 এপিআই কেবল সর্বোচ্চ 5 এমবিতে নেওয়া হয়।
পেসারিয়ার

হ্যাঁ, আপনি এটি নির্বাচন না করে সিস্টেম ফাইলটিতে লিখতে পারবেন না। সরকারী দস্তাবেজগুলি পড়ুন: w3.org/TR/file-upload/# সুরক্ষা- আলোচনা
মনোজ ঘেদিয়া

216

আপনি Blobএবং ব্যবহার করে ব্রাউজারে ফাইল তৈরি করতে পারেন URL.createObjectURL। সমস্ত সাম্প্রতিক ব্রাউজারগুলি এটি সমর্থন করে

আপনি যে ফাইলটি তৈরি করেন সেগুলি আপনি সরাসরি সংরক্ষণ করতে পারবেন না, যেহেতু এটির ফলে প্রচুর সুরক্ষা সমস্যা দেখা দেয় তবে আপনি এটি ব্যবহারকারীর জন্য ডাউনলোড লিঙ্ক হিসাবে সরবরাহ করতে পারেন। ডাউনলোড বৈশিষ্ট্যাবলী সমর্থন করে এমন ব্রাউজারগুলিতে আপনি লিঙ্কটির downloadবৈশিষ্ট্যের মাধ্যমে কোনও ফাইলের নাম প্রস্তাব করতে পারেন । অন্য যে কোনও ডাউনলোডের মতো, ফাইল ডাউনলোড করা ব্যবহারকারীদের ফাইলের নামটি চূড়ান্ত হবে।

var textFile = null,
  makeTextFile = function (text) {
    var data = new Blob([text], {type: 'text/plain'});

    // If we are replacing a previously generated file we need to
    // manually revoke the object URL to avoid memory leaks.
    if (textFile !== null) {
      window.URL.revokeObjectURL(textFile);
    }

    textFile = window.URL.createObjectURL(data);

    // returns a URL you can use as a href
    return textFile;
  };

এটি থেকে একটি স্বেচ্ছাসেবী পাঠ্য সংরক্ষণ করতে এই কৌশলটি ব্যবহার করে এমন একটি উদাহরণ এখানে textarea

আপনি অবিলম্বে একটি লিঙ্কে ক্লিক ব্যবহারকারীর প্রয়োজন পরিবর্তে ডাউনলোড শুরু করার চান, আপনি মাউস ঘটনা ব্যবহার লিঙ্কে করা একটি মাউস ক্লিক অনুকরণ করতে Lifecube এর উত্তর করেনি। আমি একটি আপডেটেড উদাহরণ তৈরি করেছি যা এই কৌশলটি ব্যবহার করে।

  var create = document.getElementById('create'),
    textbox = document.getElementById('textbox');

  create.addEventListener('click', function () {
    var link = document.createElement('a');
    link.setAttribute('download', 'info.txt');
    link.href = makeTextFile(textbox.value);
    document.body.appendChild(link);

    // wait for the link to be added to the document
    window.requestAnimationFrame(function () {
      var event = new MouseEvent('click');
      link.dispatchEvent(event);
      document.body.removeChild(link);
    });

  }, false);

1
@ ফার্স্টব্লড কোন অংশটি কাজ করছে না, আপনি কি ত্রুটি পেয়ে যাচ্ছেন? ফাইল এবং লিঙ্ক তৈরির কাজটি সাফারি 7+ এ কাজ করা উচিত (আমি বিশ্বাস করি যে আপনি যদি প্রাক-সংস্করণ ব্যবহার করেন তবে সাফারি 6 এ স্টাফ ব্যবহার করে স্টাফও ব্যবহার করা উচিত URL)। ফাইলের নামটি সেট করা সাফারিটিতে কাজ করবে না কারণ এটি এখনও downloadবৈশিষ্ট্যটি কার্যকর করে নি ।
অকেজো কোড

1
আমি সাফারি 5.1 এ চেষ্টা করছিলাম :)
প্রথম রক্ত

1
নতুন রেখার অক্ষরটি সংরক্ষিত ডকটি থেকে নিখোঁজ রয়েছে
বেনি

1
@ বেনি নতুন লাইন অক্ষর আছে। জেএস ইউএনআইএক্স \nপ্রোগ্রামের মতো নতুন লাইনের প্রতিনিধিত্ব করতে নিউলাইন চরিত্রটি ব্যবহার করে । আপনি সম্ভবত এটি একটি উইন্ডোজ প্রোগ্রামে দেখছেন যেমন নোটপ্যাড যা \nচরিত্রটিকে নতুন লাইন হিসাবে রেন্ডার করে না । আপনি যদি চান নতুন লাইন সঠিকভাবে মধ্যে টেক্সট নির্বাণ আগে, নোটপ্যাড এবং কিছু অন্যান্য উইন্ডোজ প্রোগ্রাম অনুষ্ঠিত হবে Blobপ্রতিটি প্রতিস্থাপন \nসঙ্গে \r\n: text = text.replace(/\n/g, '\r\n')
অপ্রয়োজনীয় কোড

2
@ user3241111 সত্যই নয়, এটি কাজ করা উচিত। এর মতো স্টাফগুলি সমস্ত অস্বাভাবিক নয়। আমি হ্যাকারকে এটি করার উপায়গুলি দেখেছি ;-) অতীতে আমি লিঙ্কে কেবল ফাইল তৈরি করেই চলে এসেছি mouseover, তবে এটি কতটা প্রক্রিয়াজাতকরণ করছে তার উপর নির্ভর করে এটি দুর্দান্ত কাজ করতে পারে না।
অনুপযুক্ত কোড

41

আপনি যদি ব্রাউজার জাভাস্ক্রিপ্টের বিষয়ে কথা বলছেন তবে আপনি সুরক্ষার কারণে স্থানীয় ফাইলে সরাসরি ডেটা লিখতে পারবেন না। এইচটিএমএল 5 নতুন এপিআই আপনাকে কেবল ফাইলগুলি পড়তে দেয়।

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

    function download(strData, strFileName, strMimeType) {
    var D = document,
        A = arguments,
        a = D.createElement("a"),
        d = A[0],
        n = A[1],
        t = A[2] || "text/plain";

    //build download link:
    a.href = "data:" + strMimeType + "charset=utf-8," + escape(strData);


    if (window.MSBlobBuilder) { // IE10
        var bb = new MSBlobBuilder();
        bb.append(strData);
        return navigator.msSaveBlob(bb, strFileName);
    } /* end if(window.MSBlobBuilder) */



    if ('download' in a) { //FF20, CH19
        a.setAttribute("download", n);
        a.innerHTML = "downloading...";
        D.body.appendChild(a);
        setTimeout(function() {
            var e = D.createEvent("MouseEvents");
            e.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            a.dispatchEvent(e);
            D.body.removeChild(a);
        }, 66);
        return true;
    }; /* end if('download' in a) */



    //do iframe dataURL download: (older W3)
    var f = D.createElement("iframe");
    D.body.appendChild(f);
    f.src = "data:" + (A[2] ? A[2] : "application/octet-stream") + (window.btoa ? ";base64" : "") + "," + (window.btoa ? window.btoa : escape)(strData);
    setTimeout(function() {
        D.body.removeChild(f);
    }, 333);
    return true;
}

এটি ব্যবহার করতে:

download('the content of the file', 'filename.txt', 'text/plain');


আশ্চর্যজনক, জীবনকাল আমার আসলে সেই কার্যকারিতাটির প্রয়োজন ছিল, যদিও আমি চাই না যে ব্যবহারকারী কোনও ফাইল ডাউনলোড হচ্ছে তা জানতে চাই, তবে আমি এটি ব্যবহারকারী থেকে সম্পূর্ণ গোপন রাখতে চাই কারণ এটি ব্যবহারকারীকে দেখতে পাবে যে কিছু ফাইল করার পরে কিছু ফাইল স্বয়ংক্রিয়ভাবে ডাউনলোড হচ্ছে see একটি ওয়েবসাইটে, যদিও আমরা এটি কেবল বিপণন ডেটা সংগ্রহের উদ্দেশ্যে ব্যবহার করছি, আপনি কী দয়া করে ফাইলটি ব্যবহারকারীর কাছে দৃশ্যমান না করে ডাউনলোড করবেন?
জাস্ট_অনোর্ড_ডিভোপার

1
উপরের সমাধানটি এক ধরণের পুরানো। আপনি এইচটিএমএল 5 জাভাস্ক্রিপ্ট লাইব বিবেচনা করতে হতে পারে। github.com/eligrey/FileSaver.js
লাইফিকিউব

@Lifecube FileSaver.js ব্যবহার করে, ব্যবহারকারীর মিথস্ক্রিয়া ছাড়াই কোনও ফাইলটিতে স্বয়ংক্রিয়ভাবে পাঠ্য সংরক্ষণ করার কোনও উপায় আছে? ধন্যবাদ! জেএসে নতুন; আপনার সমস্ত সহায়তার প্রশংসা করা হয়েছে
নাথান

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

দ্রষ্টব্য আমি উইন্ডোজ 10 তে ফায়ারফক্স ভি 76 এ html হিসাবে একটি এইচটিএমএল ফাইল ডাউনলোড করতে এটি পেতে পারি না ডাউনলোডটি .pdf এর শেষে যুক্ত হয়েছে।
সিএসচোয়ার্জ

23

উপরের উত্তরটি দরকারী তবে, আমি এমন একটি কোড পেয়েছি যা আপনাকে বোতাম ক্লিকে সরাসরি টেক্সট ফাইল ডাউনলোড করতে সহায়তা করে। এই কোডটিতে আপনি নিজের ইচ্ছামত পরিবর্তন করতে পারেন filename। এটি HTML5 সহ বিশুদ্ধ জাভাস্ক্রিপ্ট ফাংশন। আমার জন্য কাজ কর!

function saveTextAsFile()
{
    var textToWrite = document.getElementById("inputTextToSave").value;
    var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
    var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;
      var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    if (window.webkitURL != null)
    {
        // Chrome allows the link to be clicked
        // without actually adding it to the DOM.
        downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
    }
    else
    {
        // Firefox requires the link to be added to the DOM
        // before it can be clicked.
        downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
        downloadLink.onclick = destroyClickedElement;
        downloadLink.style.display = "none";
        document.body.appendChild(downloadLink);
    }

    downloadLink.click();
}

2
চমৎকার। অপেরাতে আমার জন্য কাজ করে। অজানা ফাংশনটি প্রতিস্থাপন করার দরকার বাদে: "ডকুমেন্ট.বডি.রেমভিল্ড (ইভেন্ট। স্টেট)"
স্টিভ ও

3
ব্যবহার করার সময় আপনার সতর্কতা অবলম্বন করা উচিত createObjectURL। জেএস-এর বেশিরভাগ জিনিসের বিপরীতে, আপনি যে বস্তুগুলি এর সাথে তৈরি করেন সেগুলি স্বয়ংক্রিয়ভাবে আবর্জনা সংগ্রহ করা হয় না যখন তাদের আর কোনও উল্লেখ থাকে না; পৃষ্ঠাটি বন্ধ হয়ে গেলে এগুলি কেবল সংগ্রহ করা আবর্জনা। যেহেতু আপনি URL.revokeObjectURL()এই কোডটি সর্বশেষ কল দ্বারা ব্যবহৃত মেমরিটি মুক্ত করতে ব্যবহার করছেন না , তাই আপনার একটি মেমরি ফাঁস হয়েছে; যদি ব্যবহারকারী saveTextFileএকাধিকবার কল করে তবে তারা আরও এবং বেশি মেমরি গ্রহণ করতে থাকবে কারণ আপনি এটি কখনও প্রকাশ করেন নি।
অকেজো কোড


6

ক্ষেত্রে যদি নতুন Blobসমাধানটি ব্যবহার করা সম্ভব না হয় তবে এটি অবশ্যই আধুনিক ব্রাউজারের সেরা সমাধান, এটি এখনও এই সহজ পদ্ধতির ব্যবহার সম্ভব, উপায়টির সাথে ফাইল আকারের একটি সীমা রয়েছে:

function download() {
                var fileContents=JSON.stringify(jsonObject, null, 2);
                var fileName= "data.json";

                var pp = document.createElement('a');
                pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents));
                pp.setAttribute('download', fileName);
                pp.click();
            }
            setTimeout(function() {download()}, 500);

$('#download').on("click", function() {
  function download() {
    var jsonObject = {
      "name": "John",
      "age": 31,
      "city": "New York"
    };
    var fileContents = JSON.stringify(jsonObject, null, 2);
    var fileName = "data.json";

    var pp = document.createElement('a');
    pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents));
    pp.setAttribute('download', fileName);
    pp.click();
  }
  setTimeout(function() {
    download()
  }, 500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="download">Download me</button>


3

ফাইলটি তৈরি করতে ব্যবহারকারীর উপরের @ অকেজো-কোড ( https://stackoverflow.com/a/21016088/327386 ) ব্যবহার করুন। আপনি যদি স্বয়ংক্রিয়ভাবে ফাইলটি ডাউনলোড করতে চান তবে textFileএই ফাংশনে সবেমাত্র উত্পন্ন হওয়াটি পাস করুন :

var downloadFile = function downloadURL(url) {
    var hiddenIFrameID = 'hiddenDownloader',
    iframe = document.getElementById(hiddenIFrameID);
    if (iframe === null) {
        iframe = document.createElement('iframe');
        iframe.id = hiddenIFrameID;
        iframe.style.display = 'none';
        document.body.appendChild(iframe);
    }
    iframe.src = url;
}

5
কেন এটি একটি ডাউন ভোট পেয়েছে তা জানেন না। এটা আমার জন্য কাজ করে. যে সকল লোকেরা ভোট প্রত্যাখ্যান করেছেন তাদের কমপক্ষে একটি মন্তব্য করা উচিত কেন এটি ভোট পড়েছে!
আরপিএম

5
আমি ডাউনটা করি নি, তবে ভোট দেওয়ার বিষয়ে মন্তব্য করা সরাসরি নিরুৎসাহিত করা হয়েছে। ব্যবহারকারীর কোনও পোস্টের সামগ্রীতে মন্তব্য করা উচিত, এবং কোনও পোস্টের সামগ্রীতে ভোট দেওয়া উচিত, তবে তাদের ভোটে তাদের মন্তব্য করা উচিত নয়। কেউ মন্তব্য না করে ভোট দিলে আপনি ভোটদানের উপর নির্ভর করে "এই উত্তরটি দরকারী" বা "এই উত্তরটি কার্যকর নয়" এর অর্থ নিতে পারেন।

এটি কাজ করছে না .. এটি ফাইলটি ডাউনলোড করে না। এটি কেবল একটি iframe তৈরি করে যা গোপন থাকে। আমি ক্রোম এবং ফায়ারফক্সে পরীক্ষা করেছি
নাইভকোডার

2

আমি এখানে ভাল উত্তর পেয়েছি, কিন্তু একটি সহজ উপায়ও খুঁজে পেয়েছি।

ব্লবটি তৈরি করার বোতামটি এবং ডাউনলোড লিঙ্কটি একটি লিঙ্কে একত্রিত হতে পারে, কারণ লিঙ্ক উপাদানটিতে একটি অনক্লিক বৈশিষ্ট্য থাকতে পারে। (বিপরীতটি সম্ভব নয় বলে মনে হয়, একটি বোতামে href যুক্ত করা কার্যকর হয় না))

bootstrapস্টাইলিং বাদে আপনি লিঙ্কটি বোতাম হিসাবে স্টাইল করতে পারেন , যা এখনও খাঁটি জাভাস্ক্রিপ্ট।

বোতাম এবং ডাউনলোড লিঙ্কের সংমিশ্রণটিও কোড হ্রাস করে, কারণ এই কদর্য getElementByIdকলগুলির মধ্যে কম প্রয়োজন।

এই উদাহরণটিতে পাঠ্য-ব্লবটি তৈরি করতে এবং এটি ডাউনলোড করতে কেবল একটি বোতাম ক্লিক করতে হবে:

<a id="a_btn_writetofile" download="info.txt" href="#" class="btn btn-primary" 
   onclick="exportFile('This is some dummy data.\nAnd some more dummy data.\n', 'a_btn_writetofile')"
>
   Write To File
</a>

<script>
    // URL pointing to the Blob with the file contents
    var objUrl = null;
    // create the blob with file content, and attach the URL to the downloadlink; 
    // NB: link must have the download attribute
    // this method can go to your library
    function exportFile(fileContent, downloadLinkId) {
        // revoke the old object URL to avoid memory leaks.
        if (objUrl !== null) {
            window.URL.revokeObjectURL(objUrl);
        }
        // create the object that contains the file data and that can be referred to with a URL
        var data = new Blob([fileContent], { type: 'text/plain' });
        objUrl = window.URL.createObjectURL(data);
        // attach the object to the download link (styled as button)
        var downloadLinkButton = document.getElementById(downloadLinkId);
        downloadLinkButton.href = objUrl;
    };
</script>

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.