Node配合Vue实现压缩文件并在浏览器中下载(升级版)

本文介绍了如何使用Node.js配合Vue.js实现升级版文件压缩功能,用户可以选择单个文件,Node接收请求后在指定目录下查找并压缩,最后通过浏览器下载。涉及到jszip库的使用以及Node端的路由和控制器逻辑处理。
摘要由CSDN通过智能技术生成

Node配合Vue实现压缩文件并在浏览器中下载(升级版)

之前我写了“Node实现压缩文件并下载”,那个是最基础的版本,这次升级版需求变了,需要选择一个文件然后传给Node,Node接收到在指定目录下找到需要下载的单个目录,而不是整个了,并且这次是多层目录。

注意:需要安装jszip包,npm install jszip

Vue端

<template>
  <div>
    <!--  省略列表选择代码  -->
    <button @click="downloadZip">Download Zip</button>
  </div>
</template>

<script>
import { downloadFile } from '@/services/api'
export default {
  data() {
    // ...省略
  },
  methods: {
    downloadZip() {
      // 从 Node请求压缩文件,downloadFile是封装的接口,结合自己项目进行调整
      // this.currentSelectLoadout.FileName是我们最后选择的文件名
      downloadFile(this.currentSelectLoadout.FileName).then(res => {
        window.location.href = `http://localhost:7001/download-zip?fileName=${this.currentSelectLoadout.FileName}`
      })
    }
  }
}
</script>

Node端

路由界面

'use strict'

/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
    const {router, controller} = app
    
    router.get('/download-zip', controller.home.downloadZip)
}

controller层方法

async downloadZip() {
    const { ctx } = this
    // 先获取我们选择的文件名,也就是获取Vue端传来的this.currentSelectLoadout.FileName
    const { fileName } = ctx.queryParams
    const zip = new jszip()
    // 获取指定目录数据
    const folderPath = path.resolve(__dirname, `D:\\WorkSpace\\WarSim\\WarSim\\Analysis\\${fileName}\\`)
    // 检查目录是否存在
    if (fs.existsSync(folderPath)) {
      // 如果存在目录则去递归压缩目录里的所有数据  
      this.addDirToZip(zip, folderPath)
    } else {
      console.log('下载目录不存在')
    }
    // 压缩整个文件
    const zipContent = await zip.generateAsync({ type: 'nodebuffer' })
    // 返回
    const encodedFileName = encodeURIComponent(`${fileName}.zip`)
    ctx.set('Content-Type', 'application/octet-stream')
    ctx.set('Content-Disposition', `attachment; filename*=UTF-8''${encodedFileName}`)
    ctx.body = zipContent // 发送压缩包内容
}

addDirToZip(zip, folderPath) {
    // 先读首层目录有多少个,然后遍历循环读目录的子集
    const files = fs.readdirSync(folderPath)
    files.forEach(file => {
        const fullPath = path.join(folderPath, file)
        const stat = fs.statSync(fullPath)

        if (stat.isDirectory()) {
            // 如果是文件夹,则递归处理
            const folderZip = zip.folder(file)
            this.addDirToZip(folderZip, fullPath)
        } else {
            // 如果是文件,则直接添加
            const content = fs.readFileSync(fullPath)
            zip.file(file, content)
        }
    })
}
  • 6
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值