এইচটিএমএল 5 / জাভাস্ক্রিপ্ট ব্যবহার করে একটি ফাইল তৈরি এবং সংরক্ষণ করুন

Question

আমি ইদানীং ওয়েবজিলের সাথে ফিড করছি, এবং একটি কল্লা পাঠককে কাজ করতে পেরেছি। সমস্যাটি হ'ল এটি বেশ ধীর (কল্লাডা খুব ভার্বোজ ফর্ম্যাট), সুতরাং আমি ফাইলগুলি সহজেই ফর্ম্যাট (সম্ভবত জেএসএন) ব্যবহার করতে ফর্মে রূপান্তর শুরু করব। আমার কাছে ইতিমধ্যে জাভাস্ক্রিপ্টে ফাইলটি বিশ্লেষণ করার কোড রয়েছে, তাই আমি এটিকে আমার রফতানিকারক হিসাবেও ব্যবহার করতে পারি! সমস্যাটি সঞ্চয় হচ্ছে।

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

এবং স্পষ্ট করে বলতে: আমি ব্যবহারকারীদের জ্ঞান ছাড়াই ফাইল সিস্টেমটি অ্যাক্সেস করার চেষ্টা করছি না! ব্যবহারকারী একটি ফাইল সরবরাহ করবেন (সম্ভবত টানুন এবং ড্রপের মাধ্যমে), স্ক্রিপ্টটি মেমরিতে ফাইলটি রূপান্তর করবে এবং ফলাফলটি ডাউনলোড করার জন্য ব্যবহারকারীকে অনুরোধ করা হবে। ব্রাউজারের যতটুকু বিষয় সম্পর্কিত সমস্ত কিছুই "নিরাপদ" ক্রিয়াকলাপ হওয়া উচিত।

[সম্পাদনা]: আমি এটার সামনের কথা উল্লেখ করিনি, সুতরাং যে পোস্টাররা "ফ্ল্যাশ" জবাব দিয়েছে তা যথেষ্ট বৈধ, তবে আমি যা করছি তার একটি অংশ খাঁটি এইচটিএমএল 5 দিয়ে কী করা যায় তা হাইলাইট করার প্রয়াস ... সুতরাং ফ্ল্যাশটি হ'ল আমার ক্ষেত্রে ঠিক আছে। (যদিও এটি "সত্যিকারের" ওয়েব অ্যাপ্লিকেশন করছেন এমন কারও পক্ষে পুরোপুরি বৈধ উত্তর)) এমনটি মনে হচ্ছে যে আমি সার্ভারকে জড়িত না করতে চাইলে আমি ভাগ্যের বাইরে আছি। যাই হোক ধন্যবাদ!

Comments

আপনি গৃহীত উত্তরটি পরিবর্তন করতে পারেন, এখন পুরোপুরি এইচটিএমএল উপায় বলে মনে হচ্ছে

— পেক্কা

Answer 1

ঠিক আছে, একটি ডেটা তৈরি করা: ইউআরআই স্পষ্টতই আমার জন্য কৌতুক করে, ম্যাথু এবং ডেনসস্টারকে ধন্যবাদ এই বিকল্পটি নির্দেশ করে! এখানে আমি এটি কীভাবে করি তা মূলত:

1) সমস্ত সামগ্রী "কন্টেন্ট" নামক স্ট্রিংয়ে পান (যেমন শুরুতে এটি তৈরি করে বা ইতিমধ্যে নির্মিত পৃষ্ঠার ট্যাগটির অভ্যন্তরীণ এইচটিএমএল পড়ে)।

2) ডেটা ইউআরআই তৈরি করুন:

uriContent = "data:application/octet-stream," + encodeURIComponent(content);

ব্রাউজারের ধরন ইত্যাদির উপর নির্ভর করে দৈর্ঘ্যের সীমাবদ্ধতা থাকবে তবে উদাহরণস্বরূপ ফায়ারফক্স ৩.6.১২ কমপক্ষে ২৫6 কে পর্যন্ত কাজ করে। এনকোডিউআরআইকিউম্পোন্ট ব্যবহারের পরিবর্তে বেস 64 এ এনকোডিং জিনিসগুলি আরও দক্ষ করে তুলতে পারে, তবে আমার পক্ষে তা ঠিক ছিল।

3) একটি নতুন উইন্ডো খুলুন এবং এই ইউআরআইতে "পুনর্নির্দেশ" করুন এটি আমার জাভাস্ক্রিপ্ট উত্পন্ন পৃষ্ঠার ডাউনলোডের জন্য অনুরোধ করবে:

