vue+blob文件流下载导出world、excel、pdf文件

最新推荐文章于 2024-07-19 15:47:55 发布

sxs7970

最新推荐文章于 2024-07-19 15:47:55 发布

阅读量1.4k

点赞数 1

分类专栏：项目前端 Vue.js 文章标签： vue+blob文件流下载

本文链接：https://blog.csdn.net/sxs7970/article/details/119677711

版权

前端同时被 3 个专栏收录

132 篇文章 2 订阅

订阅专栏

Vue.js

37 篇文章 0 订阅

订阅专栏

项目

1 篇文章 0 订阅

订阅专栏

function exportMethod(data) {
  axios({
    method: 'get',
    url: 'https:xxx/xxx' + data.url,//接口地址
    params: data.data,//如果是post参数放到请求体data中
    responseType: 'blob',
    headers: {
      'Content-Type': 'application/json'
    }
  }).then((res) => {
    let type = "", type2 = []
    if (data.type == "doc") {
      type = 'application/msword'
      type2 = ['.doc', '.docx']
    } else if (data.type == "pdf") {
      type = 'application/pdf'
      type2 = ['.pdf']
    } else {
      type = 'application/vnd.ms-excel'
      type2 = ['.xls', '.xlsx']
    }
    const link = document.createElement('a')
    let blob = new Blob([res.data], { type })
    link.style.display = 'none'
    link.href = URL.createObjectURL(blob)
    link.download = data.fileName //自定义文件名
    link.type = type2
    document.body.appendChild(link)//下载创建a
    link.click()
    document.body.removeChild(link)//下载完删除a
  }).catch(error => {
    console.log(error)
  })
}

使用

   onClick_seeContract() {
   //点击下载事件
      let data = {
        url: "接口地址",
        data: { 参数},
        type: "doc",//文件类型
        fileName: "嘻嘻",//文件名
      };
      exportMethod(data);
    },