डेटा url फ़ाइल डाउनलोड करें

Question

मैं पूरी तरह से जावास्क्रिप्ट-आधारित ज़िप / अनज़िप उपयोगिता बनाने के विचार के साथ खेल रहा हूं जिसे कोई भी ब्राउज़र से एक्सेस कर सकता है। वे बस अपने ज़िप को सीधे ब्राउज़र में खींच सकते हैं और यह उन्हें सभी फाइलों को डाउनलोड करने देगा। वे व्यक्तिगत फ़ाइलों को अंदर खींचकर नई ज़िप फाइलें भी बना सकते हैं।

मुझे पता है कि इसे सर्वराइड करना बेहतर होगा, लेकिन यह प्रोजेक्ट थोड़ा मज़ेदार है।

अगर मैं उपलब्ध विभिन्न विधियों का लाभ उठाता हूं, तो फ़ाइलों को ब्राउज़र में खींचना काफी आसान होना चाहिए। (जीमेल शैली)

एन्कोडिंग / डिकोडिंग उम्मीद है कि ठीक होना चाहिए। मैंने कुछ as3 ज़िप पुस्तकालयों को देखा है इसलिए मुझे यकीन है कि मुझे उसके साथ ठीक होना चाहिए।

मेरा मुद्दा अंत में फ़ाइलों को डाउनलोड कर रहा है।

window.location = 'data:jpg/image;base64,/9j/4AAQSkZJR....' 

यह फ़ायरफ़ॉक्स में ठीक काम करता है लेकिन क्रोम में नहीं।

मैं फ़ाइलों को क्रोम के उपयोग से ठीक छवियों के रूप में एम्बेड कर सकता हूं <img src="data:jpg/image;ba.." />, लेकिन फाइलें आवश्यक रूप से छवियां नहीं होंगी। वे कोई भी प्रारूप हो सकते हैं।

क्या कोई अन्य समाधान या किसी प्रकार के समाधान के बारे में सोच सकता है?

Comments

वर्तमान समर्थन , दुर्भाग्य से, बल्कि सीमित है

— केसबश

Answer 1

विचार:

• प्रयास करें <a href="data:...." target="_blank">(अनटाइड)

• डेटा URL के बजाय डाउनलोड का उपयोग करें (IE के लिए भी काम करेगा)

Comments

@jcubic मृत लिंक को इंगित करने के लिए धन्यवाद। नया डाउनलोड स्थान github.com/dcneiner/Downloadify

— Pekka

यदि आप फ्लैश का उपयोग नहीं कर सकते हैं, लेकिन जावा सर्वर-साइड घटक चला रहे हैं, तो आप इसका उपयोग कर सकते हैं: github.com/suprememoocow/databounce । यह क्लाइंट से डेटा को 'बाउंस' करने के लिए एक सर्वलेट का उपयोग करता है। अन्य सर्वर साइड प्रौद्योगिकियों, जैसे कि पायथन, ASP.NET आदि में एक ही ट्रिक करना काफी आसान होगा

— एंड्रयू न्यूडिगेट

क्या बिना फ्लैश के ऐसा करने का कोई तरीका है? सभी ब्राउज़रों के लिए डेटा URL लेकिन IE और IE के लिए ActiveX foo के कुछ प्रकार? (इस तरह मैं फ्लैश के बिना संगीत चलाने में कामयाब रहा: HTML5 सभी ब्राउज़रों के लिए ऑडियो लेकिन IE और IE के लिए ActiveX।)

— panzi

ब्राउज़र में फ़्लैश प्लेयर की अपेक्षा डाउनलोड करें। यदि उपयोगकर्ता के पास कोई फ़्लैश प्लेयर नहीं है, तो फ़ाइल डाउनलोड नहीं होगी

— जीवनानंद जे

Answer 2

यदि आप फ़ाइल को सुझाए गए नाम देना चाहते हैं (डिफ़ॉल्ट 'डाउनलोड' के बजाय) आप क्रोम, फ़ायरफ़ॉक्स और कुछ IE संस्करणों में निम्नलिखित का उपयोग कर सकते हैं:

function downloadURI(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  delete link;
}

और निम्नलिखित उदाहरण से पता चलता है कि यह उपयोग किया जाता है:

downloadURI("data:text/html,HelloWorld!", "helloWorld.txt");

Comments

आप के साथ को सरल बनाने वाली link.click()बजाय अपने eventFireसमारोह ... jsfiddle.net/ARTsinn/Ezx5m

— yckart

अच्छा समाधान है। लेकिन लिंक के बाद क्या बनता है?

— webshaker 17

चर 'लिंक' फ़ंक्शन के अंत में दायरे से बाहर चला जाता है (ध्यान दें कि हमने इसे डोम में कभी नहीं जोड़ा है) तो कुछ ही समय बाद कचरा एकत्र हो जाएगा।

— २०

