js 下载文件流
作者:互联网
<template> <div class="expand-notes" id="attachment"> <div> <h4 class="h-list step7">attachment Download | 附件下载 </h4> </div> <!--附件下载--> <div class="language"> <el-table :data="filelist" border style="width: 100%"> <el-table-column prop="fileName" align='center' label="文件名称"> </el-table-column> <el-table-column fixed="right" label="操作" align='center'> <template slot-scope="scope" > <el-button size="small" type="primary" plain @click="downloadfiles(scope.row)" :loading="scope.row.isloading">{{scope.row.isloading ? "下载中..." : "下载" }}</el-button> </template> </el-table-column> </el-table> </div> </div> </template> <script> import { downloadfilelist} from '@/api'; export default { name: 'attachment', props:{ filelist:{ type:Array, default:()=>{ return [] } } }, data () { return {} }, methods: { downloadfiles(rows){ rows.isloading = true; downloadfilelist(rows.id).then(res => { const content = res.data; const blob = new Blob([content]) const filename = rows.fileName; if('download' in document.createElement('a')) { const elink = document.createElement('a') elink.download = filename elink.style.display = "none" elink.href = URL.createObjectURL(blob) document.body.appendChild(elink) elink.click(); URL.revokeObjectURL(elink.href) document.body.removeChild(elink) } else { navigator.msSaveBlob(blob, filename) } }).catch(err=>{ this.$message.error(err ||'下载失败,请稍后再试!'); }) .finally(()=>{ rows.isloading = false; }) } } } </script>
标签:文件,rows,const,filename,js,blob,elink,document,下载 来源: https://www.cnblogs.com/qq735675958/p/12955710.html