ব্যবহারকারীর ডাউনলোডের জন্য মেমোরিতে একটি ফাইল তৈরি করবেন, তবে সার্ভারের মাধ্যমে নয়?

Question

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

Comments

আরও দেখুন: জাভাস্ক্রিপ্ট: ফাইল তৈরি এবং সংরক্ষণ করুন

— হেনরি উডি

Answer 1

আপনি ডেটা ইউআরআই ব্যবহার করতে পারেন। ব্রাউজার সমর্থন পরিবর্তিত হয়; দেখতে উইকিপিডিয়া । উদাহরণ:

<a href="data:application/octet-stream;charset=utf-16le;base64,//5mAG8AbwAgAGIAYQByAAoA">text file</a>

অক্টেট-স্ট্রিমটি একটি ডাউনলোড প্রম্পটকে বাধ্য করা। অন্যথায় এটি সম্ভবত ব্রাউজারে খুলবে।

সিএসভির জন্য আপনি ব্যবহার করতে পারেন:

<a href="data:application/octet-stream,field1%2Cfield2%0Afoo%2Cbar%0Agoo%2Cgai%0A">CSV Octet</a>

JsFizz ডেমো চেষ্টা করে দেখুন ।

Comments

এটি কোনও ক্রস ব্রাউজার সমাধান নয় তবে অবশ্যই দেখার মতো মূল্যবান। উদাহরণস্বরূপ আইআই ইউরি ডেটাতে সমর্থন সীমাবদ্ধ করে। IE 8 আকারটি 32KB এবং IE 7 এর মধ্যে সীমাবদ্ধ করে এর চেয়ে কম সমর্থন করে না।

— দারিন দিমিত্রভ

ক্রোম সংস্করণ 19.0.1084.46 এ, এই পদ্ধতিটি নিম্নলিখিত সতর্কতা উত্পন্ন করে: "সংস্থানটি দস্তাবেজ হিসাবে ব্যাখ্যা করা হয়েছে তবে এমআইএমআই টাইপ পাঠ্য / সিএসভি দিয়ে স্থানান্তরিত হয়েছে:" ডেটা: পাঠ্য / সিএসভি, ফিল্ড 1% 2Cfield2% 0Afoo% 2Cbar% 0 অগু% 2Cgai% 0 এ "। " একটি ডাউনলোড ট্রিগার করা হয় না

— ক্রিস

এটি এখন ক্রোমে কাজ করে (v20 এবং v21 এর বিপরীতে পরীক্ষিত) তবে আই 9 নয় (এটি কেবল জেএসফিডাল হতে পারে তবে কোনওভাবে আমি এতে সন্দেহ করি)।

— ইয়ারক্যাম

সঠিক চরসেটটি অবশ্যই অবশ্যই ইউটিএফ -16, যদি আপনার কোডটি ইউটিএফ -8 এ রূপান্তর না করে থাকে। জাভাস্ক্রিপ্ট অভ্যন্তরীণভাবে ইউটিএফ -16 ব্যবহার করে। আপনার কাছে যদি কোনও পাঠ্য বা সিএসভি ফাইল থাকে তবে 'fe uffff' দিয়ে স্ট্রিংটি শুরু করুন, UTF-16BE এর জন্য বাইট অর্ডার চিহ্ন এবং পাঠ্য সম্পাদকরা নন-এএসসিআইআই অক্ষরগুলি সঠিকভাবে পড়তে সক্ষম হবেন।

— লার্প্পারস

সঠিক ফাইলের নাম এবং এক্সটেনশান থাকতে এবং আপনার ওএসকে এটি দিয়ে কী করতে হবে তা জানানোর জন্য কেবল ডাউনলোড = "txt.csv" বৈশিষ্ট্য যুক্ত করুন।

— elshnkhll

Answer 2

HTML5 প্রস্তুত ব্রাউজারগুলির জন্য সহজ সমাধান ...

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

form * {
  display: block;
  margin: 10px;
}

<form onsubmit="download(this['name'].value, this['text'].value)">
  <input type="text" name="name" value="test.txt">
  <textarea name="text"></textarea>
  <input type="submit" value="Download">
</form>

ব্যবহার

download('test.txt', 'Hello world!');

Comments

