vue 在线解压压缩包并在线编辑代码保存

web代码编辑

效果如下：

1、解压

在线解压需要用到 jszip，支持将String / Array of bytes / ArrayBuffer / Uint8Array / Buffer / Blob / Promise文件格式的压缩包解压。
由于接口返回的是文件流，所以使用jszip-utils包将文件流转为ArrayBuffer格式。

npm install jszip -S
npm install jszip-utils -S

import JSZipUtils from "jszip-utils";
import JSZip from "jszip";export default {data(){return {zip: null,}},methods:{loadZip() {JSZipUtils.getBinaryContent("压缩文件地址", function (err, data) {if(err) {throw err; // or handle the error}this.zip = new JSZip();//解压this.zip.loadAsync(data).then((res) => {       console.log(res);});});},}
}

打印出来是这样的：

2、生成目录

目录用的是element-ui的树形控件，加载方式懒加载，这样就不用递归生成所有目录。

<el-treeref="tree"lazyhighlight-current:data="fileMenu":props="defaultProps":load="loadNode"@node-click="handleNodeClick"
><!-- 文件夹图标 --><span class="custom-tree-node" slot-scope="{ node, data }"><em v-if="!data.leaf" class="el-icon-folder-opened"></em><span>{{ node.label }}</span></span>
</el-tree>

data(){return {fileMenu: [],defaultProps: {children: "children",label: "label",isLeaf: "leaf",},}
},
methods:{getMenuList(zip) {const menu = [];// 循环当前文件夹目录zip.forEach((relativePath, file) => {const dir = relativePath.split("/");// 文件if (dir.length === 1) {menu.push({label: dir[0],leaf: true,path: file.name,});}// 文件夹if (dir.length === 2 && file.dir) {menu.push({label: dir[0],leaf: false,path: file.name,});}});return menu;},// 加载子目录loadNode(node, resolve) {if (node.level === 0) return;// 把点击的文件夹路径传入const child = this.getMenuList(this.zip.folder(node.data.path));resolve(child);},
}

3、代码编辑

在线代码编辑需要用到 monaco-editor，建议下载0.30.0版本。如果需要代码高亮、快捷键、语法提示等功能可以安装monaco-editor-webpack-plugin插件帮忙导入。

npm install monaco-editor@0.30.0 -S
npm install monaco-editor-webpack-plugin@6.0.0 -S

<template><div id="monaco"></div>
</template><script>
import * as monaco from "monaco-editor";
export default {data(){return {monacoInstance: null,}},mounted(){this.monacoInstance = monaco.editor.create(document.getElementById("monaco"),{value: `//请选择文件进行编辑`,language: "js",});// 编辑监听this.monacoInstance.onDidChangeModelContent(() => {this.saveValue();});},methods:{// 在树节点加上点击事件handleNodeClick(data) {if (data.leaf) {this.currentPath = data.path;// 将点击的文件内容显示在编译框内this.zip.file(data.path).async("string").then((res) => {this.monacoInstance.setValue(res);});}},// 保存编辑saveValue() {if (this.currentPath) {const newValue = this.monacoInstance.getValue();this.zip.file(this.currentPath, newValue);}},// 打包pack(){this.zip.generateAsync({type:"blob"}).then(function (content) {// 保存或上传操作// saveAs(content, "hello.zip");});}}
}
</script>

vue 在线解压压缩包并在线编辑代码保存相关推荐

如何使用Google Colab 在线解压GoogleDrive里的RAR ZIP等压缩包
如何使用Google Colab 在线解压GoogleDrive里的RAR ZIP等压缩包太久没更新了,今天来写一篇. 前段时间群里有人问如何在线解压 GoogleDrive 里的压缩包,我因为太忙 ...
在线解压-密码压缩包
在线解压-密码压缩包猫密网选择要解压的又密码的压缩包, 填入电话或邮箱就会把解压好的文件发送给你啦!!
关于Centos中在线解压文件名中有中文字符出现乱码的终极解决方法 unar 我的压缩文件.zip
本帖最后由 hsxnet 于 2018-2-4 16:14 编辑关于Centos中在线解压文件名中有中文字符出现乱码的终极解决方法(亲测总结): 记录一下我测试的笨办法,以备自己日后查询: 一.从C ...
在线解压rar_解压指南！新手必看
看后台留言还有小可爱不知道如何解压zip格式,今天出一篇指南 PS:无论你是不是百度网盘会员,都不要在线解压zip 因为这种类型的文包太容易被河蟹了!所以,拜托大家下载解压! 苹果IOS系统 1. ...
【Web技术】959- JavaScript 如何在线解压 ZIP 文件？
相信大家对 ZIP 文件都不会陌生,当你要打开本地的 ZIP 文件时,你就需要先安装支持解压 ZIP 文件的解压软件.但如果预解压的 ZIP 文件在服务器上,我们应该如何处理呢? 最简单的一种方案就是 ...
php tp5在线解压压缩文件
php tp5在线解压压缩文件没啥原理,直接上代码把解压方法 /*** 解压zip文件到指定目录* @param {string} $filepath: 文件路径* @param {string} ...
服务器空间在线解压程序及使用教程
<一>PHP脚本集之压缩解压程序:unzipfiles 1.作者不详,姑且叫它"unzipfiles"吧.这个脚本只有两个文件,zipfile.php和unzipfil ...
最近很火的在线文件预览txt、doc、ppt、pdf、excel、jpg、png、zip、tar.gz等各种文件及压缩文件在线解压和预览，包括前后端设计和源码，编写搜索引擎多关键词检索名称和内容（四）
最近很火的在线文件预览txt.doc.ppt.pdf.excel.jpg.mp4.png.zip.tar.gz等各种文件及压缩文件在线解压和预览,包括前后端设计和源码,编写一个文件搜索引擎实现多关键词 ...
宝塔服务器网页怎么压缩文件,宝塔Linux面板在线解压WAR压缩文件
下面是编程之家 jb51.cc 通过网络收集整理的代码片段.编程之家小编现在分享给大家,也给大家做个参考. 这个版本的迭达更新,本来是没什么好说的,额,什么叫迭代?简单说就是重复反馈活动的过程,这重复 ...