本文介绍: msSaveBlob : IE不支持a标签下载,用的是msSaveBlob方案createObjectURL :把blob对象内存地址,以url形式给出。a标签download属性表面a标签行为是下载,并说明文件名。//使用第三方filesaver前端下载后端传回的文件三种方式

前端下载后端传回的文件三种方式

  1. 直接打开下载地址:这种无法命名,只适用于get直接返回blob接口
  2. 利用a标签download:这种是比较适合的方案
  3. filesaver:这是现成的库,简单方便

几个重要概念

createObjectURL :把blob对象内存地址,以url形式给出

msSaveBlob : IE不支持a标签下载,用的是msSaveBlob方案

a标签download属性表面a标签行为是下载,并说明文件名

在这里插入图片描述

//按blob请求接口   
// 这边响应必须设置blob类型
axios.get('http://localhost:8000/download',{responseType:'blob'}).then((res) => {
    console.log(res.data)
    if(window.navigator.msSaveBlob){
        //说明是IE浏览器需要兼容
        window.navigator.msSaveBlob(res.data,{type:'application/xxxxxx'},"test.ppt")
    } else {
        //说明是现代主流浏览器 
        //传入文件数据,生成一个 下载链接
        let blobURL = URL.createObjectURL(res.data)
        //创建标签
        let link = document.createElement('a')
        //设置href
        link.href = blobURL 
        //设置a标签的行为download,不然就跳转了,同时设置名字是"test.ppt"
        link.download = "test.ppt"
        //隐藏a标签,他只是下载,没必要出现
        link.style.display = "none"
        //模拟点击
        link.click()
        //最后,把这个URL进行销毁,免得他占内存
        URL.revokeObjectURL()
             
    }
})

//使用第三方file-saver

//引入第三方
import {saveAs} from "file-saver"

axios.get('http://xxxxxxxxxxx',{responseType:'blob'}).then((res) => {
    saveAs(res.data,"fileSaveDownload.ppt")
})
	

原文地址:https://blog.csdn.net/qq_45732872/article/details/134735727

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_46232.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注