<el-table-column label="操作" fixed="right" width="150" showOverflowTooltip>
<template slot-scope="scope">
<el-button type="text" v-has="'stbsd-gjcx-down'" class="edit-button" @click="downloadCick(scope.row)">下載</el-button>
</template>
</el-table-column>
//根據(jù)接口下載文件由后端定義格式
//getDataDownload 接口
downloadCick(row) {
getDataDownload({ id: row.id }).then((res) => {
const blob = res; //獲取Blob對(duì)象
const elink = document.createElement('a'); // 創(chuàng)建一個(gè)超鏈接對(duì)象實(shí)例
elink.href = URL.createObjectURL(blob); //設(shè)置a標(biāo)簽的href屬性為一個(gè)包含Blob對(duì)象的URL
document.body.appendChild(elink);
elink.click(); // 觸發(fā)超鏈接的點(diǎn)擊事件
URL.revokeObjectURL(elink.href); // 釋放URL 對(duì)象
document.body.removeChild(elink); // 移除超鏈接對(duì)象實(shí)例
});
},
實(shí)現(xiàn)效果
文章來源地址http://www.zghlxwxcb.cn/news/detail-782442.html
文章來源：http://www.zghlxwxcb.cn/news/detail-782442.html
到了這里，關(guān)于Javascript——vue下載blob文檔流的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
