本文由腾讯云+社区自动同步,原文地址 https://stackoverflow.club/article/using_js_download_html_element/
本页面已经有文件、图片、表格、文本,用js生成一个压缩包并弹出下载框。
具体工作逻辑是用户选择一个音频文件上传,后端对音频做识别后画出声谱图,并给出识别结果。点击保存按钮,将原始音频、声谱图、模型原始输出打包下载。
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",
参考: