前端自定义下载文件名

news2024/9/20 18:43:59

在这里插入图片描述

data数据格式如下

"data": [
        {
            "createBy": "system",
            "createTime": "2024-09-11 14:08:56",
            "updateBy": "",
            "updateTime": null,
            "beginTime": null,
            "endTime": null,
            "askParam": {},
            "formSpan": null,
            "id": 26,
            "sysCode": "system",
            "annexType": "1",
            "annexName": "系统操作手册",
            "iconUrl": "http://192.168.0.254:19000/secure/icon/2024/09/11/word.png",
            "annexUrl": "[{\"address\":\"annex/2024/09/11/ecd2e6b28b0c47468515b10ad2e1d7ff.docx\",\"name\":\"系统操作手册 .docx\",\"suffix\":\".docx\",\"url\":\"http://192.168.0.254:19000/secure/annex/2024/09/11/ecd2e6b28b0c47468515b10ad2e1d7ff.docx\",\"uid\":1726034934797,\"status\":\"success\"}]",
            "remark": "系统操作手册",
            "sysName": "系统"
        }
    ]
<el-button type="text" @click="download(scope.row)">本地下载</el-button>

download(data) {
    const url = JSON.parse(data.annexUrl);
    if (url.length > 0 && url[0].url) {
        this.downFile(url[0].url, data.annexName);
    }
},

    downFile(url, fileName) {
        const x = new XMLHttpRequest();
        x.open("GET", url, true);
        x.responseType = "blob";
        x.onload = function () {
            const url = window.URL.createObjectURL(x.response);
            const a = document.createElement("a");
            a.href = url;
            a.download = fileName;
            a.click();
        };
        x.send();
    },    
        
        
        // 或者 
        downFile1(url, fileName) {
            fetch(url)
                .then((response) => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.blob();
            })
                .then((blob) => {
                const downloadUrl = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = downloadUrl;
                a.download = fileName;
                a.click();
                a.remove();
                window.URL.revokeObjectURL(downloadUrl);
            })
                .catch((error) => {
                console.error('Download error:', error);
            });
        },  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2125586.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

18068 选择排序

### 思路 1. **初始化**&#xff1a;定义变量i, j, k和临时变量tmp。 2. **外层循环**&#xff1a;遍历数组的每个元素&#xff0c;i从0到n-2。 3. **内层循环**&#xff1a;从i1到n-1&#xff0c;找到最小元素的索引k。 4. **交换**&#xff1a;将最小元素与当前元素交换。 #…

源码安装python3.10.8后pip3无法使用问题

一、背景&#xff1a; CentOS7.7上默认已经存在python2.7&#xff0c;但需要python3&#xff0c;所以计划源码安装python3。 下载python3.10.8 wget https://www.python.org/ftp/python/3.10.8/Python-3.10.8.tgz 二、编译安装 安装用户为普通linux用户&#xff0c;拥有sudo权…

实战案例(2)防火墙+二交换机VLAN组网

案例二&#xff1a;防火墙充当三层交换机与路由器角色功能进行组网 拿到这样的拓扑后&#xff0c;首先要了解好客户的需求&#xff0c;然后根据需求进行划分 比如客户那边有监控跟办公网络&#xff0c;可以通过VLAN划分不同的区域&#xff0c;然后二层交换机对接终端的口划入到…

C++中的I/O流

本节主要看代码理解 I/O流继承关系 iostream 主要类 cin cout cerr clog while&#xff08;cin>>str&#xff09; &#xff5b; //处理 &#xff5d; 当接收ctrl z 或 ctrl c时&#xff0c;会停止&#xff0c; 原理&#xff1a;重载操作符bool&#xff0c;令指定istr…

python学习——对无人机影像有RGB转换到HSV

问题描述 最近需要对无人机影像中绿色植被信息进行提取&#xff0c;查看相关论文&#xff0c;发现用的比较多的就是HSV色彩转换方法&#xff0c;动手实践一下。 解决思路 #mermaid-svg-5ejGodIusPv6zFVS {font-family:"trebuchet ms",verdana,arial,sans-serif;fon…

移植案例与原理 - startup子系统之syspara_lite系统属性部件

往期知识点记录&#xff1a; 鸿蒙&#xff08;HarmonyOS&#xff09;应用层开发&#xff08;北向&#xff09;知识点汇总 startup子系统之syspara_lite系统属性部件 &#xff08;1&#xff09; startup子系统之syspara_lite系统属性部件 &#xff08;2&#xff09; startup子系…

【C++ Primer Plus习题】14.5

大家好,这里是国中之林! ❥前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。有兴趣的可以点点进去看看← 问题: 解答: main.cpp #include <iostream> using namespace std; #includ…

Xinstall地推解决方案:精准追踪,提升App推广效果!

在移动互联网时代&#xff0c;App的推广和运营成为了开发者们面临的一大挑战。尤其是地推活动&#xff0c;作为App推广的重要手段&#xff0c;其效果直接关系到产品的用户增长和活跃度。然而&#xff0c;传统的地推方式存在着诸多痛点&#xff0c;如业绩统计繁琐、推广效果难以…

