前端js下載下傳檔案壓縮包

工作當中時常會遇到對檔案的一些處理，比如下載下傳表格、下載下傳圖檔、下載下傳檔案等，這裡說一種下載下傳壓縮包的方法。

其實也很簡單，需要用到一款插件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"
            :http-request="resetFile"
        >
            <el-button type="primary">base64ToBlob=>downloadZip</el-button>
        </el-upload>

    
    methods: {
        resetFile(options) {
            let _self = this;
            let file = options.file;
            console.log(file);
            // 模拟傳回值
            let fileReader = new FileReader();
            fileReader.onload = function() {
                // let blob = dataURLtoBlob(this.result);
                let useBase64 = this.result.split('base64,')[1];
                _self.saveAsZip(useBase64);
            };
            fileReader.readAsDataURL(file);
        },
        saveAsZip(base64) {
            let zip = new jsZip();
            // zip.file('hello.txt', 'hello'); // 添加一個檔案
            var myFile = zip.folder(); // 建立一個myFile檔案夾
            myFile.file('辦理畢業生戶籍遷入操作指引.doc', base64, {
                base64: true
            }); // 檔案名稱

            zip.generateAsync({ type: 'blob' }).then(function(content) {
                // see FileSaver.js
                saveAs(content, '辦理畢業生戶籍遷入操作指引.zip');
            });
        }
    }
           

下載下傳的壓縮包：

解壓後：

如果不想要檔案夾名稱可以把檔案名去掉：

var myFile = zip.folder();
           

解壓後：