웹 브라우저를 사용하여 클라이언트 측에서 OpenOffice 파일, .odt 및 .odp 를 표시하고 싶습니다 .
이러한 파일은 압축 파일입니다. Ajax를 사용하면 서버에서 이러한 파일을 가져올 수 있지만 압축 된 파일입니다. JavaScript를 사용하여 압축을 풀어야 하는데 inflate.js, http://www.onicos.com/staff/iz/amuse/javascript/expert/inflate.txt를 사용해 보았지만 성공하지 못했습니다.
어떻게 할 수 있습니까?
답변:
나는 자바 스크립트로 압축을 풀었다. 효과가있다.
그것은에 의존 앤디 GP 나 바이너리 파일 리더 및 notmasteryet 일부 RFC1951 부풀려의 논리 . ZipFile 클래스를 추가했습니다.
작업 예 :
http://cheeso.members.winisp.net/Unzip-Example.htm (데드 링크)
출처 :
http://cheeso.members.winisp.net/srcview.aspx?dir=js-unzip (데드 링크)
주의 : 링크가 끊어졌습니다. 곧 새 호스트를 찾겠습니다.
소스에는 ZipFile.htm 데모 페이지와 3 개의 개별 스크립트 (zipfile 클래스 용, 인플레이 트 클래스 용, 바이너리 파일 판독기 클래스 용)가 포함되어 있습니다. 데모는 또한 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은 클릭으로 트리거되고 zip 파일을 읽는 ZipFile 객체를 인스턴스화합니다. 읽기가 완료되면 비동기 콜백이 있습니다 (일반적으로 적당한 크기의 zip의 경우 1 초 이내에 발생 함).이 데모에서 콜백은 doneReading 로컬 변수에 보관 extractEntries됩니다. 압축 파일. 실제 앱에서는 추출 할 항목 중 일부를 선택할 수 있습니다 (사용자가 프로그래밍 방식으로 하나 이상의 항목을 선택하거나 선택할 수 있도록 허용).
extractEntriesFN 모든 항목을 반복하고 전화 extract()콜백을 통과하는 각 하나. 항목의 압축 해제는 zip 파일의 각 항목에 대해 1 초 이상 시간이 걸리므로 비동기가 적절하다는 것을 의미합니다. 추출 콜백은 추출 된 콘텐츠를 페이지의 jQuery 아코디언에 추가합니다. 콘텐츠가 바이너리 인 경우 형식이 지정됩니다 (표시되지 않음).
작동하지만 유틸리티가 다소 제한적이라고 생각합니다.
한 가지는 매우 느립니다. PKWare에서 140k AppNote.txt 파일의 압축을 푸는 데 ~ 4 초가 걸립니다. .NET 프로그램에서 .5 초 미만으로 동일한 압축 해제를 수행 할 수 있습니다. 편집 : Javascript ZipFile은 IE9 및 Chrome에서 지금보다 훨씬 빠르게 압축을 풉니 다. 컴파일 된 프로그램보다 여전히 느리지 만 일반적인 브라우저 사용에는 충분히 빠릅니다.
또 다른 경우 : 스트리밍을하지 않습니다. 기본적으로 zip 파일의 전체 내용을 메모리에 넣습니다. "실제"프로그래밍 환경에서는 zip 파일의 메타 데이터 (예 : 항목 당 64 바이트) 만 읽은 다음 원하는대로 다른 데이터를 읽고 압축을 풀 수 있습니다. 내가 아는 한 자바 스크립트에서 이와 같은 IO를 수행하는 방법은 없으므로 유일한 옵션은 전체 zip을 메모리로 읽고 임의 액세스를 수행하는 것입니다. 즉, 대용량 zip 파일에 대해 시스템 메모리에 부당한 요구가 발생합니다. 더 작은 zip 파일의 경우별로 문제가되지 않습니다.
또한 : 우편 번호 암호화, 윈집 암호화, ZIP64처럼 - - 우편 옵션이 많이 나는 unzipper에서 구현하는 귀찮게하지 않았다 있습니다 그것은 "일반적인 경우"zip 파일을 처리하지 않습니다 UTF-8로 인코딩 된 파일 이름을, 그래서 의 위에. ( 편집 -이제 UTF-8로 인코딩 된 파일 이름을 처리합니다). 그러나 ZipFile 클래스는 기본 사항을 처리합니다. 이러한 것 중 일부는 구현하기 어렵지 않습니다. 내가 가진 AES 암호 클래스 자바 스크립트를; 암호화를 지원하기 위해 통합 될 수 있습니다. Zip64를 지원하는 것은 대부분의 Javascript 사용자에게 쓸모가 없을 것입니다. 이는 4GB 이상의 zip 파일을 지원하기위한 것이므로 브라우저에서 압축을 풀 필요가 없습니다.
바이너리 콘텐츠의 압축을 푸는 사례도 테스트하지 않았습니다. 지금은 텍스트의 압축을 풉니 다. 압축 된 바이너리 파일이있는 경우 제대로 처리하려면 ZipFile 클래스를 편집해야합니다. 나는 그것을 깨끗하게하는 방법을 알아 내지 못했다. 이제 바이너리 파일도 수행합니다.
편집 -JS unzip 라이브러리 및 데모를 업데이트했습니다. 이제 텍스트 외에도 이진 파일을 수행합니다. 더 탄력적이고 일반적으로 만들었습니다. 이제 텍스트 파일을 읽을 때 사용할 인코딩을 지정할 수 있습니다. 또한 데모가 확장되었습니다. 특히 브라우저에서 XLSX 파일의 압축을 푸는 것을 보여줍니다.
따라서 유용성과 관심이 제한적이라고 생각하지만 작동합니다. Node.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
내가 알아 차린 한 가지는 파일이 바이너리 스트림 형식 (FileReader ()의 .readAsArrayBuffer를 사용하여 읽음)이어야한다는 것입니다. 그렇지 않으면 손상된 zip 파일이있을 수 있다는 오류가 발생했습니다.
편집 : 2.x에서 3.0.0으로 업그레이드 가이드의 참고 사항 :
load () 메서드와 데이터가있는 생성자 (new JSZip (data))는 loadAsync ()로 대체되었습니다.
감사합니다 user2677034
다른 형식도 지원해야하거나 좋은 성능이 필요한 경우이 WebAssembly 라이브러리를 사용할 수 있습니다.
약속 기반이며 스레딩을 위해 WebWorkers를 사용하고 API는 실제로 간단한 ES 모듈입니다.
압축 해제, 압축 해제 및 압축 해제 기능이 포함 된 오픈 소스 프로젝트 인 "자바 스크립트 용 바이너리 도구"를 작성했습니다. 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/ 클래스 메소드를 사용하여 zip에서 직접 javascript / css / images와 같은 기본 자산을로드 할 수 있습니다. 도움이되기를 바랍니다.
누군가가 원격 서버에서 호스팅되는 zip 파일에서 이미지 또는 기타 바이너리 파일을 읽는 경우 다음 스 니펫을 사용하여 jszip 라이브러리를 사용하여 zip 객체를 다운로드하고 만들 수 있습니다.
// 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)