मैं एक वेब ब्राउज़र का उपयोग करके क्लाइंट साइड पर OpenOffice फाइलें, .odt और .odp प्रदर्शित करना चाहता हूं ।
ये फाइलें ज़िप्ड फाइलें हैं। Ajax का उपयोग करते हुए, मैं इन फ़ाइलों को सर्वर से प्राप्त कर सकता हूं लेकिन ये ज़िप्ड फाइलें हैं। मुझे उन्हें जावास्क्रिप्ट का उपयोग करके अनज़िप करना है , मैंने inflate.js, http://www.onicos.com/staff/iz/amuse/javascript/expert/inflate.txt का उपयोग करने की कोशिश की है , लेकिन सफलता के बिना।
मैं यह कैसे कर सकता हूँ?
जवाबों:
मैंने जावास्क्रिप्ट में एक अनजापर लिखा था। यह काम करता हैं।
यह एंडी जीपी ना के बाइनरी फाइल रीडर पर निर्भर करता है और कुछ RFC1951 नोटमास्टरेट से तर्क को बढ़ाता है । मैंने ZipFile क्लास जोड़ी।
काम करने का उदाहरण:
http://cheeso.members.winisp.net/Unzip-Example.htm (मृत लिंक)
स्रोत:
http://cheeso.members.winisp.net/srcview.aspx?dir=js-unzip (मृत लिंक)
NB : लिंक मर चुके हैं; मुझे जल्द ही एक नया मेजबान मिलेगा।
स्रोत में शामिल एक ZipFile.htm प्रदर्शन पृष्ठ है, और 3 अलग-अलग स्क्रिप्ट, एक जिप्फ़िले वर्ग के लिए, एक फुलाया वर्ग के लिए, और एक द्विआधारी फ़ाइल रीडर वर्ग के लिए। डेमो jQuery और jQuery UI पर भी निर्भर करता है। यदि आप बस js-zip.zip फ़ाइल डाउनलोड करते हैं, तो सभी आवश्यक स्रोत हैं।
यहाँ जावास्क्रिप्ट में एप्लिकेशन कोड कैसा दिखता है:
// In my demo, this gets attached to a click event.
// it instantiates a ZipFile, and provides a callback that is
// invoked when the zip is read. This can take a few seconds on a
// large zip file, so it's asynchronous.
var readFile = function(){
$("#status").html("<br/>");
var url= $("#urlToLoad").val();
var doneReading = function(zip){
extractEntries(zip);
};
var zipFile = new ZipFile(url, doneReading);
};
// this function extracts the entries from an instantiated zip
function extractEntries(zip){
$('#report').accordion('destroy');
// clear
$("#report").html('');
var extractCb = function(id) {
// this callback is invoked with the entry name, and entry text
// in my demo, the text is just injected into an accordion panel.
return (function(entryName, entryText){
var content = entryText.replace(new RegExp( "\\n", "g" ), "<br/>");
$("#"+id).html(content);
$("#status").append("extract cb, entry(" + entryName + ") id(" + id + ")<br/>");
$('#report').accordion('destroy');
$('#report').accordion({collapsible:true, active:false});
});
}
// for each entry in the zip, extract it.
for (var i=0; i<zip.entries.length; i++) {
var entry = zip.entries[i];
var entryInfo = "<h4><a>" + entry.name + "</a></h4>\n<div>";
// contrive an id for the entry, make it unique
var randomId = "id-"+ Math.floor((Math.random() * 1000000000));
entryInfo += "<span class='inputDiv'><h4>Content:</h4><span id='" + randomId +
"'></span></span></div>\n";
// insert the info for one entry as the last child within the report div
$("#report").append(entryInfo);
// extract asynchronously
entry.extract(extractCb(randomId));
}
}
डेमो कुछ चरणों में काम करता है: readFilefn एक क्लिक से चालू हो जाता है, और एक ZipFile ऑब्जेक्ट को इंस्टेंट करता है, जो ज़िप फ़ाइल को पढ़ता है। जब रीड पूरा हो जाता है (आमतौर पर यथोचित आकार के ज़िप के लिए एक सेकंड से भी कम समय में होता है) के लिए एक अतुल्यकालिक कॉलबैक है - इस डेमो में कॉलबैक को स्थानीय स्थानीय चर में आयोजित किया जाता है, जो बस कॉल करता है extractEntries, जो प्रदान की गई सभी सामग्री को नेत्रहीन रूप से खोल देता है। ज़िप फ़ाइल। एक वास्तविक ऐप में आप संभवतः कुछ प्रविष्टियों को निकालने के लिए चुनेंगे (उपयोगकर्ता को प्रोग्राम के अनुसार एक या एक से अधिक प्रविष्टियाँ चुनने की अनुमति दे सकते हैं, आदि)।
extractEntriesसभी प्रविष्टियों से अधिक fn दोहराता, और कॉल extract()हर एक पर, एक कॉलबैक गुजर। एक प्रविष्टि के अपघटन में समय लगता है, शायद 1 या उससे अधिक के लिए प्रत्येक प्रविष्टि के लिए zipfile, जिसका अर्थ है अतुल्यकालिक उपयुक्त है। एक्सट्रेक्ट कॉलबैक केवल निकाले गए कंटेंट को पेज पर jQuery अकॉर्डियन में जोड़ता है। यदि सामग्री द्विआधारी है, तो यह इस तरह के रूप में स्वरूपित हो जाती है (दिखाई नहीं जाती)।
यह काम करता है, लेकिन मुझे लगता है कि उपयोगिता कुछ हद तक सीमित है।
एक बात के लिए: यह बहुत धीमा है। PKWare से 140k AppNote.txt फ़ाइल को अनज़िप करने के लिए ~ 4 सेकंड का समय लगता है। .NET प्रोग्राम में .5s से कम में वही अनकंप्रेस किया जा सकता है। संपादित करें : जावास्क्रिप्ट ZipFile अनपैक आईई 9 और क्रोम में अब इससे काफी तेज है। यह अभी भी संकलित कार्यक्रम की तुलना में धीमा है, लेकिन सामान्य ब्राउज़र उपयोग के लिए यह बहुत तेज़ है।
दूसरे के लिए: यह स्ट्रीमिंग नहीं करता है। यह मूल रूप से zipfile की संपूर्ण सामग्री को मेमोरी में स्लैप करता है। एक "वास्तविक" प्रोग्रामिंग वातावरण में आप केवल एक ज़िप फ़ाइल के मेटाडेटा (जैसे कि, 64 बाइट्स प्रति प्रविष्टि) में पढ़ सकते हैं और फिर वांछित के रूप में अन्य डेटा को पढ़ और विघटित कर सकते हैं। जावास्क्रिप्ट में उस तरह से IO करने का कोई तरीका नहीं है, जहां तक मुझे पता है, इसलिए एकमात्र विकल्प पूरे ज़िप को मेमोरी में पढ़ना और उसमें यादृच्छिक अभिगम करना है। इसका मतलब यह बड़ी ज़िप फ़ाइलों के लिए सिस्टम मेमोरी पर अनुचित मांगों को रखेगा। इतनी छोटी ज़िप फ़ाइल के लिए कोई समस्या नहीं है।
इसके अलावा: यह "सामान्य मामला" ज़िप फ़ाइल को हैंडल नहीं करता है - बहुत सारे ज़िप विकल्प हैं जो मैंने unzipper में लागू करने के लिए परेशान नहीं किया है - जैसे ज़िप एन्क्रिप्शन, WinZip एन्क्रिप्शन, zip64, UTF-8 एन्कोडेड फ़ाइल नाम, और इसी तरह पर। ( EDIT - यह अब UTF-8 एन्कोडेड फ़ाइल नाम संभालता है)। ZipFile क्लास मूल बातें संभालती है, हालाँकि। इनमें से कुछ चीजों को लागू करना कठिन नहीं होगा। मेरे पास जावास्क्रिप्ट में एईएस एन्क्रिप्शन क्लास है; कि एन्क्रिप्शन का समर्थन करने के लिए एकीकृत किया जा सकता है। Zip64 का समर्थन करना संभवतः जावास्क्रिप्ट के अधिकांश उपयोगकर्ताओं के लिए बेकार होगा, क्योंकि इसका समर्थन करने का इरादा है> 4gb zipfiles - एक ब्राउज़र में उन को निकालने की आवश्यकता नहीं है।
मैंने बाइनरी सामग्री को अनज़िप करने के लिए मामले का परीक्षण नहीं किया। अभी यह टेक्स्ट को अनज़िप करता है। यदि आपके पास ज़िप्ड बाइनरी फ़ाइल है, तो आपको इसे ठीक से संभालने के लिए ZipFile वर्ग को संपादित करना होगा। मुझे समझ नहीं आया कि सफाई से कैसे किया जाए। यह अब बाइनरी फाइलें भी करता है।
EDIT - मैंने JS अनज़िप लाइब्रेरी और डेमो को अपडेट किया। यह अब टेक्स्ट के अलावा बाइनरी फाइल करता है। मैंने इसे अधिक लचीला और अधिक सामान्य बना दिया है - पाठ फ़ाइलों को पढ़ते समय अब आप एन्कोडिंग का उपयोग करने के लिए निर्दिष्ट कर सकते हैं। इसके अलावा डेमो का विस्तार किया गया है - यह अन्य चीजों के अलावा, ब्राउज़र में एक XLSX फ़ाइल को खोलना दिखाता है।
इसलिए, जबकि मुझे लगता है कि यह सीमित उपयोगिता और रुचि का है, यह काम करता है। मुझे लगता है कि यह Node.js. में काम करेगा
मैं zip.js का उपयोग कर रहा हूं और यह काफी उपयोगी प्रतीत हो रहा है। यह देखने लायक है!
उदाहरण के लिए, अनज़िप डेमो की जाँच करें ।
मुझे jszip काफी उपयोगी लगा। मैंने अब तक केवल पढ़ने के लिए उपयोग किया है, लेकिन उनके पास क्षमताओं का निर्माण / संपादन भी है।
कोड वार यह कुछ इस तरह दिखता है
var new_zip = new JSZip();
new_zip.load(file);
new_zip.files["doc.xml"].asText() // this give you the text in the file
मैंने देखा कि एक बात यह है कि ऐसा लगता है कि फाइल को बाइनरी स्ट्रीम फॉर्मेट में होना चाहिए (रीडर्स .ArayrayBuffer of FileReader () का उपयोग करके पढ़ें), अन्यथा मुझे यह कहते हुए त्रुटियां हो रही थीं कि मेरे पास एक भ्रष्ट ज़िप फ़ाइल हो सकती है।
संपादित करें: 2.x से 3.0.0 अपग्रेड गाइड पर ध्यान दें :
लोड () विधि और डेटा (नया JSZip (डेटा)) के साथ कंस्ट्रक्टर को लोडअर्सिंस्क () द्वारा बदल दिया गया है।
धन्यवाद user2677034
यदि आपको अन्य स्वरूपों का समर्थन करने की आवश्यकता है या केवल अच्छे प्रदर्शन की आवश्यकता है, तो आप इस WebAssembly लाइब्रेरी का उपयोग कर सकते हैं
यह वादा किया गया है, यह थ्रेडिंग के लिए वेबवर्क का उपयोग करता है और एपीआई वास्तव में सरल ईएस मॉड्यूल है
मैंने "बाइनरी टूल्स फॉर जावास्क्रिप्ट" लिखा, एक ओपन सोर्स प्रोजेक्ट जिसमें अनज़िप, अनरर और अनार की क्षमता शामिल है: https://github.com/codedread/bitjs
मेरी कॉमिक बुक रीडर में इस्तेमाल किया गया: https://github.com/codedread/kthoom (भी खुला स्रोत)।
HTH!
कोड उदाहरण लेखक की साइट पर दिया गया है । आप ग्रंथों (अंग्रेजी से जापानी) का अनुवाद करने के लिए बेबफ़िश का उपयोग कर सकते हैं ।
जहाँ तक मैं जापानी समझता हूँ, यह ज़िप कोड कोड ज़िप डेटा (धाराओं) को ज़िप संग्रह को डिकोड करने के लिए है।
मैंने उसके लिए एक क्लास भी लिखी। http://blog.another-d-mention.ro/programming/read-load-files-from-zip-in-javascript/ आप बेसिक एसेट्स को लोड कर सकते हैं जैसे कि जावास्क्रिप्ट / सीएसएस / इमेज सीधे क्लास के तरीकों का इस्तेमाल करके जिप से। आशा है कि इससे सहायता मिलेगी
यदि किसी दूरस्थ सर्वर पर होस्ट की गई ज़िप फ़ाइल से किसी की रीडिंग इमेज या अन्य बाइनरी फाइलें हैं, तो आप jszip लाइब्रेरी का उपयोग करके ज़िप ऑब्जेक्ट को डाउनलोड करने और बनाने के लिए निम्नलिखित स्निपेट का उपयोग कर सकते हैं ।
// this function just get the public url of zip file.
let url = await getStorageUrl(path)
console.log('public url is', url)
//get the zip file to client
axios.get(url, { responseType: 'arraybuffer' }).then((res) => {
console.log('zip download status ', res.status)
//load contents into jszip and create an object
jszip.loadAsync(new Blob([res.data], { type: 'application/zip' })).then((zip) => {
const zipObj = zip
$.each(zip.files, function (index, zipEntry) {
console.log('filename', zipEntry.name)
})
})
अब zipObj का उपयोग करके आप फ़ाइलों तक पहुँच सकते हैं और इसके लिए एक src url बना सकते हैं।
var fname = 'myImage.jpg'
zipObj.file(fname).async('blob').then((blob) => {
var blobUrl = URL.createObjectURL(blob)