यह केवल क्रोम में काम करता है। यदि आप इसे फ़ायरफ़ॉक्स / IE में काम करना चाहते हैं, तो @MartinoDino से उत्तर देखें।

— ट्रूविल जूल

मैं के साथ की कोशिश की download.js के रूप में सुझाव दिया, यहाँ और यह काम करने लगता है। :)

— joaorodr84

Answer 3

function download(dataurl, filename) {
  var a = document.createElement("a");
  a.href = dataurl;
  a.setAttribute("download", filename);
  a.click();
}

download("data:text/html,HelloWorld!", "helloWorld.txt");

या:

function download(url, filename) {
fetch(url).then(function(t) {
    return t.blob().then((b)=>{
        var a = document.createElement("a");
        a.href = URL.createObjectURL(b);
        a.setAttribute("download", filename);
        a.click();
    }
    );
});
}

download("https://get.geojs.io/v1/ip/geo.json","geoip.json")
download("data:text/html,HelloWorld!", "helloWorld.txt");

Comments

गैर मौजूद तत्व पर घटना पर क्लिक करें: डी को एपेंडचाइल्ड की कोई आवश्यकता नहीं है।

— ज़िबरी

हाँ। आपके द्वारा तत्व 'a' बनाने के बाद आप बस a.click () कॉल कर सकते हैं, और फिर एक href सेट कर सकते हैं।

— user1709076

अतीत में a.click () कॉलिंग सीधे काम नहीं करेगी लेकिन यह ईवेंट के साथ कार्य करेगी। अब वे दोनों काम करते हैं।

— जिब्री

यह अधिकांश आधुनिक ब्राउज़रों में काम करता है, लेकिन मैं ध्यान दूंगा कि कुछ पुराने ब्राउज़रों का समर्थन करने के लिए दस्तावेज़ को हटाना आवश्यक है।

— उल्लू

जब भी डेटायूरी बहुत बड़ा हो जाता है (ब्राउज़र पर निर्भर करता है, लेकिन आपके दूसरे समाधान का उपयोग किया जाना चाहिए, लेकिन क्रोम मेरे अनुभव में कई मेगाबाइट के उरी को स्वीकार नहीं करता है)। यह भी देखें stackoverflow.com/questions/38781968/... ।

— neural5torm

Answer 4

मेरे अनुभव को साझा करना चाहते हैं और फ़ायरफ़ॉक्स और 2014 में अपडेट किए गए उत्तर पर काम न करने वाले किसी व्यक्ति को डाउनलोड करने में मदद करना चाहते हैं। नीचे का स्निपेट फ़ायरफ़ॉक्स और क्रोम दोनों में काम करेगा और यह एक फ़ाइलनाम स्वीकार करेगा:

  // Construct the <a> element
  var link = document.createElement("a");
  link.download = thefilename;
  // Construct the uri
  var uri = 'data:text/csv;charset=utf-8;base64,' + someb64data
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  // Cleanup the DOM
  document.body.removeChild(link);

Comments

दुर्भाग्य से, यह सफारी में काम नहीं करता है। सफारी downloadविशेषता को पहचानता नहीं है । वैसे भी धन्यवाद, यह उतना ही करीब है जितना मैं इस समय प्राप्त कर सकता हूं।

— मोरिट्ज़ पीटरसन

यह IE 11 में मेरे लिए href मान को रीडायरेक्ट करने के लिए विंडो को पुनर्निर्देशित कर रहा है। prevetDefault (); IE में व्यवहार बंद नहीं करता है

— b_dubb

धन्यवाद, btoaभले ही परिभाषित नहीं किया गया है (उदाहरण में नोड अधिशेष दृश्य परियोजना)const btxt = new Buffer(text).toString('base64'); const uri = 'data:text/csv;charset=utf-8;base64,' + btxt + ';'

— इवान

लिंक डिलीट करना व्यर्थ है, यह अगली पंक्ति के दायरे से बाहर हो जाता है और कचरा एकत्रित हो जाएगा, यह डिलीट के लिए एक वैध लक्ष्य नहीं है।

— macdja38

डॉक्‍यूमेंट की कोई जरूरत नहीं है। कोई भी।

— चिल्‍डचिल्ड

Answer 5

यहाँ एक शुद्ध जावास्क्रिप्ट समाधान है जिसे मैंने फ़ायरफ़ॉक्स और क्रोम में काम करने का परीक्षण किया है लेकिन इंटरनेट एक्सप्लोरर में नहीं:

function downloadDataUrlFromJavascript(filename, dataUrl) {

    // Construct the 'a' element
    var link = document.createElement("a");
    link.download = filename;
    link.target = "_blank";

    // Construct the URI
    link.href = dataUrl;
    document.body.appendChild(link);
    link.click();

    // Cleanup the DOM
    document.body.removeChild(link);
    delete link;
}

क्रॉस-ब्राउज़र समाधान अब तक मिला:

