JS实现页面查看zip文件中的内容
栏目: JavaScript · 发布时间: 6年前
内容简介：附件zip上传到服务器后，在页面中可直接查看zip中的文件内容，如：readme.txt。jszip、jszip-utils
1 前言
1.1 业务场景
附件zip上传到服务器后，在页面中可直接查看zip中的文件内容，如：readme.txt。
2 实现原理
2.1 引入 工具 库
jszip、jszip-utils
npm i jszip -S
npm i jszip-utils -S
2.2 查看txt中内容
// 查看
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中内容。
readme.txt
是要查看的文件名+后缀。
这里使用了 input
定义的 v-model="content"
来展示。
3 后记
感谢支持。若不足之处，欢迎大家指出，共勉。
如果觉得不错，记得 点赞 ，谢谢大家:joy:
欢迎关注 我的： 【Github】 【掘金】 【简书】 【CSDN】 【OSCHINA】 【Segmentfault】
这两个库都是关于JS处理压缩文件的，功能很多，目前只学到了一小点，更多功能还需再研究。
3.1 参考资料
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
以匠心，致设计：网易 UEDC 用户体验设计
网易用户体验设计中心 / 电子工业出版社 / 2018-8 / 95.00元
为什么网易云音乐的体验流畅细腻、富有温度？为什么网易严选App的UI设计让人感到温馨、舒适？为什么网易蜗牛读书App的界面设计让用户爱不释手…… 《以匠心，致设计：网易 UEDC 用户体验设计》是网易用户体验设计团队对自身过去的设计思考的精心总结，最大程度还原了网易产品背后的设计故事，内容涵盖设计基础、设计实践、方法思考、成长指南四章，借助网易产品设计的实际案例具体讲述了设计师日常工作中不可......一起来看看 《以匠心，致设计：网易 UEDC 用户体验设计》 这本书的介绍吧!