newWindow = window.open(uriContent, 'neuesDokument');

এটাই.

Comments

যদি আপনি কোনও পপআপ ব্যবহার করা এড়াতে চান, যা অবরুদ্ধ হয়ে যেতে পারে, আপনি location.hrefসামগ্রীটিতে সেট করতে পারেন set location.href = uriContent।

— অ্যালেক্স টারপিন

হাই আমি এটি চেষ্টা করেছিলাম তবে এটি ফাইলটি .part ফাইল হিসাবে ডাউনলোড করে। আমি কীভাবে ফাইল টাইপ সেট করতে পারি?

— সেদাত বাহার

@ সেদাতবারের ডেটা ইউআরআইগুলি কোনও ফাইলের নাম নির্ধারণকে সমর্থন করে না, আপনাকে মাইম প্রকারটি ব্যবহার করে একটি উপযুক্ত এক্সটেনশান সেট করে ব্রাউজারের উপর নির্ভর করতে হবে। তবে মাইম টাইপটি ব্রাউজার দ্বারা রেন্ডার করতে পারলে এটি এটি ডাউনলোড করবে না, তবে এটি প্রদর্শিত হবে। এটি করার অন্যান্য কিছু উপায় রয়েছে তবে আইই <10 তে কোনওটিই কাজ করে না।

— পানজী

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

— নিলুন্ড

আমি মনে করি এটি আমাদের প্রয়োজনের চেয়ে আরও কঠিন করে তুলছে। এই পৃষ্ঠায় আপনার জেএস কনসোলটি খুলুন location.href = "data:application/octet-stream," + encodeURIComponent(jQuery('#answer-4551467 .post-text').first().text());এবং এটি রাখুন এবং এটি @ Nøk এর উত্তরের কোনও ফাইলে সংরক্ষণ করবে save এটি পরীক্ষা করার জন্য আমার কাছে আইই নেই, তবে এটি ওয়েবকিটের পক্ষে কাজ করে।

— ব্রুনো ব্রোনোস্কি

Answer 2

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

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

    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    }
    else {
        pom.click();
    }
}

ব্যবহার

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

Comments

আপনি যদি সূত্রটি ইউআরএলটি ডাউনলোড করতে চান তবে এটিই সেরা সমাধান!

— সিডোনাল্ডসন

ফাইল-নাম সেট করার ক্ষমতা এটিকে বিজয়ী করে তোলে।

— ওম

কিছু দিন আগে (35.0.1916.114 মিটার) পুনরুদ্ধার হওয়া সর্বশেষ আপডেট হওয়া পর্যন্ত এই পদ্ধতিটি Chrome এ কাজ করেছিল। এখন এটা মধ্যে আংশিকভাবে কাজ করে ফাইলের নাম এবং এক্সটেনশন আর কাজ (এটা সবসময় নাম নির্বিশেষে কি পাস করা হয়েছে ফাইল download.txt।)

— Sevin7

আমার কাছে ক্রোম 42.0.2311.90 রয়েছে এবং এটি প্রত্যাশিত ফাইলের নাম সহ আমার জন্য কাজ করছে।

— সৌরভ কুমার

অন্তর্ভুক্ত করা যেতে পারে যে পরিমাণ পরিমাণ একটি সীমা আছে?

— কাস্পার লি

Answer 3

এইচটিএমএল 5 একটি window.saveAs(blob, filename)পদ্ধতি সংজ্ঞায়িত করে । এখনই এটি কোনও ব্রাউজার দ্বারা সমর্থিত নয়। তবে ফাইলস্যাভার.জেএস নামে একটি সামঞ্জস্যযোগ্য গ্রন্থাগার রয়েছে যা বেশিরভাগ আধুনিক ব্রাউজারগুলিতে (ইন্টারনেট এক্সপ্লোরার 10+ সহ) এই ফাংশনটি যুক্ত করে। ইন্টারনেট এক্সপ্লোরার 10 একটি navigator.msSaveBlob(blob, filename)পদ্ধতি ( এমএসডিএন ) সমর্থন করে যা ইন্টারনেট এক্সপ্লোরার সমর্থনের জন্য ফাইলসেভার.জেএস-তে ব্যবহৃত হয়।

আমি এই সমস্যাটি সম্পর্কে আরও বিশদ সহ একটি ব্লগ পোস্ট করেছি।

Comments

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

— ciembor

