এইচটিএমএল বোতাম বা জাভাস্ক্রিপ্ট ক্লিক করার সময় কীভাবে একটি ফাইল ডাউনলোড ট্রিগার করবেন

Question

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

আমি একটি সাধারণ ফাইল ডাউনলোড চাই, যা এটির মতোই হবে:

<a href="file.doc">Download!</a>

তবে আমি এইচটিএমএল বোতাম ব্যবহার করতে চাই, উদাহরণস্বরূপ:

<input type="button" value="Download!">
<button>Download!</button>

তেমনি, জাভাস্ক্রিপ্টের মাধ্যমে একটি সহজ ডাউনলোড ট্রিগার করা সম্ভব?

$("#fileRequest").click(function(){ /* code to download? */ });

আমি অবশ্যই অ্যাঙ্কর তৈরির কোনও উপায় খুঁজছি না যা দেখতে বোতামটির মতো দেখাবে, কোনও ব্যাক-এন্ড স্ক্রিপ্ট ব্যবহার করতে হবে, বা সার্ভার শিরোনাম বা মাইম ধরণের সাথে জগাখিচুড়ি।

Comments

"জাভাস্ক্রিপ্টে একটি ফাইল ডাউনলোড কিভাবে ট্রিগার করবেন" আপনাকে ধন্যবাদ ভবিষ্যতের যে কোনও অনুসন্ধানকারীর পক্ষে উত্তরগুলি আরও দ্রুত সরবরাহ করবে।

— ডানুবিয়ান নাবিক

Answer 1

বোতামটির জন্য আপনি করতে পারেন

<form method="get" action="file.doc">
   <button type="submit">Download!</button>
</form>

Comments

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

— ফ্লোরিয়ান লেইটেজেব

ট্রিগার হিসাবে কাজ করে না, কেবল 'এ' ট্যাগ হিসাবে url এ পুনর্নির্দেশ করুন।

— fdrv

এটি আরও ভাল কাজ করে: <a href="path_to_file" download="propised_file_name"> ডাউনলোড করুন </a>

— kscius

@kscius আজও ডাউনলোডের বৈশিষ্ট্যটি আইই ১১ এ সমর্থিত নয় (এটি এখন এজতে সমর্থিত) এবং এটি সাফারিতে সমর্থিত নয়। ২০১২ সালে উত্তরটি যখন পোস্ট করা হয়েছিল তখন এটি কোনও বড় ব্রাউজারে সমর্থিত ছিল না।

— Cfreak

বোতাম স্টাইলিং সহ একটি নোঙ্গর থাকা এবং একটি বোতামের সাথে একটি ফর্ম থাকার মধ্যে পার্থক্য কী?

— আন্দ্রে এপুরে

Answer 2

আপনি এইচটিএমএল 5 downloadঅ্যাট্রিবিউট দিয়ে একটি ডাউনলোড ট্রিগার করতে পারেন ।

<a href="path_to_file" download="proposed_file_name">Download</a>

কোথায়:

• path_to_fileএমন একটি পথ যা একই উত্সের কোনও URL এ সমাধান করে । এর অর্থ পৃষ্ঠা এবং ফাইলটিকে অবশ্যই একই ডোমেন, সাবডোমেন, প্রোটোকল (এইচটিটিপি বনাম এইচটিটিপিএস) এবং পোর্ট ভাগ করতে হবে (নির্দিষ্ট থাকলে)। ব্যতিক্রমগুলি blob:এবং data:(যা সর্বদা কাজ করে) এবং file:(যা কখনই কার্যকর হয় না)।
• proposed_file_nameসংরক্ষণ করতে ফাইলের নাম। যদি এটি ফাঁকা থাকে, ব্রাউজারটি ফাইলের নামের সাথে ডিফল্ট হয়।

ডকুমেন্টেশন: MDN , ডাউনলোডের উপর এইচটিএমএল স্ট্যান্ডার্ডdownload , এইচটিএমএল স্ট্যান্ডার্ড চালু , CanIUse

Comments

সাফারি এবং নির্দিষ্ট আই সংস্করণগুলির সাথে কাজ করছেন না

— মোহাম্মদ হুসেন

এর সংমিশ্রণটি ব্যবহার করা downloadএবং target="_blank"বেশিরভাগ ব্যবহারের ক্ষেত্রে আবশ্যক বলে মনে হয়। ব্রাউজারগুলি যা বোঝে downloadএটি এটিকে ডাউনলোড হিসাবে বিবেচনা করে, অন্যথায় এটি একটি নতুন ট্যাবে খোলা হয়েছে।

