vue调用后台接口下载文件功能

最新推荐文章于 2024-08-06 10:24:54 发布

啊花549

最新推荐文章于 2024-08-06 10:24:54 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/buukyjmvni/article/details/119604555

版权

关键词由CSDN通过智能技术生成

一、接口处

export const downResultPdf = (id) => {
  return request({
    url: `/executionResult/downloadPdf/${id}`,
    method: 'get',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',  //请求头 根据实际接口文档内容填写
    },
    responseType: 'blob'  //默认json，设置成blob
  })
}

二、调用

downResultPdfFunc(e) {
      const id = e
      downResultPdf(id).then(res => {
        console.log('pdf',res)
        var name = "result.pdf";
        var blob = new Blob([res]);
        var url = window.URL.createObjectURL(blob);
        var aLink = document.createElement("a");
        aLink.style.display = "none";
        aLink.href = url;
        aLink.setAttribute("download", name);
        document.body.appendChild(aLink);
        aLink.click();
        document.body.removeChild(aLink); // 下载完成移除元素
        window.URL.revokeObjectURL(url); // 释放掉blob对象
      })
    },

OK～