@ সিমম্বর (অবজেক্ট ইউআরএল +) ডাউনলোড অ্যাট্রিবিউট ভেরিয়েন্ট (যা আমি ক্রোমের সাথে ব্যবহার করি) আপনাকে একটি ফাইলের নাম সেট করতে দেয়। এটি ক্রোমে আমার জন্য কাজ করে।

— পানজি

যদি ক্লিকের সরাসরি কারণে সৃষ্টি হয় তবে @Ciembor aha এবং একটি পপআপ অবরুদ্ধ করা হবে না।

— পানজি

ফাইলস্যাভার.জেএস এখন আইই সমর্থন করে

— এলি গ্রে

ডাব্লু 3 সি বলেছেন: এই দস্তাবেজের কাজ বন্ধ করে দেওয়া হয়েছে এবং এটি প্রয়োগের ভিত্তি হিসাবে উল্লেখ করা বা ব্যবহার করা উচিত নয়।

— ওয়াইকিট কুং

Answer 4

বড় ফাইল সংরক্ষণ করা হচ্ছে

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

একটি ডাউনলোড জোর করা হচ্ছে

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

একটি ফাইলের নাম উল্লেখ করা হচ্ছে

যদি ব্লবটি ফাইল কনস্ট্রাক্টর দিয়ে তৈরি করা হয় তবে আপনি একটি ফাইলের নামও সেট করতে পারেন তবে কেবলমাত্র কয়েকটি ওয়েব ব্রাউজারেই (ক্রোম এবং ফায়ারফক্স সহ) ফাইল কনস্ট্রাক্টরের সমর্থন রয়েছে । ফাইলের নামটিও downloadএট্রিবিউটটির যুক্তি হিসাবে নির্দিষ্ট করা যেতে পারে , তবে এটি সুরক্ষা বিবেচনার একটি বিষয় । ইন্টারনেট এক্সপ্লোরার 10 এবং 11 ফাইলের নাম নির্দিষ্ট করার জন্য নিজস্ব পদ্ধতি, এমএসসেভ ব্লব সরবরাহ করে ।

উদাহরণ কোড

var file;
var data = [];
data.push("This is a test\n");
data.push("Of creating a file\n");
data.push("In a browser\n");
var properties = {type: 'text/plain'}; // Specify the file's mime-type.
try {
  // Specify the filename using the File constructor, but ...
  file = new File(data, "file.txt", properties);
} catch (e) {
  // ... fall back to the Blob constructor if that isn't supported.
  file = new Blob(data, properties);
}
var url = URL.createObjectURL(file);
document.getElementById('link').href = url;

<a id="link" target="_blank" download="file.txt">Download</a>

Comments

আমি কি ফাইলটি সংরক্ষণ করতে একটি ফোল্ডার (ডিরেক্টরি) নির্দিষ্ট করতে একটি ডায়ালগ (পপআপ) দেখাতে পারি?

— ক্যালভিন

@ ক্যালভিন: আমি ডাউনলোডটি কীভাবে ডাউনলোড করতে এবং ফাইলের নাম সরবরাহ করতে হয় তার ব্যাখ্যা করতে আমি উত্তর আপডেট করেছি। আই-এর জন্য, আমি বিশ্বাস করি আপনি msSaveBlob"সংরক্ষণ করুন" ডায়ালগটি খুলতে ব্যবহার করতে পারেন । অন্যান্য ব্রাউজারগুলির জন্য, আপনার একমাত্র বিকল্পটি হ'ল ডাউনলোড লিঙ্কের প্রসঙ্গ মেনু থেকে ম্যানুয়ালি "সংরক্ষণ করুন" বেছে নেওয়া।

— বিসিএমপিঙ্ক

@ জেক-এফডিআরভি: সাফারিতে কেবল ব্লব-ইউআরএল কাজ করে। ডাউনলোড অ্যাট্রিবিউট এবং ফাইল কনস্ট্রাক্টর সাফারি দ্বারা সমর্থিত নয়, সুতরাং আপনি কোনও ডাউনলোডকে জোর করতে পারবেন না, যার অর্থ সম্ভবত ব্লবটি ব্রাউজারেই খোলা হবে এবং আপনি কোনও ফাইলের নাম নির্দিষ্ট করতে পারবেন না। প্রদত্ত উদাহরণের জন্য, আপনি এখনও লিঙ্কটির প্রসঙ্গ মেনু ব্যবহার করে সাফারি দিয়ে ফাইলটি ডাউনলোড করতে সক্ষম হবেন।

— বিসিএমপিংক

@bcmpinc stackoverflow.com/questions/36444507/...

— fdrv

