JS實現頁面查看zip文件中的內容

Arno 發布于2019-08-23 17:08 / 3171人閱讀

摘要：前言業務場景附件上傳到服務器后，在頁面中可直接查看中的文件內容，如。實現原理引入工具庫查看中內容查看在中引入，其中在使用中的指向進行了重定向。是要查看的文件名后綴。這里使用了定義的來展示。若不足之處，歡迎大家指出，共勉。

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實現頁面表格

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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