Requirements describe

Read zip files to generate directory trees, and provide zip downloads, unzip after the download of individual files, copy, and display.

Introducing dependent dependencies

// css // element <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> // codemirror < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/codemirror.css" > < link Rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/theme/idea.css" > / / element < script src="https://unpkg.com/element-ui/lib/index.js"></script> // codemirror <script SRC = "https://cdn.bootcdn.net/ajax/libs/codemirror/2.36.0/clike.js" > < / script > < script SRC = "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/codemirror.js" > < / script > / / jszip < script SRC = "https://cdn.bootcdn.net/ajax/libs/jszip/3.5.0/jszip.js" > < / script > / / FileSaver < script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2014-11-29/FileSaver.js"></script>Copy the code

Zip decompression

Copy the code
Async createTreeData() {let newZip = new JSZip(); Const {files} = await newzip.loadAsync (this.zipdata).catch(() => {throw Error(' Could not  load the ZIP project.`) }) this.newZipFiles = files this.findRoot({ files }) }, FindRoot (zip) {let that = this this.filesTree = [] const dirKeys = Object.keys(zip.files) const root = Array.from(new Set(dirKeys.map(v => v.split('/')[0])))[0] this.filesTree.push({ isFolder: true, path: root, label: root, children: [] }) const zipFileKeys = dirKeys.sort((a, b) => a.split('/').length - b.split('/').length) zipFileKeys.map((key, index) => { const dirKeys = key.split('/') let prevPath = dirKeys[0] + '/' + dirKeys[1] const isExistDir = that.filesTree[0].children.filter(v => v.label === dirKeys[1]) const children = { isFolder: dirKeys.length > 2, path: prevPath, label: dirKeys[1] } dirKeys.length > 2 && (children.children = [{label: null}]) if (isExistDir.length === 0) { that.filesTree[0].children.push(children) } else { That.filestree [0].children.concat(children)}}) // Filter out files that can be displayed in the secondary directory const defaultData = this.filesTree[0].children.filter(v => ! v.isFolder)[0] if (defaultData) { this.currentFile = this.filesTree[0] this.defaultExpandedKeys = [this.filestree [0].label, defaultData.label]Copy the code

Get the contents of the decompressed zip package and present it to codeMirror for display

GetFilesDetails (data) {this.currentFile = data let that = this if (! Data.isfolder) {// Where path is the absolute path of the current zip file this.newZipFiles[data.path].async('string').then(content => {that.fileDetails = content if (thate.editor) {that.editor.setValue(content)} else {// Declare the codemirror instance and set the file contents to codemirror thate.editor = CodeMirror.fromTextArea(this.$refs.textarea, { mode: 'text/x-java', lineNumbers: true, lint: true, lineWrapping: True, tabSize: 2, cursorHeight: 0.9, // Theme: 'idea', readOnly: true }) this.editor.setSize('auto', '650px') that.editor.setValue(content) } }) } },Copy the code

Downloading a single file

// newZipFiles are files generated after the zip file is decompressed. This.currentfile. path is the absolute file path of the currently selected directory node this.newZipFiles[this.currentFile.path].async("blob").then(Content => {// Content is file BLOB file stream; This.currentfile.label is the name of the decompressed zip file with the format suffix saveAs(content, this.currentFile.label); })Copy the code

Copy the file

// Copy file copyFileContent() {if (this.currentFile.path) { this.newZipFiles[this.currentFile.path].async('string').then(content => { this.copy(content) }) } else { This.errornotify (' hint ',' please select the file you want to copy ')}}, copy (data) { let str = '' let save = function (e) { e.clipboardData.setData('text/plain', Data) STR = e.c. with our fabrication: lipboardData. GetData () 'Text' e.p reventDefault () / / stop} the document. The default behavior addEventListener (' copy ', ExecCommand ('copy') // Make the document editable, Otherwise invalid document. The removeEventListener (' copy 'save) / / remove replication time to avoid impact the normal copy this. $message. Success (copying "success") return the STR},Copy the code