এটি একটি খুব সহায়ক এবং তথ্যমূলক উত্তর। আর একটি জিনিস যা আমার মতো লোকদের সহায়তা করতে পারে: সেট করার পরে document.getElementById('link').href = url;, আপনার কোডটি এলিমেন্টের .click()পদ্ধতিটি ব্যবহার করে লিঙ্কটি ফায়ার করতে পারে ।

— LarsH

Answer 5

function download(content, filename, contentType)
{
    if(!contentType) contentType = 'application/octet-stream';
        var a = document.createElement('a');
        var blob = new Blob([content], {'type':contentType});
        a.href = window.URL.createObjectURL(blob);
        a.download = filename;
        a.click();
}

Comments

কন্টেন্টটাইপ এর প্রভাব কী? এটা কি কাজে লাগে?

— উরি

এটি সর্বশেষতম ক্রোমেও খুব ভাল কাজ করে, @ মাতাজ পোকার্নির উত্তরের বিপরীতে। ধন্যবাদ।

— আলেকজান্ডার আমেলকিন

এটি এফএফ 36 বা আই 11 এ আমার পক্ষে কাজ করে না। যদি আমি ম্যাটেজ পোকার্নে প্রস্তাবিত a.clickকোড ব্যবহার করে প্রতিস্থাপন করি document.createEvent()তবে এটি এফএফ-তে কাজ করে তবে আইই নয়। আমি ক্রোম চেষ্টা করি নি।

— পিটার হাল

Answer 6

ডগ Neiner এর কটাক্ষপাত Downloadify যা ফ্ল্যাশ ভিত্তিক জাভাস্ক্রিপ্ট ইন্টারফেস এটা করতে হয়।

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

Comments

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

— তোজি

@ তোজি আহ, আমি দেখছি HTML 5ব্যানার এবং ট্যাগ অনুসারে পুনরায় জিজ্ঞাসা এবং পুনরায় বাক্যাংশটি সেই অনুসারে হতে পারে? এটি সম্ভবত সেই ব্যবহারকারীদের আকর্ষণ করতে পারে যারা সেই নির্দিষ্ট ক্ষেত্র সম্পর্কে জানেন (এখনও এই মুহূর্তে তুলনামূলকভাবে একটি ছোট জনতা, আমি মনে করি)। আমি নিশ্চিত যে এটি এইচটিএমএল 5 এ করা যেতে পারে তবে কীভাবে তা আমার কোনও ধারণা নেই।

— পেক্কা

হয়েছে downloadify.info Downloadify ডোমেইন ক্রয় করা / স্থানান্তরিত, এবং যদি তাই একটি নতুন অবস্থান কোথায়? বর্তমান সাইটটি প্রদত্ত উত্তরের সাথে সম্পূর্ণ সম্পর্কিত নয় বলে মনে হচ্ছে।

— ক্রিস্টোস হেওয়ার্ড

এটি HTML5 ব্যবহার করে ... - শিরোনামযুক্ত প্রশ্নের উত্তর দেয় না ।

— আইএক্সএক্স

@ আইএক্সএক্স ভাল হতে হবে, উত্তর পোস্ট করার পরে এটি যোগ করা হয়েছিল। তবুও, আপনি ঠিক বলেছেন। নীচের উত্তরটি গ্রহণ করা উচিত

— পেক্কা

Answer 7

সরল সমাধান!

<a download="My-FileName.txt" href="data:application/octet-stream,HELLO-WORLDDDDDDDD">Click here</a>

সমস্ত আধুনিক ব্রাউজারে কাজ করে।

Comments

হাই, আপনি কীভাবে উইন্ডো.ওপেন বা অন্য কোনও জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করে "ডাউনলোড" অ্যাট্রিবিউট আচরণটি নির্দিষ্ট করবেন তা জানেন?

— yucer

@ আইসিআর এর সাথে কোনও ডাউনলোড অ্যাট্রিবিউট (বা সেই বিষয়ে কোনও বৈশিষ্ট্য) নেই window.open()। এটি অপ্রাসঙ্গিক। আপনি এই পদ্ধতিটি ব্যবহার করতে এবং .click()এটিতে জোর করতে পারেন , তবে .click()উপাদানটি শরীরে সংযুক্ত করার আগে আপনি ফোন দিলে ফায়ারফক্স পছন্দ করে না এমন সময়টি দেখুন ।

— ব্র্যাড

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

— ফ্র্যাঙ্কন্যাপস

যদি আপনি এনকোডিউআরআইআরকিউম্পোন্ট (সামগ্রী) ব্যবহার করেন তবে স্পেসগুলি সংরক্ষণ করা হবে

