vue 下载文件

news/2025/3/16 5:40:40/

比如excel文件

原理:主要是利用a标签

<a download="fdsfds" href="https://........./a.xls">测试</a>

方法1:

onDown() {
        const dlink = document.createElement("a");
        dlink.style.display = "none";
        dlink.download = this.fileName;   //如果前后端跨域,名字会不生效。
        dlink.href = this.fileUrl;
        document.body.appendChild(dlink);
        dlink.click();
        URL.revokeObjectURL(dlink.href); // 释放URL 对象
        document.body.removeChild(dlink);

}

方法二:

window.open('https://s.........6.xls', '_blank')

方法三:

onDown(){

        const url = this.fileUrl
        this.loading = true     //可以利用loading给提示或者禁止再次点击
        const elt = document.createElement('a')
        const fileName = this.fileName
        elt.setAttribute('href', url)
        elt.setAttribute('id', 'downloadLink')
        elt.setAttribute('download', `fdfsd.xls`)
        elt.style.display = 'none'
        document.body.appendChild(elt)
        elt.click()
        // 删除添加的a链接
        let downloadLink = document.getElementById('downloadLink')
        document.body.removeChild(downloadLink)
        this.loading = false

}

注意:如果是 通过后台获取的流文件blob,需要通过let objectUrl = URL.createObjectURL(blob) // 创建URL

// 利用a标签自定义下载文件名
const link = document.createElement('a')

axios.post(postUrl, params, {responseType: 'arraybuffer'}).then(res => {
    // 创建Blob对象,设置文件类型
    let blob = new Blob([res.data], {type: "application/vnd.ms-excel"})
    let objectUrl = URL.createObjectURL(blob) // 创建URL
    link.href = objectUrl
    link.download = 'xxx' // 自定义文件名
    link.click() // 下载文件
    URL.revokeObjectURL(objectUrl); // 释放内存
})


http://www.ppmy.cn/news/53430.html

相关文章

封装了一个echarts图全屏放大的功能

封装的js文件 import * as echarts from echarts /*** el:目标渲染元素* option&#xff1a;echarts配置项* resize&#xff1a;是否需要全屏功能*/export const initEcharts (el, option, resize false) > {const chartDom el;const myChart echarts.init(chartDom);l…

最近部门新的00后真是卷王,工作没1年,入职18K

都说00后躺平了&#xff0c;但是有一说一&#xff0c;该卷的还是卷。 这不&#xff0c;前段时间我们公司来了个00后&#xff0c;工作都没1年&#xff0c;到我们公司起薪18K&#xff0c;都快接近我了。后来才知道人家是个卷王&#xff0c;从早干到晚就差搬张床到工位睡觉了。 …

【5天打卡】学习Lodash的第二天——常用api学习

文接上篇,【5天打卡】学习Lodash的第一天——初体验 大家好,最近,我在学习Lodash这个工具库。Lodash最初是 Underscore 的分支,后来逐渐壮大后自立门户。Lodash 功能比 Underscore 更丰富,且 Underscore 已有3、4年没有更新,所以推荐使用 Loadash。但是和原生相比还是推…

【数据结构】二叉树的遍历

Yan-英杰的主页 悟已往之不谏 知来者之可追 C程序员&#xff0c;2024届电子信息研究生 目录 前序、中序以及后序遍历 前序遍历 中序遍历 后序遍历 前序、中序以及后序遍历 学习二叉树结构&#xff0c;最简单的方式就是遍历。所谓二叉树遍历 (Traversal) 是按照某种特定…

ThingsBoard教程(三六):规则节点解析 检查关系节点 check relation,实体类型节点 entity type

前言 本篇文章和大家一起来学习两个节点,检查关系节点 check relation和实体类型节点 entity type。 check relation 检查消息的发起者与其他实体之间是否存在关系。如果选择了“check relation to specific entity(检查与特定实体的关系)”,则必须指定相关实体。否则,…

微服务---分布式事务Seata(XA,AT,TCC,SAGA模式基本使用)

分布式事务 1.分布式事务问题 1.1.本地事务 本地事务&#xff0c;也就是传统的单机事务。在传统数据库事务中&#xff0c;必须要满足四个原则&#xff1a; 1.2.分布式事务 分布式事务&#xff0c;就是指不是在单个服务或单个数据库架构下&#xff0c;产生的事务&#xff0c…

SqlSugar操作MySQL数据库

SqlSugar操作MySQL数据库 C#操作DataTable排序 在C#中&#xff0c;我们可以使用DataTable类来表示内存中的数据表格。DataTable类提供了各种方法和属性来操作数据表格&#xff0c;包括排序。 要对DataTable进行排序&#xff0c;可以使用DataView类。DataView类是一个用于筛选…

收废品小程序开发中的常见问题及解决方法

常见问题 1. 用户界面设计 小程序的用户界面设计至关重要。设计师需要在用户界面中提供清晰的指示&#xff0c;以便用户可以轻松地找到他们需要的功能。同时&#xff0c;设计师还需要确保用户界面的整体风格与公司的品牌形象相符。 2. 功能开发 开发小程序的功能需要考虑到…