डाउनलोड -> फ़्लैश की आवश्यकता है

databounce -> IE 10 और 11 में परीक्षण किया गया, और मेरे लिए काम नहीं करता है। एक सर्वलेट और कुछ अनुकूलन की आवश्यकता है। (गलत तरीके से नाविक का पता लगाता है। मुझे परीक्षण के लिए संगतता मोड में IE सेट करना पड़ा, सर्वलेट में डिफ़ॉल्ट चारसेट, निरपेक्ष रास्तों के लिए सही सर्वलेट पथ के साथ जावास्क्रिप्ट विकल्प ऑब्जेक्ट ...) गैर-IE ब्राउज़रों के लिए, यह उसी विंडो में फ़ाइल खोलता है।

download.js -> http://danml.com/download.html एक और पुस्तकालय समान है, लेकिन परीक्षण नहीं किया गया है। शुद्ध जावास्क्रिप्ट होने का दावा करता है, न तो सर्वलेट की आवश्यकता होती है और न ही फ्लैश की, लेकिन IE <= 9 पर काम नहीं करता है।

Comments

download.js बहुत अच्छा है। बस IE11 पर एक त्वरित जाँच की, यह काम करता है। आपका बहुत बहुत धन्यवाद!

— रिकी जिआओ

Answer 6

कई समाधान हैं लेकिन वे HTML5 पर निर्भर हैं और अभी तक कुछ ब्राउज़रों में पूरी तरह से लागू नहीं किए गए हैं। नीचे दिए गए उदाहरण क्रोम और फ़ायरफ़ॉक्स (आंशिक रूप से काम करता है) में परीक्षण किए गए थे।

1. कैनवस उदाहरण फ़ाइल को बचाने के लिए समर्थन के साथ। बस अपने document.location.hrefडेटा को यूआरआई पर सेट करें ।
2. एंकर डाउनलोड उदाहरण । यह <a href="your-data-uri" download="filename.txt">फ़ाइल नाम निर्दिष्ट करने के लिए उपयोग करता है।

Comments

कैनवास उदाहरण 404 की ओर जाता है

— करेल बिलेक

क्रोम और मोबाइल सफारी में एक पीडीएफ डेटा यूआरएल के लिए डाउनलोड विशेषता मेरे लिए काम कर रही है।

— bbsimonbb

Answer 7

@Owencm और @ Chazt3n से जवाब मिलाते हुए, यह फ़ंक्शन IE11, फ़ायरफ़ॉक्स और क्रोम से पाठ को डाउनलोड करने की अनुमति देगा। (क्षमा करें, मेरे पास सफारी या ओपेरा तक पहुंच नहीं है, लेकिन यदि आप कोशिश करते हैं और यह काम करता है तो कृपया एक टिप्पणी जोड़ें।)

initiate_user_download = function(file_name, mime_type, text) {
    // Anything but IE works here
    if (undefined === window.navigator.msSaveOrOpenBlob) {
        var e = document.createElement('a');
        var href = 'data:' + mime_type + ';charset=utf-8,' + encodeURIComponent(text);
        e.setAttribute('href', href);
        e.setAttribute('download', file_name);
        document.body.appendChild(e);
        e.click();
        document.body.removeChild(e);
    }
    // IE-specific code
    else {
        var charCodeArr = new Array(text.length);
        for (var i = 0; i < text.length; ++i) {
            var charCode = text.charCodeAt(i);
            charCodeArr[i] = charCode;
        }
        var blob = new Blob([new Uint8Array(charCodeArr)], {type: mime_type});
        window.navigator.msSaveOrOpenBlob(blob, file_name);
    }
}

// Example:
initiate_user_download('data.csv', 'text/csv', 'Sample,Data,Here\n1,2,3\n');

Answer 8

किसी के लिए IE में समस्याएँ:

यति द्वारा यहाँ उत्तर को उभारें: स्थानीय रूप से IE में कैनवास को सहेजना

dataURItoBlob = function(dataURI) {
    var binary = atob(dataURI.split(',')[1]);
    var array = [];
    for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: 'image/png'});
}

var blob = dataURItoBlob(uri);
window.navigator.msSaveOrOpenBlob(blob, "my-image.png");

Answer 9

आपकी समस्या अनिवार्य रूप से "सभी ब्राउज़र इस बात का समर्थन नहीं करेंगे" पर उबलते हैं।

आप एक वर्कअराउंड की कोशिश कर सकते हैं और एक फ्लैश ऑब्जेक्ट से अनजिप की गई फाइलों को परोस सकते हैं, लेकिन तब आप JS-only की शुद्धता खो देंगे (वैसे भी, मुझे यकीन नहीं है कि आप वर्तमान में किसी तरह के फ़्लैश वर्कअराउंड के बिना "ब्राउज़र में फ़ाइलों को खींच सकते हैं") - है कि एक HTML5 सुविधा हो सकता है?