JS實現(xiàn)頁面查看zip文件中的內(nèi)容

1 前言

1.1 業(yè)務(wù)場景

附件zip上傳到服務(wù)器后,在頁面中可直接查看zip中的文件內(nèi)容,如:readme.txt。

2 實現(xiàn)原理

2.1 引入工具庫

jszip、jszip-utils

npm i jszip -S

npm i jszip-utils -S

2.2 查看txt中內(nèi)容

// 查看
view(row){
    var JSZip = require("jszip")
    var JSZipUtils = require("jszip-utils")
    let that = this

    JSZipUtils.getBinaryContent(row.downloadPath, function(err, data) {
        if(err) {
            throw err; 
        }
        JSZip.loadAsync(data).then(function (files) {
            files.files['readme.txt'].async("string").then(function(con){
            that.content = con
            that.dialog = true
            })
        })
    })
},

在vue中引入,其中在JSZipUtils使用中this的指向進行了重定向。

row.downloadPath是附件的下載地址,con是txt中內(nèi)容。

readme.txt是要查看的文件名+后綴。

這里使用了input定義的v-model="content"來展示。

3 后記

感謝支持。若不足之處,歡迎大家指出,共勉。

如果覺得不錯,記得 點贊 ,謝謝大家 ??

歡迎關(guān)注 我的: 【Github】【掘金】【簡書】【CSDN】【OSCHINA】【SF】

這兩個庫都是關(guān)于JS處理壓縮文件的,功能很多,目前只學(xué)到了一小點,更多功能還需再研究。

3.1 參考資料

本文章采用 知識共享署名-非商業(yè)性使用-相同方式共享 4.0 國際許可協(xié)議 進行許可。

出處為:https://github.com/xrkffgg/Tools

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。