— এমকে 10

কীভাবে এটি কেবলমাত্র একটি ট্যাগের পরিবর্তে কোনও বোতামের অবজেক্টে প্রয়োগ করা যেতে পারে ?

— ঝড়_ম 2138

প্রকৃতপক্ষে এটি কেবল এমডিএন ডক্সে উল্লিখিত একই উত্সের ইউআরএলগুলির জন্য কাজ করে। যদি আমরা একটি জেনেরিক সমাধান বিকাশ করতে চাই তবে এটি একটি বিশাল সীমাবদ্ধতা

— অক্ষত গুপ্ত

প্রশ্নটি স্পষ্টভাবে একটি লিঙ্কের পরিবর্তে একটি বোতাম ব্যবহার করতে

— কোয়ান্টিন

Answer 3

এইচটিএমএল:

<button type="submit" onclick="window.open('file.doc')">Download!</button>

Comments

সেরা এবং সবচেয়ে পরিষ্কার সমাধান। তবে আপনার এখানে কোনও অতিরিক্ত জাভাস্ক্রিপ্টের দরকার নেই। অনক্লিক সহ এইচটিএমএল অংশটি যথেষ্ট।

— ফ্লোরিয়ান লেইটেজেব

আমি যদি একটি এক্সএমএল ফাইল ডাউনলোড করতে চাই?

— g07kore

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

— মুথুকুমার

আপনার যদি পিডিএফ এর মতো ব্রাউজারের দ্বারা গ্রহণযোগ্য কোনও ফাইল থাকে তবে এটি ডাউনলোড ডায়লগটি দেখানোর পরিবর্তে নতুন ট্যাবে খুলবে।

— উইন্ডারাইডার

উইন্ডো.ওপেন একটি ব্রাউজারে পপআপ-ব্লকিং ট্রিগার করতে পারে এবং এইভাবে প্রস্তাবিত নয়। আপনি উইন্ডো.লোকেশন = 'পাথ' ব্যবহার করতে পারেন, যদিও এটি একই ব্রাউজার উইন্ডোতে অবস্থিত হবে।

— এলেনডুরউইন

Answer 4

JQuery সহ:

$("#fileRequest").click(function() {
    // // hope the server sets Content-Disposition: attachment!
    window.location = 'file.doc';
});

Comments

পারফেক্ট, ধন্যবাদ আপনি কি জানবেন যে বেশিরভাগ সার্ভারগুলি কন্টেন্ট-ডিসপজিশনটি ডিফল্টরূপে 'সংযুক্তি' তে সেট করবে?

— ব্রেন্টনস্ট্রাইন

কোনও "সর্বাধিক" নেই। এটি পুরোপুরি নির্ভর করে। সেট হয়ে যাওয়ার উপর নির্ভর করবেন না।

— ম্যাট বল

এই সমস্যাটি আমাকে ব্যালিস্টিক হিসাবে চালিত করে, এবং এটিই একমাত্র বিকল্প যা কাজ করেছিল (এবং আইআই দ্বারা সমর্থিত)। আমি আমার মতো কোনও n00b এর জন্য যুক্ত করব যে বিষয়বস্তু-বিশৃঙ্খলা সেট করতে, আপনাকে যা করতে হবে তা হ'ল: <? পিএইচপি শিরোনাম ('বিষয়বস্তু-স্বভাব: সংযুক্তি; ফাইলের নাম = "ফাইলের নাম। এখানে")); ?>

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

কোন jquery। সময়কাল।

— অ্যাডাম আর্ল্ড

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

— ধীরাজ

Answer 5

পুরানো থ্রেড তবে এটি একটি সাধারণ জেএস সমাধানটি হারিয়েছে:

let a = document.createElement('a')
a.href = item.url
a.download = item.url.split('/').pop()
document.body.appendChild(a)
a.click()
document.body.removeChild(a)

Comments

@ নিকোলাস কাইরিয়াকাইডস আমাকে এই রত্নটির কথা মনে করিয়ে দেয়: image.ibb.co/dtkUWJ/Selection_002.png

— স্টেফানোস Chrs

@ ব্রায়ানলারসেন এফএফ এর কোন সংস্করণ?

— স্টেফানোস Chrs