— মাইক রেড্রোব 1'18

ফায়ারফক্সে নামটি চয়ন করতে পারে না, তবে ক্রোম কাজ করে

— ভিক্ষু সুবহুতি

Answer 8

আপনি একটি ইউআরআই ডেটা তৈরি করতে পারেন । তবে ব্রাউজার-নির্দিষ্ট সীমাবদ্ধতা রয়েছে।

Comments

এটা মজার. আমি যখন সুযোগ পাব তখন আমি এটিকে আরও তাকাব। ধন্যবাদ!

— তোজি

@ কোয়ান্টাম্পোট্যাটো, আসলে ইউআরএল তৈরি করা ব্যাখ্যা করা একটু জটিল। সমস্ত কৌতুকপূর্ণ কৌতুক আরএফসি 2397 এ রয়েছে । আপনি পরীক্ষার জন্য এই জাতীয় সরঞ্জাম ব্যবহার করতে পারেন । তারপরে, আপনার আসল অ্যাপ্লিকেশনটির জন্য, আপনি আপনার ভাষার জন্য কোনও ডেটা ইউআরআই বা বেস 64 লাইব্রেরির সন্ধান করতে পারেন। যদি এটি খুঁজে না পান তবে নির্দ্বিধায় একটি ফলোআপ প্রশ্ন জিজ্ঞাসা করুন। ব্রাউজার-নির্দিষ্ট কিছু সীমাবদ্ধতা উইকিপিডিয়া নিবন্ধে দেওয়া হয়েছে । উদাহরণস্বরূপ, IE দৈর্ঘ্য এবং প্রকার সীমাবদ্ধ করে (যেমন পাঠ্য / এইচটিএমএল নয়)।

— ম্যাথু ফ্ল্যাশেন

ডেটা ইউআরএল তৈরি করা খুব জটিল নয়: "data:text/plain;charset=UTF-8,"+encodeURIComponent(text)তবে হ্যাঁ, আইআই ইউআরএল এর ইউআরএলগুলির আকারকে অব্যবহারযোগ্য পরিমাণের মধ্যে সীমাবদ্ধ করে এবং এটি window.open(...)আইফ্রেমেস (আইফ্র্যাম) এর মতো জিনিসগুলির জন্য তাদের সমর্থন করে না ।

— পানজী

@ পাঞ্জি, এটি এতটা সহজ নয়। একটি জিনিসের জন্য, এটি কোলাডা বা জেএসওএন উভয়ের পক্ষে সঠিক মাইম টাইপ নয়।

— ম্যাথু ফ্ল্যাশেন

খুব অ-তথ্যমূলক উত্তর। দয়া করে ব্রাউজারগুলির জন্য নির্দিষ্টকরণগুলি যুক্ত করুন if

— টুডো

Answer 9

আমি ফাইলস্যাভার ব্যবহার করেছি ( https://github.com/eligrey/FileSaver.js ) এবং এটি ঠিক কাজ করে।
উদাহরণস্বরূপ, আমি কোনও পৃষ্ঠায় প্রদর্শিত লগগুলি রফতানি করার জন্য এই ফাংশনটি করেছি।
ব্লবটি ইনস্ট্যান্সেশনের জন্য আপনাকে একটি অ্যারে পাস করতে হবে, তাই আমি সম্ভবত এটি সঠিকভাবে লিখিনি, তবে এটি আমার পক্ষে কাজ করে।
কেবলমাত্র প্রতিস্থাপনের ক্ষেত্রে সাবধানতা অবলম্বন করুন: এটি এই বিশ্বব্যাপী তৈরি করার সিনট্যাক্স, অন্যথায় এটি কেবল তার সাথে সাক্ষাত করা প্রথমটি প্রতিস্থাপন করবে।

exportLogs : function(){
    var array = new Array();

    var str = $('#logs').html();
    array[0] = str.replace(/<br>/g, '\n\t');

    var blob = new Blob(array, {type: "text/plain;charset=utf-8"});
    saveAs(blob, "example.log");
}

Comments

ফাইলসেভার দুর্দান্ত, এখানে প্রাক-আই 1010 ফাংশন প্রি ই 1010 সেভসগুলির জন্য একটি আই শিম রয়েছে: (ফাইলের নাম, ফাইলকন্টেন্ট, মাইমটাইপ) w var ডাব্লু = উইন্ডো.ওপেন (); var doc = w.docament; doc.open (মাইমেটাইপ, 'রিপ্লেস'); doc.charset = "utf-8"; (filecontent) doc.write; doc.close (); doc.execCommand ("SaveAs", নাল, ফাইলের নাম); }