হাঁ। প্রায় 3 বছর আগে @ ম্যাথিউ ফ্ল্যাশেন এখানে পোস্ট করেছেন ঠিক এটিই ।

— জোসেফ সিলবার

হ্যাঁ, তবে downloadবৈশিষ্ট্যের সাহায্যে আপনি ফাইলের নাম ;-) উল্লেখ করতে পারেন

— মাতাজ পোকার্নে

যেমন @earcam ইতিমধ্যে উপরের মন্তব্যে ইঙ্গিত করেছে ।

— জোসেফ সিলবার

txtআপনি যদি ফাইল নামটিতে কোনও এক্সটেনশান সরবরাহ না করেন তবে ক্রোম কেবলমাত্র এক্সটেনশন সংযোজন করে। আপনি যদি download("data.json", data)এটি করেন তবে আশানুরূপ কাজ করবেন।

— কার্ল স্মিথ

এটি আমার জন্য ক্রোম (73.0.3683.86) এবং ফায়ারফক্সে (.0 66.০.২) কাজ করেছে। তা না IE11 (11.379.17763.0) এবং এজ (44.17763.1.0) কাজ করে।

— স্যাম

Answer 3

উপরের সমস্ত সমাধান সমস্ত ব্রাউজারে কাজ করে না। IE 10+, ফায়ারফক্স এবং ক্রোমে (এবং jQuery বা অন্য কোনও লাইব্রেরি ছাড়াই ) অবশেষে কী কাজ করে তা এখানে :

save: function(filename, data) {
    var blob = new Blob([data], {type: 'text/csv'});
    if(window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveBlob(blob, filename);
    }
    else{
        var elem = window.document.createElement('a');
        elem.href = window.URL.createObjectURL(blob);
        elem.download = filename;        
        document.body.appendChild(elem);
        elem.click();        
        document.body.removeChild(elem);
    }
}

মনে রাখবেন, আপনার পরিস্থিতির উপর নির্ভর করে আপনি অপসারণের পরে URL.revokeObjectURL- এ কল করতেও পারেন elem। URL.createObject URL- এর জন্য ডক্স অনুসারে :

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

Comments

অসংখ্য ধন্যবাদ. আমি এখানে তালিকাভুক্ত সমস্ত উদাহরণ চেষ্টা করেছি এবং এটি কেবল কোনও ব্রাউজারের সাথে কাজ করে। এটি গ্রহণযোগ্য উত্তর হওয়া উচিত।

— এলইএম

ক্রোমে, এটি কাজ করার জন্য আমাকে আসলে শরীরে উপাদান যুক্ত করতে হয়নি।

— জ্যাকমোরিসি

AngularJS 1.x অ্যাপ্লিকেশনগুলির জন্য, আপনি তৈরি হয়ে যাওয়ার সাথে সাথে url এর একটি অ্যারে তৈরি করতে পারেন এবং তারপরে উপাদানটির $ onDestroy ফাংশনে এগুলি পরিষ্কার করুন। এটি আমার জন্য দুর্দান্ত কাজ করছে।

— স্প্লাক্টার

অন্যান্য উত্তরগুলি Failed: network errorক্রোমে গেছে। এই এক ভাল কাজ করে।

— জুনিপার-

এটি আমার জন্য ক্রোম (73.0.3683.86), ফায়ারফক্স (66.0.2), আইই 11 (11.379.17763.0) এবং এজ (44.17763.1.0) এ কাজ করেছে।

— স্যাম

Answer 4

উপরোক্ত উদাহরণগুলির সমস্তগুলি ক্রোম এবং আইইতে ঠিক কাজ করে তবে ফায়ারফক্সে ব্যর্থ হয়। দয়া করে শরীরে অ্যাঙ্কর যুক্ত করে ক্লিক করার পরে এটি সরাতে বিবেচনা করবেন না।

var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob(['Test,Text'], {type: 'text/csv'}));
a.download = 'test.csv';

// Append anchor to body.
document.body.appendChild(a);
a.click();

// Remove anchor from body
document.body.removeChild(a);

Comments

তবে: আইই 10 তে একটি খোলা বাগ আছে (এবং আমি এখনও এটি 11-এ দেখেছি) যা a.click()লাইনে "অ্যাক্সেস অস্বীকার করা" ফেলে দেয় কারণ এটি মনে করে যে ব্লব URL টি ক্রস-অরিজিন।

