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)于JS處理壓縮文件的,功能很多,目前只學(xué)到了一小點,更多功能還需再研究。
3.1 參考資料
本文章采用 知識共享署名-非商業(yè)性使用-相同方式共享 4.0 國際許可協(xié)議 進行許可。