点击“下载”按钮下载文件,后端给前端返回的是token和url。

            

1.创建“下载”按钮,添加触发事件

 2.download方法,将后端需要传的参数id,uuid传过去,将后端返回的token和url连接,用浏览器自带window.open打开地址下载。

3.调用后台的接口

4.最后就可以成功下载文件啦!

第二种情况====================

**但如果遇到后台返回的这种

我们就需要将后台需要的参数传过去,然后调用接口转为UTF-8,使用decodeURI对Content-Disposition属性值进行解码,拿到filename,拿到文件流和文件名后 接收文件流并创建地址objectUrl,接着利用a标签进行下载即可。

vue3事例代码:

const handleDownLoad = async (ye: any, row: { officeId: any }) => {
  const res = await download({ officeId: row.officeId })
  //从响应头获取文件名
  const fileName = decodeURL(
    res.headers["content-disposition"].split("=")[1]
  );
  let iconv = require("iconv-lite")
  iconv.skipDecodeWarning = true //忽略警告
  let name = iconv.decode(fileName, "utf-8")
  let objectUrl = URL.creatObjectURL(new Blob([res.data]))
  //文件地址
  const link = document.createElement("a")
  link.download = name
  link.href=objectUrl
  link.click()
}

JS文件(接口)切记要加responseType:"blob"

最后也可成功下载文件。

GitHub 加速计划 / eleme / element
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