JS实现页面查看zip文件中的内容

Arno 发布于2019-08-23 17:08 / 3370人阅读

摘要：前言业务场景附件上传到服务器后，在页面中可直接查看中的文件内容，如。实现原理引入工具库查看中内容查看在中引入，其中在使用中的指向进行了重定向。是要查看的文件名后缀。这里使用了定义的来展示。若不足之处，欢迎大家指出，共勉。

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 后记

感谢支持。若不足之处，欢迎大家指出，共勉。

如果觉得不错，记得点赞，谢谢大家

云服务器 GPU云服务器 js 生成zip文件 js 导出页面内容 js页面获取map中的数据 js实现页面表格

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103853.html

Express 实战（五）：路由

摘要：的官方描述是是一个独立于中间件和路由的实例，你可以将看作是只能执行执行中间件和路由的小心应用。最大的不同在于只能已模块形式存在并不能独立运行。另外，加密的公钥也被称为证书。客户端在拿到公钥证书后会向这样的证书颁发机构进行验证。 showImg(https://segmentfault.com/img/remote/1460000010820582); 作为 Express 中的最大特点...

DevWiki 2019-08-20 18:54 评论0 收藏0
说一说前端文件压缩

摘要：因为异步压缩的时候我们上传的文件的数量不定，所以上面需要使用关键字来修饰压缩过程。而下面的压缩过程的实现，最终返回一个对象，当压缩过程已完成后，完整的生成的文件存于其中。基于JSZip的前端文件压缩 1. 简介：这段时间，项目需要做一个这样的功能：客户端在上传文件的时候（具体文件类型），需要对文件进行压缩再上传以节省带宽和服务器端资源，完成这个功能，我们选择了GitHub上的JSZ...

Ververica 2019-08-20 19:03 评论0 收藏0
关于前端实现文件下载功能

摘要：问题以上两种方式，当在下载格式，或者视频文件时，浏览器会直接播放该文件，而达不到直接下载的功能，此时，当下载音视频文件时无法使用以上两种方式。 1、通过window.open()打开新页面下载文件 window.open(`url`, _self) 使用场景：下载excel文件，后端提供接口，接口返回的是文件流，可以直接使用window.open()，最简单的方式。优点：最简洁；弊...

Arno 2019-08-23 17:54 评论0 收藏0
【云分发 UCDN】使用指南：实时监控，统计分析，内容管理和域名管理

摘要：实时监控实时监控包括四部分带宽监控请求数监控命中率监控和状态码监控。并统计该时间段内选中域名的请求数峰值请求数谷值以及总请求数。状态码监控该页面下，将展示筛选条件下的状态码折线图。实时监控实时监控包括四部分：带宽监控、请求数监控、命中率监控和HTTP状态码监控。点击进入实时监控页面。选择需要查看监控的域名列表，可单选、多选、全选。系统默认展示最近一天的监控情况，也可根据需求选择时长。筛选条件...

Tecode 2022-06-28 19:00 评论0 收藏0