— aqm

@ আকিমের শিম সম্পর্কে একটি সতর্কতা: এটি স্ক্রিপ্ট ট্যাগগুলি কার্যকর করে।

— গেমফ্রাক

এছাড়াও, এটা করা আকাঙ্খিত হতে পারে w.close();পরেexecCommand

— GameFreak

Answer 10

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

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      function linkDownload(a, filename, content) {
        contentType =  'data:application/octet-stream,';
        uriContent = contentType + encodeURIComponent(content);
        a.setAttribute('href', uriContent);
        a.setAttribute('download', filename);
      }
      function download(filename, content) {
        var a = document.createElement('a');
        linkDownload(a, filename, content);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    </script>
   </head>
  <body>
    <a href="#" onclick="linkDownload(this, 'test.txt', 'Hello World!');">download</a>
    <button onclick="download('test.txt', 'Hello World!');">download</button>
  </body>
</html>

Comments

আপনি aনথিতে সন্নিবেশ করতে পারেন (সম্ভবত সহ "display:none") এটিতে ক্লিক করুন এবং তারপরে এটি মুছে ফেলতে পারেন।

— তেপীম্ম

ব্রাউজারগুলিতে এই কাজটি করা যাবে যেখানে ডাউনলোড বৈশিষ্ট্য এমনকি আধুনিক যেমন এবং সাফারির মতো সমর্থিত নয় .. caniuse.com/#feat=download

— মুহাম্মদ উমর

সবেমাত্র সাফারি 5.0 ওয়াইনের অধীনে পরীক্ষা করা হয়েছে। প্রথম সংস্করণ কাজ করে, দ্বিতীয়টি নয়। আমি পাশাপাশি IE 8 (ওয়াইন) পরীক্ষা করেছি এবং এটি কার্যকর হয় না।

— মাইকেল

Answer 11

এখানে ম্যাথিউ প্রস্তাবিত ডেটা ইউআরআই পদ্ধতিটির লিঙ্কটি জানিয়েছে, এটি সাফারিটিতে কাজ করেছে, তবে ভাল নয় কারণ আমি ফাইল টাইপটি সেট করতে পারি নি, এটি "অজানা" হিসাবে সংরক্ষণিত হয় এবং পরে আমাকে আবার সেখানে যেতে হবে এবং এটি ক্রম পরিবর্তন করতে হবে ফাইলটি দেখতে ...

http://www.nihilogic.dk/labs/canvas2image/

Answer 12

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

আমি এইচটিএমএল 5 উদাহরণগুলি কাজ করছি। Http://facchool.purchase.edu/jeanine.meyer/html5/html5explain.html এ যান এবং গোলকধাঁধায় একটিতে স্ক্রোল করুন। ধাঁধাটি পুনঃনির্মাণের তথ্য স্থানীয় স্টোরেজ ব্যবহার করে সংরক্ষণ করা হয়।

এক্সএমএল ফাইলগুলি লোড এবং কাজের জন্য HTML5 জাভাস্ক্রিপ্ট সন্ধানে আমি এই নিবন্ধটিতে এসেছি। এটি কি পুরানো এইচটিএমএল এবং জাভাস্ক্রিপ্টের মতো একই ????

Answer 13

চেষ্টা

let a = document.createElement('a');
a.href = "data:application/octet-stream,"+encodeURIComponent('"My DATA"');
a.download = 'myFile.json';
a.click(); // we not add 'a' to DOM so no need to remove

আপনি যদি বাইনারি ডেটা ডাউনলোড করতে চান তবে এখানে দেখুন

হালনাগাদ

2020.06.14 আমি ক্রোমকে 83.0 এ উন্নীত করেছি এবং তারপরে এসও স্নিপেট স্টপ কাজগুলি ( স্যান্ডবক্স সুরক্ষা বিধিনিষেধের কারণে ) - তবে জেএসফিডাল সংস্করণটি এখানে কাজ করে -

Answer 14

হিসাবে পূর্বে উল্লিখিত ফাইল এপিআই, সহ FileWriter এবং FileSystem API গুলি একটি ব্রাউজার ট্যাব / উইন্ডোর প্রসঙ্গ মেনু থেকে ক্লায়েন্টের মেশিনে ফাইল সঞ্চয় করার জন্য ব্যবহার করা যেতে পারে।

তবে, দুটি দ্বিতীয় এপিআই সম্পর্কিত কয়েকটি জিনিস রয়েছে যা সম্পর্কে আপনার সচেতন হওয়া উচিত:

• এপিআইগুলির বাস্তবায়ন বর্তমানে কেবল ক্রোমিয়াম-ভিত্তিক ব্রাউজারগুলিতে (ক্রোম এবং অপেরা) রয়েছে
• 24 এপ্রিল, 2014-এ দু'টি এপিআইই ডাব্লু 3 সি স্ট্যান্ডার্ড ট্র্যাক থেকে সরিয়ে নেওয়া হয়েছে এবং এখন পর্যন্ত মালিকানাধীন রয়েছে
• ভবিষ্যতে প্রয়োগকারী ব্রাউজারগুলি থেকে (এখন মালিকানাধীন) এপিআইগুলি সরানো একটি সম্ভাবনা
• একটি স্যান্ডবক্স (ডিস্কের একটি অবস্থান যার বাইরে ফাইলগুলি কোনও প্রভাব ফেলতে পারে না) এপিআই দিয়ে তৈরি ফাইলগুলি সংরক্ষণ করতে ব্যবহৃত হয়
• একটি ভার্চুয়াল ফাইল সিস্টেম (একটি ডিরেক্টরি কাঠামো যা ব্রাউজারের মধ্যে থেকে অ্যাক্সেস করার সময় এটি একই রূপে ডিস্কে অগত্যা উপস্থিত থাকে না) ব্যবহৃত হয়, এটি API এর সাথে তৈরি ফাইলগুলি উপস্থাপন করে

এটি করার জন্য সরাসরি এবং অপ্রত্যক্ষভাবে API গুলি কীভাবে ব্যবহৃত হয় তার সহজ উদাহরণ এখানে রয়েছে:

বেকড গুডস *

bakedGoods.get({
        data: ["testFile"],
        storageTypes: ["fileSystem"],
        options: {fileSystem:{storageType: Window.PERSISTENT}},
        complete: function(resultDataObj, byStorageTypeErrorObj){}
});

কাঁচা ফাইল, ফাইল রাইটার এবং ফাইলসিস্টেম এপিআই ব্যবহার করে

function onQuotaRequestSuccess(grantedQuota)
{

    function saveFile(directoryEntry)
    {

        function createFileWriter(fileEntry)
        {

            function write(fileWriter)
            {
                var dataBlob = new Blob(["Hello world!"], {type: "text/plain"});
                fileWriter.write(dataBlob);              
            }

            fileEntry.createWriter(write);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: true, exclusive: true},
            createFileWriter
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

যদিও ফাইলসিস্টেম এবং ফাইল রাইটার এপিআইগুলি আর স্ট্যান্ডার্ড ট্র্যাকে নেই, তবে কিছু কিছু ক্ষেত্রে তাদের ব্যবহার ন্যায়সঙ্গত হতে পারে, আমার মতে, কারণ:

• অ-বাস্তবায়নকারী ব্রাউজার বিক্রেতাদের কাছ থেকে পুনর্নবীকরণের আগ্রহ এটিকে ঠিক এটিকে আবার ফিরিয়ে দিতে পারে
• বাজারে প্রবেশের (ক্রোমিয়াম-ভিত্তিক) ব্রাউজারগুলি বেশি
• গুগল (ক্রোমিয়ামের মূল অবদানকারী) এপিআইগুলিতে জীবনের শেষ তারিখ দেয় নি

"কিছু কেস" আপনার নিজের দ্বারা অন্তর্ভুক্ত কিনা তা অবশ্য আপনার সিদ্ধান্ত নেওয়ার জন্য।

* বেকডগুডগুলি এখানে ঠিক এই লোকটি ছাড়া অন্য কারও দ্বারা পরিচালিত নয় :)

Answer 15

এই থ্রেডটি কীভাবে বাইনারি ফাইল তৈরি করতে পারে এবং সার্ভার ছাড়াই ক্লায়েন্ট কোডে নামকৃত ফাইলটি ডাউনলোড করার অনুরোধ জানানো যায় able

আমার পক্ষে প্রথম পদক্ষেপটি আমি যে ডেটা সংরক্ষণ করছিলাম তা থেকে বাইনারি ব্লব তৈরি করা হয়েছিল। একক বাইনারি ধরণের জন্য এটি করার জন্য প্রচুর নমুনা রয়েছে, আমার ক্ষেত্রে আমার একাধিক প্রকারের সাথে বাইনারি বিন্যাস রয়েছে যা আপনি ব্লব তৈরির জন্য অ্যারে হিসাবে পাস করতে পারেন।

saveAnimation: function() {

    var device = this.Device;
    var maxRow = ChromaAnimation.getMaxRow(device);
    var maxColumn = ChromaAnimation.getMaxColumn(device);
    var frames = this.Frames;
    var frameCount = frames.length;

    var writeArrays = [];


    var writeArray = new Uint32Array(1);
    var version = 1;
    writeArray[0] = version;
    writeArrays.push(writeArray.buffer);
    //console.log('version:', version);


    var writeArray = new Uint8Array(1);
    var deviceType = this.DeviceType;
    writeArray[0] = deviceType;
    writeArrays.push(writeArray.buffer);
    //console.log('deviceType:', deviceType);


    var writeArray = new Uint8Array(1);
    writeArray[0] = device;
    writeArrays.push(writeArray.buffer);
    //console.log('device:', device);


    var writeArray = new Uint32Array(1);
    writeArray[0] = frameCount;
    writeArrays.push(writeArray.buffer);
    //console.log('frameCount:', frameCount);

    for (var index = 0; index < frameCount; ++index) {

      var frame = frames[index];

      var writeArray = new Float32Array(1);
      var duration = frame.Duration;
      if (duration < 0.033) {
        duration = 0.033;
      }
      writeArray[0] = duration;
      writeArrays.push(writeArray.buffer);

      //console.log('Frame', index, 'duration', duration);

      var writeArray = new Uint32Array(maxRow * maxColumn);
      for (var i = 0; i < maxRow; ++i) {
        for (var j = 0; j < maxColumn; ++j) {
          var color = frame.Colors[i][j];
          writeArray[i * maxColumn + j] = color;
        }
      }
      writeArrays.push(writeArray.buffer);
    }

    var blob = new Blob(writeArrays, {type: 'application/octet-stream'});

    return blob;
}

পরবর্তী পদক্ষেপটি হ'ল ব্রাউজারটি ব্যবহারকারীকে একটি ব্লাফিক পূর্বনির্ধারিত নামের সাথে ডাউনলোড করতে অনুরোধ জানায়।

আমার কেবলমাত্র একটি নামকৃত লিঙ্ক ছিল যা আমি এইচটিএমএল 5 এ যুক্ত করেছিলাম যা আমি প্রাথমিক ফাইল নামটি পুনরায় নামকরণ করতে পুনরায় ব্যবহার করতে পারি। লিঙ্কটি প্রদর্শনের প্রয়োজন নেই বলে আমি এটি লুকিয়ে রেখেছি।

<a id="lnkDownload" style="display: none" download="client.chroma" href="" target="_blank"></a>

শেষ পদক্ষেপটি ব্যবহারকারীকে ফাইলটি ডাউনলোড করার অনুরোধ জানানো হয়।

var data = animation.saveAnimation();
var uriContent = URL.createObjectURL(data);
var lnkDownload = document.getElementById('lnkDownload');
lnkDownload.download = 'theDefaultFileName.extension';
lnkDownload.href = uriContent;
lnkDownload.click();

Answer 16

জিপ হিসাবে ফাইল রফতানি করার জন্য এখানে একটি টিউটোরিয়াল রয়েছে:

শুরু করার আগে, ফাইলগুলি সংরক্ষণের জন্য একটি লাইব্রেরি রয়েছে, লাইব্রেরির নাম ফাইলস্যাভার.জেএস, আপনি এই লাইব্রেরিটি এখানে পেতে পারেন। শুরু করা যাক, এখন, প্রয়োজনীয় গ্রন্থাগারগুলি অন্তর্ভুক্ত করুন:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.4/jszip.min.js"  type="text/javascript"></script>
<script type="text/javascript" src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.js" ></script>

এখন এই কোডটি অনুলিপি করুন এবং এই কোডটি হ্যালো ওয়ার্ল্ডের বিষয়বস্তুযুক্ত একটি হ্যালো.টেক্সট ফাইলের সাথে একটি জিপ ফাইল ডাউনলোড করবে। যদি সবকিছু জিনিস ঠিকঠাক কাজ করে তবে এটি একটি ফাইল ডাউনলোড করবে।

<script type="text/javascript">
    var zip = new JSZip();
    zip.file("Hello.txt", "Hello World\n");
    zip.generateAsync({type:"blob"})
    .then(function(content) {
        // see FileSaver.js
        saveAs(content, "file.zip");
    });
</script>

এটি file.zip নামে একটি ফাইল ডাউনলোড করবে। আপনি এখানে আরও পড়তে পারেন: http://www.wapgee.com/story/248/guide-to-create-zip-files- using-javascript-by- using-jszip-library