@ ব্রায়ানালারসেন আপনি ঠিকই বলেছেন, ফায়ারফক্স প্রথমে শরীরে উপাদান যুক্ত না করে এটির অনুমতি দেয় না। ধন্যবাদ, উত্তর আপডেট করে

— স্টেফানোস Chrs

ডাউনলোড শেষ হলে জাভাস্ক্রিপ্ট ফাংশনটি ট্রিগার হওয়ার কোনও উপায় আছে? ডাউনলোডগুলি একবার শুরু হয়ে গেলে একবার ডাউনলোড শুরু হয়ে গেলে বার্তাটি সরিয়ে ফেলার চেষ্টা করে।

— মোহিত বনসাল

@ মোহিতবংশল (আন) ভাগ্যক্রমে ব্রাউজার স্তরের মতো নেই

— স্টেফানোস চিয়ার্স

Answer 6

আপনি এটি "কৌশল" দিয়ে অদৃশ্য iframe সহ করতে পারেন। আপনি এটিতে "src" সেট করলে ব্রাউজারটি প্রতিক্রিয়া জানায় যেন আপনি একই "href" এর সাথে কোনও লিঙ্ক ক্লিক করেন click ফর্মের সাথে সমাধানের বিপরীতে, এটি আপনাকে অতিরিক্ত যুক্তি এম্বেড করতে সক্ষম করে, উদাহরণস্বরূপ টাইমআউট করার পরে ডাউনলোড সক্রিয় করা, যখন কিছু শর্ত পূরণ হয় ইত্যাদি etc.

এটি খুব স্নিগ্ধ, ব্যবহারের সময় কোনও ঝলকানো নতুন উইন্ডো / ট্যাব নেই window.open।

এইচটিএমএল:

<iframe id="invisible" style="display:none;"></iframe>

javascript:

function download() {
    var iframe = document.getElementById('invisible');
    iframe.src = "file.doc";
}

Comments

এটি হ'ল অন্ততপক্ষে যদি আপনি প্রকৃতপক্ষে ডকুমেন্ট.ব্যাডিকে আইফ্রেমে apprnf করেন।

— yxhuvud

এটি এই মুহূর্তে ক্রোমে কাজ করছে বলে মনে হয় না, যদিও এটি কাজ করে। আমি ভাবছি যদি এ ধরনের ক্রমাগতভাবে ক্রোমের বিভিন্ন সংস্করণে কাজ করা বন্ধ করে দেয়।

— ডাবিস ভান্ডারমির