— ম্যাট

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

— inf3rno

"উপরের সমস্ত উদাহরণ ক্রোম এবং আইই তে ঠিক কাজ করে তবে ফায়ারফক্সে ব্যর্থ হয়।" যেহেতু সময়ের সাথে উত্তরগুলির ক্রম পরিবর্তন হতে পারে তাই আপনি যখন এটি লিখেছিলেন তখন কোন উত্তরগুলি আপনার উপরে ছিল তা পরিষ্কার নয়। ফায়ারফক্সে কোন পন্থাগুলি ঠিক কাজ করে না তা আপনি চিহ্নিত করতে পারেন?

— কেভিন

Answer 5

আমি আনন্দের সাথে ফাইলসভার.জেএস ব্যবহার করছি । এটির সামঞ্জস্যতা বেশ ভাল (IE10 + এবং অন্যান্য সমস্ত কিছু), এবং এটি ব্যবহার করা খুব সহজ:

var blob = new Blob(["some text"], {
    type: "text/plain;charset=utf-8;",
});
saveAs(blob, "thing.txt");

Comments

এটি ক্রোমে দুর্দান্ত কাজ করে। আমি কীভাবে ব্যবহারকারীকে ডিস্কে থাকা ফাইলটির অবস্থান নির্দিষ্ট করতে দেব?

— গ্রেগ

বাহ, লাইব্রেরি ব্যবহারের জন্য সহজ। এটি সহজেই সেরা উত্তর এবং এই দিনগুলিতে এইচটিএমএল <5 ব্যবহার করা লোকদের সম্পর্কে কে যত্নশীল?

— notbad.jpeg

@ গ্রেগম আমি নিশ্চিত যে আপনি এই প্লাগইনটি দিয়ে পারবেন।

— ড্যানিয়েল বাকমাস্টার

@ গ্রেগম: আপনি ডাউনলোডের অবস্থান বলতে চাইছেন? এটি ফাইলসভার.জেএস এর সাথে সম্পর্কিত নয়, আপনার ব্রাউজার কনফিগারেশনটি সেট করতে হবে যাতে এটি প্রতিটি ডাউনলোডের আগে একটি ফোল্ডার চায় বা তার পরিবর্তে নতুন ডাউনলোড বৈশিষ্ট্যটি ব্যবহার করে <a>।

— কোডম্যান্স

এটি ব্রাউজারগুলির আইই 10+ পরিবারের জন্য একটি দুর্দান্ত সমাধান। আইই এখনও ডাউনলোড এইচটিএমএল 5 ট্যাগ সমর্থন করে না এবং এই পৃষ্ঠার অন্যান্য সমাধানগুলি (এবং একই সমস্যা সম্পর্কিত অন্যান্য এসও পৃষ্ঠাগুলি) কেবল আমার জন্য কাজ করছে না। ফাইলসভার এফটিডব্লিউ!

— টিএমসি

Answer 6

নিম্নলিখিত পদ্ধতিটি IE11 +, ফায়ারফক্স 25+ এবং Chrome 30+ এ কাজ করে:

<a id="export" class="myButton" download="" href="#">export</a>
<script>
    function createDownloadLink(anchorSelector, str, fileName){
        if(window.navigator.msSaveOrOpenBlob) {
            var fileData = [str];
            blobObject = new Blob(fileData);
            $(anchorSelector).click(function(){
                window.navigator.msSaveOrOpenBlob(blobObject, fileName);
            });
        } else {
            var url = "data:text/plain;charset=utf-8," + encodeURIComponent(str);
            $(anchorSelector).attr("download", fileName);               
            $(anchorSelector).attr("href", url);
        }
    }

    $(function () {
        var str = "hi,file";
        createDownloadLink("#export",str,"file.txt");
    });

</script>

কর্মে এটি দেখুন: http://jsfiddle.net/Kg7eA/

ফায়ারফক্স এবং ক্রোম নেভিগেশনের জন্য ডেটা ইউআরআই সমর্থন করে, যা আমাদের কোনও তথ্য ইউআরআইতে নেভিগেট করে ফাইলগুলি তৈরি করতে দেয়, যখন আইই সুরক্ষা উদ্দেশ্যে এটি সমর্থন করে না।

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

