js获取本页面元素并下载
本文由腾讯云+社区自动同步，原文地址 https://stackoverflow.club/article/using_js_download_html_element/
目的：
本页面已经有文件、图片、表格、文本，用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",参考:
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-06-29，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读