Chrome এ সংস্করণ 61.0.3163.100 (অফিসিয়াল বিল্ড) (

— -৪

ফায়ারফক্স v57 এ চিত্রগুলি নিয়ে কাজ করে না। এটি কেবল আইফ্রেমে চিত্র সরবরাহ করে।

— অ্যান্টনি

Answer 7

বুটস্ট্র্যাপ সংস্করণ

<a class="btn btn-danger" role="button" href="path_to_file"
   download="proposed_file_name">
  Download
</a>

বুটস্ট্র্যাপ 4 ডক্সে ডকুমেন্টেড এবং বুটস্ট্র্যাপ 3 তেও কাজ করে।

Comments

বুটস্ট্র্যাপের সাথে এটি করার একমাত্র বিষয় হ'ল শ্রেণীর নামগুলি, এটি কেবল HTML5 এর শক্তি।

— মাচাদো

প্রশ্নটি কীভাবে লিঙ্কের পরিবর্তে একটি বোতাম দিয়ে এটি করবেন তা স্পষ্টভাবে জিজ্ঞাসা করছে।

— কোয়ান্টিন

আপনি যদি বুটস্ট্র্যাপ সম্পর্কে কিছু জানতেন তবে আপনি দেখতে পাবেন এটি একটি বোতাম।

— জন লর্ড

Answer 8

আমি মনে করি এটিই আপনি সমাধান খুঁজছিলেন

<button type="submit" onclick="window.location.href='file.doc'">Download!</button>

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

downloadCSV: function(data){
    var MIME_TYPE = "text/csv";

    var blob = new Blob([data], {type: MIME_TYPE});
    window.location.href = window.URL.createObjectURL(blob);
}

Comments

404 -> পৃষ্ঠাতে 404 ত্রুটি পৃষ্ঠায় পরিবর্তন। অন্যান্য location.hrefসমাধান হিসাবে উল্লিখিত একই সমস্যা ।

— কলাআসিড

Answer 9

কি সম্পর্কে:

<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">

Comments

এটি কাজ করে না, উদাহরণস্বরূপ, যদি আপনার ফাইলটি একটি চিত্র হয়, কারণ এটি কেবল ব্রাউজারে খোলা হবে would

— যুগ্মনাট

অন্য একটি সমস্যা দেখা দেয় যা যদি ফাইলটি অনুপস্থিত থাকে তবে এটি পুরো পৃষ্ঠাটি 404 পৃষ্ঠায় নেভিগেট করে

— হুগেথ

Answer 10

আপনি ডাউনলোড লিঙ্কটি আড়াল করতে এবং এটিতে বোতামটি ক্লিক করতে পারেন।

<button onclick="document.getElementById('link').click()">Download!</button>
<a id="link" href="file.doc" download hidden></a>

Comments

ফায়ারফক্সে এটি কাজ করার জন্য, উত্সটি নথির মতো একই ডোমেনে থাকতে হবে। সিওআরএস শিরোনাম সেট করা কোনও উপকার করে না ।

— অ্যান্টনি

কখনও এটি করবেন না

— ওয়ানেস

@ ওনেস কেন নয়?

— স্টারওয়ার্সুই

Answer 11

যদি আপনি ভ্যানিলা জাভাস্ক্রিপ্ট (কোনও jQuery নয়) সমাধান খুঁজছেন এবং এইচটিএমএল 5 বৈশিষ্ট্যটি ব্যবহার না করে আপনি এটি চেষ্টা করতে পারেন।

const download = document.getElementById("fileRequest");

download.addEventListener('click', request);

function request() {
    window.location = 'document.docx';
}

.dwnld-cta {
    border-radius: 15px 15px;
    width: 100px;
    line-height: 22px
}

<h1>Download File</h1>
<button id="fileRequest" class="dwnld-cta">Download</button>

Answer 12

পৃষ্ঠাটি লোড হওয়ার সময় ফাইলটি ডাউনলোড করার জন্য নির্ধারিত হওয়ার পরে অবশেষে এটিই আমার পক্ষে কাজ করেছিল।

জেএস ফর্মটির ক্রিয়া বৈশিষ্ট্য আপডেট করতে:

function setFormAction() {
    document.getElementById("myDownloadButtonForm").action = //some code to get the filename;
}

ফর্মের ক্রিয়া বৈশিষ্ট্যটি আপডেট করতে জেএসকে কল করা হচ্ছে:

<body onLoad="setFormAction();">

জমা বোতাম সহ ফর্ম ট্যাগ:

<form method="get" id="myDownloadButtonForm" action="">
    Click to open document:  
    <button type="submit">Open Document</button>
</form>

নিম্নলিখিতগুলি কাজ করে না :

<form method="get" id="myDownloadButtonForm" action="javascript:someFunctionToReturnFileName();">

Comments

সম্ভবত কারণ আপনার যদি লোড সময়ে ফাইল থাকে, আপনি কেবল টেম্প্লেটিং ইঞ্জিন ব্যবহার করে সার্ভারে ক্রিয়াটি রেন্ডার করতে পারবেন না? কেন জেএস কোডের প্রয়োজন?

— আন্দ্রে এপুরে

Answer 13

আপনি কি ফর্মটি ব্যবহার করতে না পারেন, সাথে অন্য পদ্ধতির downloadjs চমৎকার মাপসই করা হবে। ডাউনলোডজগুলি হুডের নীচে ব্লব এবং এইচটিএমএল 5 ফাইল এপিআই ব্যবহার করে:

{ডাউনলোডজ (ইউআরএল, ফাইলের নাম)}) />

* এটি জেএসএক্স / প্রতিক্রিয়া বাক্য গঠন, তবে খাঁটি এইচটিএমএল এ ব্যবহার করা যেতে পারে

Comments

অন্যান্য ডোমেনগুলিতে চিত্রগুলির জন্য সিওআরএস সমস্যাগুলি এড়ানোর জন্য, আইএমজি ট্যাগে ক্রসরিগিন = "বেনামে" রাখুন: <img src = "image.png" ক্রসরিগিন = "বেনামে" />

— জোনাথন হ্যারিস

Answer 14

আপনার <body>এবং </body>ট্যাগগুলির মধ্যে যে কোনও জায়গায় নীচের কোডটি ব্যবহার করে একটি বোতামে রাখুন:

<button>
    <a href="file.doc" download>Click to Download!</a>
</button>

এটি নিশ্চিত কাজ!

Comments

ক্রোমের জন্য এটি দুর্দান্ত সমাধান