Comments

আমি ইভেন্টগুলি (অনক্লিক এবং অনড্রিড) সংযুক্ত করতে এবং অ্যাট্রিবিউটস সেট করতে সবেমাত্র jquery ব্যবহার করেছি, যা আপনি ভ্যানিলা জেএস দিয়েও করতে পারেন। মূল অংশটির (উইন্ডো.নাইভিগেটর.এমএস সেভওরওপেনব্লব) জ্যাকুয়ের দরকার নেই।

— দিনেশ ygv

ডেটা ইউরি পদ্ধতির জন্য আকারের সীমাবদ্ধতা এখনও রয়েছে, তাই না?

— ফিল

এমএসএভওরওপেনব্লবকে এখানে অপ্রচলিত হিসাবে দেখানো হয়েছে: বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস

Answer 7

এই সমাধানটি সরাসরি tiddlywiki এর (tiddlywiki.com) গিথুব সংগ্রহশালা থেকে নেওয়া হয়। আমি প্রায় সমস্ত ব্রাউজারে টিডলিউইকি ব্যবহার করেছি এবং এটি একটি কবজির মতো কাজ করে:

function(filename,text){
    // Set up the link
    var link = document.createElement("a");
    link.setAttribute("target","_blank");
    if(Blob !== undefined) {
        var blob = new Blob([text], {type: "text/plain"});
        link.setAttribute("href", URL.createObjectURL(blob));
    } else {
        link.setAttribute("href","data:text/plain," + encodeURIComponent(text));
    }
    link.setAttribute("download",filename);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

গিথুব রেপো: সেভার মডিউলটি ডাউনলোড করুন

Comments

এটি ক্রোমে খুব সুন্দরভাবে কাজ করে তবে ফায়ারফক্সে নয়। এটি কোনও ফাইল তৈরি করে এবং এটি ডাউনলোড করে তবে ফাইলটি খালি। কোন উপাদান নেই. কোন ধারণা কেন? আইই তে পরীক্ষা করা হয়নি ...

— নারিক্স

ফাংশনটির কোনও নাম নেই বাদে এটি আমার প্রিয়

— ইয়োরাকো গঞ্জালেস

Answer 8

আইই 10 এ কাজ করে এমন সমাধান: (আমার একটি সিএসভি ফাইল দরকার ছিল, তবে এটি টাইপ এবং ফাইলের নামটি টেক্সট এ পরিবর্তন করতে যথেষ্ট)

var csvContent=data; //here we load our csv data 
var blob = new Blob([csvContent],{
    type: "text/csv;charset=utf-8;"
});

navigator.msSaveBlob(blob, "filename.csv")

Comments

লুডোভিচের উত্তরে এই বড়, আরও অন্যান্য ব্রাউজারগুলির জন্য সমর্থন অন্তর্ভুক্ত রয়েছে।

— ড্যান ড্যাসকলেসকু

Answer 9

যদি আপনি কেবল ডাউনলোডের জন্য উপলব্ধ একটি স্ট্রিং রূপান্তর করতে চান তবে আপনি jQuery ব্যবহার করে এটি চেষ্টা করতে পারেন।

$('a.download').attr('href', 'data:application/csv;charset=utf-8,' + encodeURI(data));

Comments

EncodeURI সঙ্গে স্কেপ তথ্য প্রয়োজন হতে পারে হিসাবে আমি মন্তব্য করতে সক্ষম হচ্ছে আগে এখানে প্রস্তাবিত: stackoverflow.com/a/32441536/4928558

— atfornes

Answer 10

প্যাকেজটি jith-file-github.com/kennethjiang/js-file-download থেকে ডাউনলোড ব্রাউজার সমর্থনের জন্য প্রান্তের কেসগুলি পরিচালনা করে:

এটি এই পৃষ্ঠায় উল্লিখিত কৌশলগুলি কীভাবে ব্যবহার করে তা দেখার জন্য উত্স দেখুন ।

স্থাপন

yarn add js-file-download
npm install --save js-file-download

ব্যবহার

import fileDownload from 'js-file-download'

// fileDownload(data, filename, mime)
// mime is optional

fileDownload(data, 'filename.csv', 'text/csv')

Comments

ধন্যবাদ - সবেমাত্র পরীক্ষিত - উইন্ডোজে ফায়ারফক্স, ক্রোম এবং এজের সাথে কাজ করে

— ব্রায়ান বার্নস

Answer 11

পূর্বে উল্লিখিত হিসাবে, ফাইলসেভার ক্লায়েন্টের পাশে ফাইলগুলির সাথে কাজ করার জন্য একটি দুর্দান্ত প্যাকেজ। তবে, এটি বড় ফাইলগুলির সাথে ভাল হয় না। StreamSaver.js একটি বিকল্প সমাধান (যা ফাইলসার্ভার.জেএস এ নির্দেশিত) বড় ফাইলগুলি পরিচালনা করতে পারে:

const fileStream = streamSaver.createWriteStream('filename.txt', size);
const writer = fileStream.getWriter();
for(var i = 0; i < 100; i++){
    var uint8array = new TextEncoder("utf-8").encode("Plain Text");
    writer.write(uint8array);
}
writer.close()

Comments

পাঠ্য এনকোডারটি এখনই অত্যন্ত পরীক্ষামূলক, আমি এটি এড়ানো (বা পলিফিলিং) করার পরামর্শ দিই।

— ব্র্যান্ডন.ব্লানচার্ড

Answer 12

var element = document.createElement('a');
element.setAttribute('href', 'data:text/text;charset=utf-8,' +      encodeURI(data));
element.setAttribute('download', "fileName.txt");
element.click();

Comments

এই পদ্ধতির এবং একটি ব্লব তৈরির মধ্যে পার্থক্য কী?

— ড্যান ড্যাসকলেসকু

Answer 13

এপ্রিল ২০১৪ পর্যন্ত, ফাইলসাইম এপিআইগুলিকে ডাব্লু 3 সি তে মানক করা যায় না। ব্লব দিয়ে সমাধানের দিকে নজর দেওয়া যে কোনও ব্যক্তিকে সতর্কতার সাথে থ্রেড করা উচিত, আমার ধারণা।

এইচটিএমএল 5 শিলা উপরে উঠে আসে

ফাইলসাইম এপিআইতে ডাব্লু 3 সি মেলিংয়ের তালিকা

Answer 14

@ রিক উত্তরের ভিত্তিতে যা সত্যই সহায়ক ছিল।

আপনি dataযদি স্ট্রিংটি এভাবে ভাগ করে নিতে চান তবে আপনাকে এড়িয়ে যেতে হবে:

$('a.download').attr('href', 'data:application/csv;charset=utf-8,'+ encodeURI(data));

`দুঃখিত, স্ট্যাক ওভারফ্লোতে আমার বর্তমান কম খ্যাতির কারণে আমি @ রিকের উত্তরে মন্তব্য করতে পারি না।

একটি সম্পাদনা পরামর্শ ভাগ করে দেওয়া হয়েছে এবং প্রত্যাখ্যান করা হয়েছিল।

Comments

আমি পরামর্শটি গ্রহণ করতে সক্ষম হইনি। আজব ... আমি কোড আপডেট করেছি।

— রিক

Answer 15

আমরা ব্যবহার করতে পারি URL টি বিশেষত, API URL.createObjectURL () , এবং ব্লব API সঙ্কেতাক্ষরে লিখা এবং ডাউনলোড প্রশংসনীয় অনেক কিছু করতে।

আপনার ডাউনলোড যদি ছোট হয় তবে এটি দুর্দান্ত কাজ করে:

document.body.innerHTML += 
`<a id="download" download="PATTERN.json" href="${URL.createObjectURL(new Blob([JSON.stringify("HELLO WORLD", null, 2)]))}"> Click me</a>`
download.click()
download.outerHTML = ""

---

যদি আপনার ডাউনলোডটি বিশাল হয় তবে ডিওএম ব্যবহার করার পরিবর্তে, আরও ভাল উপায় হ'ল ডাউনলোড প্যারামিটারগুলির সাথে একটি লিঙ্ক উপাদান তৈরি করা এবং ক্লিককে ট্রিগার করা।

লক্ষ্য করুন লিঙ্ক উপাদানটি নথিতে সংযুক্ত করা হয়নি তবে ক্লিকের কাজটি যাই হোক! এভাবে কয়েক শ মো এর ডাউনলোড তৈরি করা সম্ভব।

const stack = {
 some: "stuffs",
 alot: "of them!"
}

BUTTONDOWNLOAD.onclick = (function(){
  let j = document.createElement("a")
  j.id = "download"
  j.download = "stack_"+Date.now()+".json"
  j.href = URL.createObjectURL(new Blob([JSON.stringify(stack, null, 2)]))
  j.click()
})  

<button id="BUTTONDOWNLOAD">DOWNLOAD!</button>

---

বোনাস! যে কোনও চক্রীয় বস্তু ডাউনলোড করুন , ত্রুটিগুলি এড়ান:

TypeError: চক্রীয় বস্তুর মান (ফায়ারফক্স) প্রকারের ত্রুটি: রূপান্তর করা Con

বিজ্ঞপ্তি কাঠামোতে JSON (ক্রোম এবং অপেরা) প্রকারের ত্রুটি: বিজ্ঞপ্তি

মান যুক্তিতে রেফারেন্স সমর্থিত নয় (এজ)

Https://github.com/douglascrockford/JSON-js/blob/master/ यकल. js ব্যবহার করে

এই উদাহরণে, documentজসন হিসাবে বস্তুটি ডাউনলোড করা ।

/* JSON.decycle */
if(typeof JSON.decycle!=="function"){JSON.decycle=function decycle(object,replacer){"use strict";var objects=new WeakMap();return(function derez(value,path){var old_path;var nu;if(replacer!==undefined){value=replacer(value)}
if(typeof value==="object"&&value!==null&&!(value instanceof Boolean)&&!(value instanceof Date)&&!(value instanceof Number)&&!(value instanceof RegExp)&&!(value instanceof String)){old_path=objects.get(value);if(old_path!==undefined){return{$ref:old_path}}
objects.set(value,path);if(Array.isArray(value)){nu=[];value.forEach(function(element,i){nu[i]=derez(element,path+"["+i+"]")})}else{nu={};Object.keys(value).forEach(function(name){nu[name]=derez(value[name],path+"["+JSON.stringify(name)+"]")})}
return nu}
return value}(object,"$"))}}


document.body.innerHTML += 
`<a id="download" download="PATTERN.json" href="${URL.createObjectURL(new Blob([JSON.stringify(JSON.decycle(document), null, 2)]))}"></a>`
download.click()

Answer 16

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

Comments

@earcam প্রায় এক বছর আগে এখানে পোস্ট করেছেন ।

— জোসেফ সিলবার

Answer 17

এই নীচে ফাংশন কাজ করেছে।

 private createDownloadableCsvFile(fileName, content) {
   let link = document.createElement("a");
   link.download = fileName;
   link.href = `data:application/octet-stream,${content}`;
   return link;
 }

Comments

আপনি কি নতুন ট্যাবে ফাইলটি খুলতে পারবেন ফাইলের নাম বরাদ্দ রেখে, কিন্তু ডাউনলোড করছেন না, কেবল একটি ট্যাবে খোলার?

— কার্ল ক্রয়েগার ইহল

Answer 18

নিম্নলিখিত পদ্ধতিটি আইই 10 +, এজ, অপেরা, এফএফ এবং ক্রোমে কাজ করে:

const saveDownloadedData = (fileName, data) => {
    if(~navigator.userAgent.indexOf('MSIE') || ~navigator.appVersion.indexOf('Trident/')) { /* IE9-11 */
        const blob = new Blob([data], { type: 'text/csv;charset=utf-8;' });
        navigator.msSaveBlob(blob, fileName);
    } else {
        const link = document.createElement('a')
        link.setAttribute('target', '_blank');
        if(Blob !== undefined) {
            const blob = new Blob([data], { type: 'text/plain' });
            link.setAttribute('href', URL.createObjectURL(blob));
        } else {
            link.setAttribute('href', 'data:text/plain,' + encodeURIComponent(data));
        }

        ~window.navigator.userAgent.indexOf('Edge')
            && (fileName = fileName.replace(/[&\/\\#,+$~%.'':*?<>{}]/g, '_')); /* Edge */

        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
}

সুতরাং, শুধু ফাংশন কল করুন:

saveDownloadedData('test.txt', 'Lorem ipsum');

Answer 19

আমার জন্য এটি একই ফাইল নাম এবং এক্সটেনশান ডাউনলোড হওয়ার সাথে পুরোপুরি কাজ করেছে

<a href={"data:application/octet-stream;charset=utf-16le;base64," + file64 } download={title} >{title}</a>

'শীর্ষক' এক্সটেনশন অর্থাত সাহায্যে ফাইল নাম, sample.pdf, waterfall.jpg, ইত্যাদি ..

'file64' হ'ল বেস 64 বিষয়বস্তু হ'ল যেমন, Ww6IDEwNDAsIFNsaWRpbmdTY2FsZUdyb3VwOiAiR3JvdXAgQiIsIE1lZGljYWxWaXNpdEZsYXRGZWU6IDM1LCBEZW50YWxQYXltZW50UGVyY2VudGFnZTogMjUsIFByb2NlZHVyZVBlcmNlbnQ6IDcwLKCFfSB7IkdyYW5kVG90YWwiOjEwNDAsIlNsaWRpbmdTY2FsZUdyb3VwIjoiR3JvdXAgQiIsIk1lZGljYWxWaXNpdEZsYXRGZWUiOjM1LCJEZW50YWxQYXltZW50UGVyY2VudGFnZSI6MjUsIlByb2NlZHVyZVBlcmNlbnQiOjcwLCJDcmVhdGVkX0J5IjoiVGVycnkgTGVlIiwiUGF0aWVudExpc3QiOlt7IlBhdGllbnRO

Answer 20

আমি ব্যবহার করেন একটি <a></a>ট্যাগ তারপর সেট href='path'। এরপরে, <a>উপাদানগুলির মধ্যে একটি চিত্র স্থাপন করুন যাতে এটি দেখার জন্য আমার কাছে ভিজ্যুয়াল থাকতে পারে। আপনি যদি চান, আপনি এমন একটি ফাংশন তৈরি করতে hrefপারেন যা এটির পরিবর্তিত হবে যাতে এটি কেবল একই লিঙ্কটি নয় তবে গতিশীল হবে।

আপনি যদি জাভাস্ক্রিপ্ট দিয়ে অ্যাক্সেস করতে চান তবে <a>ট্যাগটিকেও দিন id।

এইচটিএমএল সংস্করণ দিয়ে শুরু:

<a href="mp3/tupac_shakur-how-do-you-want-it.mp3" download id="mp3Anchor">
     <img src="some image that you want" alt="some description" width="100px" height="100px" />
</a>

এখন জাভাস্ক্রিপ্ট সহ:

*Create a small json file*;

const array = [
     "mp3/tupac_shakur-how-do-you-want-it.mp3",
     "mp3/spice_one-born-to-die.mp3",
     "mp3/captain_planet_theme_song.mp3",
     "mp3/tenchu-intro.mp3",
     "mp3/resident_evil_nemesis-intro-theme.mp3"
];

//load this function on window
window.addEventListener("load", downloadList);

//now create a function that will change the content of the href with every click
function downloadList() {
     var changeHref=document.getElementById("mp3Anchor");

     var j = -1;

     changeHref.addEventListener("click", ()=> {

           if(j < array.length-1) {
               j +=1;
               changeHref.href=""+array[j];
          }
           else {
               alert("No more content to download");
          }
}

Answer 21

যদি ফাইলটিতে টেক্সট ডেটা থাকে, তবে আমি যে কৌশলটি ব্যবহার করি তা হ'ল পাঠ্যকে একটি টেক্সারিয়া উপাদানটিতে রাখুন এবং ব্যবহারকারী এটি নির্বাচন করুন (টেক্সারিয়ায় ক্লিক করুন তারপরে সিটিআরএল-এ) তারপরে একটি পেস্টের পরে অনুলিপিটি পাঠ্য সম্পাদককে অনুলিপি করুন।

Comments

আমি এটি বিবেচনা করেছি, তবে ব্যবহারকারী-বন্ধুত্বের দিক থেকে, এটি বিপর্যয়কর। এছাড়াও, ফাইলটি একটি সিএসভি এক্সটেনশান দিয়ে সংরক্ষণ করতে হবে। আপনার ব্যবহারকারীদের বলার চেষ্টা করুন।

— জোসেফ সিলবার