// 使用了 Element Popover 弹出框
<el-popover
placement="bottom"
width="180"
trigger="manual"
v-model="visible"
>
<div class="content">
<span @click="downExcelTemplatefn">下载模板</span>
<span @click="dialogVisible3 = true">导入案件</span>
<span @click="dialogVisible1 = !dialogVisible1">系统添加</span>
</div>
<el-button slot="reference" @click="visible = !visible" type="primary"
>添加案件</el-button
>
</el-popover>
<el-dialog title="导入案件" :visible.sync="dialogVisible3" width="40%">
<div class="upcontent">
<el-upload
class="upload-demo"
accept=".xls,.xlsx"
action="dev/controller/checkTaskDispose/importCheckResultExcel"
:before-remove="beforeRemove"
:show-file-list="true"
:on-change="handleChange"
:http-request="modeUpload"
ref="upload"
:on-exceed="outexceed"
multiple
:limit="1"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<div class="text">支持.xlsx、.xls格式,1000kb以内</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible2 = false">取 消</el-button>
<el-button type="primary" @click="updatefile">确 定</el-button>
</span>
</el-dialog>
//下载案件模板(通过接口获取到的是文件流的形式,然后前端再利用Bolb来读取文件流)
downExcelTemplatefn() {
downExcelTemplate()
.then((res) => { // 接口
console.log(res);
if (!res.data) {
return;
}
var name = "导入案件模板.xlsx";
let blob = new Blob([res.data], {
type: "application/vnd.ms-excel;charset=utf-8",
});
var url = window.URL.createObjectURL(blob);
var aLink = document.createElement("a"); //创建a标签
aLink.style.display = "none";
aLink.href = url;
aLink.setAttribute("download", name); // 设置文件 name
document.body.appendChild(aLink);
aLink.click(); //自执行下载
document.body.removeChild(aLink); //下载完成移除元素
window.URL.revokeObjectURL(url); //释放掉blob对象
})
.catch((error) => {});
},
更多 blob 对象的用法 如(有大文件分片上传等)