目的：

本页面已经有文件、图片、表格、文本，用js生成一个压缩包并弹出下载框。

具体工作逻辑是用户选择一个音频文件上传，后端对音频做识别后画出声谱图，并给出识别结果。点击保存按钮，将原始音频、声谱图、模型原始输出打包下载。

步骤一：获取image

image的显示用的是<img src=base64/>类型，所以很方便获取base64字串。

this.time_frequency_pic_dataurl = 'data:image/jpg;base64,' + data.data.time_frequency_pic_base64
        this.time_frequency_pic_base64 = data.data.time_frequency_pic_base64

但要注意的是只保存base64就可以，前面的data:image/jpg;base64,在img src属性需要，在保存图片时不需要。

步骤二：获取表格

表格数据下载打算采用csv格式，比较简单不容易出错。

vue中的数据示例：

[
    {
        'label': 'label1',
        'probability': 0.1
    },
    {
        'label': 'label1',
        'probability': 0.1
    },
    ...
]

遍历数据，生成csv

generate_csv(){
      var csv = '标签,概率\n'
      this.softmax_output.forEach( (currentValue, index, arr)=> {
        csv = csv + currentValue.label + ',' + currentValue.probability + '\n'
      })
      csv = csv + '\n最终判定结果,' + this.final_result + '\n'
      var blob = new Blob(['\ufeff' + csv], {type: 'text/csv,charset=UTF-8'})
      return blob 
    }

步骤三：获取上传的文件

上传文件使用ElementUI的el-upload，在上传前用本地变量保存文件

uploadSectionFile(param){
    //...
    this.fileObj = param.file
    //...

uploadSectionFile是el-upload中绑定在http-request的自定义上传事件，从参数中获取文件对象后保存。

步骤四：打包并下载

import JSZip from 'jszip';
download_zip(){
    var zip = new JSZip();

    var result = zip.folder("识别结果")
    result.file("结论.csv", this.generate_csv());

    result.file("原始音频.wav", this.fileObj)
    result.file("声谱图.png", this.time_frequency_pic_base64, {base64: true});

    zip.generateAsync({type:"blob"}).then(function(content) {
        // see FileSaver.js
        saveAs(content, "识别结果.zip");
    });
},

需要两个npm 包，

"file-saver": "^2.0.2",
"jszip": "^3.2.1",

参考: 1. cnblog 下载文件 2. github 下载zip 3. 脚本之家下载zip 4. github js操作zip