Excel怎么去除公式保留数字,一个快捷键也能搞定

大家好&#xff0c;这里是效率办公指南&#xff01; &#x1f4ca;在处理Excel数据时&#xff0c;我们经常会遇到需要从公式单元格中提取数值的情况。例如&#xff0c;你可能有一个包含公式的列&#xff0c;但只需要那些公式计算后的数字。今天&#xff0c;我们就来学习几种在…

无线领夹麦克风哪款好,无线麦克风品牌排行榜前十名,智商税详谈

​无线领夹麦克风如今是视频创作者、直播博主等群体常用的音频设备&#xff0c;但由于品牌和型号众多&#xff0c;消费者在购买时常常不知如何选择。从市场情况来看&#xff0c;某些品牌在销量上占据优势&#xff0c;但在口碑方面&#xff0c;一些专注品质的小众品牌可能更胜一…

《DB-GPT项目》专栏总目录

❤️ 专栏名称&#xff1a;《DB-GPT项目》 &#x1f339; 内容介绍&#xff1a;项目部署、大模型替换、底层源码修改、数据分析、数据可视化、自动化等&#xff0c;适合零基础和进阶的同学。 &#x1f680; 订阅专栏&#xff1a;订阅后可阅读专栏内所有内容&#xff0c;专栏持续…

配电房数字式仪表读数识别算法开发

文章目录 一、概述二、训练数据准备2.1 自动生成图片2.2 爬虫搜集图片 三、模型训练及测试3.1 数据集组成3.2 模型训练及评价3.3 预测结果可视化 四、小结 一、概述 数字式仪表是指以数字的形式呈现仪表读数的仪表类型&#xff0c;其特点是读数比较直观&#xff0c;如下图为配…

react 安装使用 antd+国际化+定制化主题+样式兼容

安装antd 现在从 yarn 或 npm 或 pnpm 安装并引入 antd。 yarn add antd修改 src/App.js&#xff0c;引入 antd 的按钮组件。 import React from react; import { Button } from antd;const App: React.FC () > (<div className"App"><Button type&q…

【鸿蒙】HarmonyOS NEXT星河入门到实战5-基础语法

目录 一、字符串拼接 1.1 常规字符串拼接 1.2 模板字符串hello(符号在键盘的tab上面) 二、类型转换 &#xff08;数字和字符串&#xff09; 2.1 字符串转数字 2.2 数字转字符串 三、交互 3.1 点击事件 3.2 状态管理 3.3 计数器案例 四、运算符 4.1 算数运算符 4.2 赋…

[001-03-007].第26节:分布式锁迭代3->优化基于setnx命令实现的分布式锁-防锁的误删

我的博客大纲 我的后端学习大纲 1、问题分析&#xff1a; 1.1.问题&#xff1a; 1.锁的超时释放&#xff0c;可能会释放其他服务器的锁 1.2.场景&#xff1a; 1.如果业务逻辑的执行时间是7s。执行流程如下 1.index1业务逻辑没执行完&#xff0c;3秒后锁被自动释放。2.index…

企业会议室预约管理系统

基于springbootvuemysql实现的企业会议室预约管理系统&#xff08;源码数据库部署视频&#xff09; ### 主要技术 SpringBoot、Vue、MySQL ### 系统角色 员工、管理员 ### 系统功能 1&#xff09;管理员&#xff1a;数据统计&#xff08;会议室使用统计-柱状图、设备状态统计…

C++:2024/9/11

B. Increase/Decrease/Copy 原题链接&#xff1a;Problem - B - Codeforces 题目大意&#xff1a; ​ 给一颗树&#xff0c;规定编号为1的节点为根节点&#xff0c;每个节点上初始会有一个值&#xff0c;你每次可以进行操作&#xff0c;这个操作是选定一个非叶子节点的节点…

Parallels Desktop 20 最新版,带来哪些新功能(附下载链接)!

很兴奋地向大家宣布&#xff0c;Parallels Desktop 20 for Mac 正式发布啦——这是我们产品迄今为止最强大的版本&#xff01; 这次最大的亮点是全新推出的 Parallels AI 工具包&#xff0c;它提供安全的、可下载的预装虚拟机&#xff0c;让你可以在离线环境中迅速提升 AI 开发…

python中swift包的安装

魔搭社区上经常会有swift这种包需要导,但是在pip install swift怎么装都装不上,这时候需要: pip install ms-swift -U

蓝牙也会更新?新功能有这些便捷之处

本周&#xff0c;蓝牙技术联盟发布了蓝牙 6.0 的最新版本&#xff0c;其中引入了一项名为“信道探测”的新功能。这一功能将大幅提升苹果设备上的“查找”应用表现&#xff0c;为用户带来前所未有的距离感知能力。蓝牙 6.0 承诺&#xff0c;未来的蓝牙设备和配件将能够实现“相…