— হাইক আরমানিয়ান

সাফারিতেও কাজ করে না: ডাব্লু 3 স্কুল

— অ্যালেক্স

এমএস ব্রাউজারগুলিতে কাজ না করা বরং একটি বড় সমস্যা এবং ক্রোম সর্বদা এর উত্তর হতে পারে না।

— সুডোকিড

আপনি এইচটিএমএলে একটি বোতামের ভিতরে কোনও লিঙ্ক রাখতে পারবেন না

— কোয়ান্টিন

Answer 15

আপনার কাছে জটিল URL রয়েছে এমন ক্ষেত্রে করার আরেকটি উপায় file.doc?foo=bar&jon=doeহ'ল ফর্মের অভ্যন্তরে লুকানো ক্ষেত্র যুক্ত করা

<form method="get" action="file.doc">
  <input type="hidden" name="foo" value="bar" />
  <input type="hidden" name="john" value="doe" />
  <button type="submit">Download Now</button>
</form>

@Cfreak উত্তরে অনুপ্রাণিত যা সম্পূর্ণ নয়

Answer 16

আপনি কোনও পাঠ্য ছাড়াই কিন্তু লিঙ্ক সহ ট্যাগ যুক্ত করতে পারেন। এবং আপনি যখন কোডটিতে থাকা বোতামটি ক্লিক করেন তখন কেবল $ ("আপনার লিঙ্কক্লাস") চালান। ক্লিক করুন () ফাংশন।

Answer 17

ডাউনলোড বৈশিষ্ট্য এটি করুন

 <a class="btn btn-success btn-sm" href="/file_path/file.type" download>
     <span>download </span>&nbsp;<i class="fa fa-download"></i>
 </a>

Comments

আমি আপনার উত্তরটি পছন্দ করি

— জর্জ সি।

প্রশ্নটি কীভাবে লিঙ্কের পরিবর্তে একটি বোতাম দিয়ে এটি করবেন তা স্পষ্টভাবে জিজ্ঞাসা করছে।

— কোয়ান্টিন

Answer 18

আপনি যদি <a>ট্যাগটি ব্যবহার করেন তবে পুরো url ব্যবহার করতে ভুলবেন না যা ফাইলের দিকে পরিচালিত করে - যেমন:

<a href="http://www.example.com/folder1/file.doc">Download</a>

Comments

আমি মনে করি না যে এখানে সমস্যা। লিঙ্কটি ফাইলের মতো একই পথে থাকলে "পরম" পথের প্রয়োজন হয় না।

— রকেট হাজমত

@ রকেট - আপনি অবশ্যই নিখুঁত পথ সম্পর্কে সঠিক, তবে এটি সঠিকভাবে নিশ্চিত করার পক্ষে এটি সর্বোত্তম উপায়। এটি কার্যকর ছিল কিনা তা সিদ্ধান্ত নেওয়ার জন্য আমি ওপিকে ছেড়ে দেব -

— মার্ক

প্রশ্নটি কীভাবে লিঙ্কের পরিবর্তে একটি বোতাম দিয়ে এটি করবেন তা স্পষ্টভাবে জিজ্ঞাসা করছে।

— কোয়ান্টিন

ডাউনলোড বৈশিষ্ট্যটি এই সমাধানটিতে অনুপস্থিত। ডাউনলোড বৈশিষ্ট্য যুক্ত করার পরেও এটি ক্রস-ডোমেনের জন্য কাজ করবে না।

— এস শরীফ

Answer 19

আমার জন্য অ্যাঙ্কর পাঠ্যের পরিবর্তে অ্যাডিং বোতামটি সত্যিই ভালভাবে কাজ করে।

<a href="file.doc"><button>Download!</button></a>

বেশিরভাগ বিধি দ্বারা এটি ঠিক নাও হতে পারে তবে এটি দেখতে বেশ ভাল দেখাচ্ছে।

Comments

এটি কেবলমাত্র কাজ করে কারণ আপনার ব্রাউজারটি ডক ফাইলগুলিকে সমর্থন করে না।

— এড্রিয়ান

আপনার এইচটিএমএল অবৈধ। <a>উপাদানগুলিতে উপাদান থাকতে পারে না <button>।

— কোয়ান্টিন

যদিও সবসময় এমন ছিল? আপনি যখন মন্তব্য করেছিলেন তখন এই উত্তরটি দু'বছর পুরানো ছিল।

— জন লর্ড