Javascript——vue下载blob文档流

<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>
//根据接口下载文件由后端定义格式
//getDataDownload 接口
downloadCick(row) {
      getDataDownload({ id: row.id }).then((res) => {
        const blob = res; //获取Blob对象
        const elink = document.createElement('a'); // 创建一个超链接对象实例
        elink.href = URL.createObjectURL(blob); //设置a标签的href属性为一个包含Blob对象的URL
        document.body.appendChild(elink);
        elink.click(); // 触发超链接的点击事件
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 移除超链接对象实例
      });
    },

实现效果
Javascript——vue下载blob文档流_第1张图片

你可能感兴趣的:(vue.js,javascript,前端)