前端js下载文件压缩包

donggua_123

于 2019-09-20 10:23:32 发布

阅读量1.4w

点赞数

分类专栏：前端 vue js 文章标签： js 前端文件下载 jszip

本文链接：https://blog.youkuaiyun.com/dongguan_123/article/details/101051736

版权

这篇博客介绍了如何在前端使用JSZip插件来创建并下载文件压缩包。通过引入JSZip和file-saver，可以方便地处理文件下载，特别是压缩包的下载。文章提到了在Vue项目中的安装步骤，并展示了使用Element-UI上传组件创建压缩包的示例代码。下载后的压缩包在解压后显示了文件结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

工作当中时常会遇到对文件的一些处理，比如下载表格、下载图片、下载文件等，这里说一种下载压缩包的方法。

其实也很简单，需要用到一款插件jszip，官方用法都是有的：https://www.npmjs.com/package/jszip

可以直接引入脚本：

<script src='./jszip.js'></script>

也可以在vue项目中直接安装，运行：

npm i jszip -S

然后在需要的页面引入即可：

import jsZip from 'jszip';

需要注意的是，jszip依赖于文件下载插件file-saver，所以还需要安装一下：

npm i file-saver -S

引入：

import { saveAs } from 'file-saver';

使用：用的element-ui的上传文件组件

        <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"