当前位置: 首页 > article >正文

前端自定义下载文件名

在这里插入图片描述

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.kler.cn/a/301359.html

相关文章:

  • PhpSpreadsheet导出图片
  • 大模型呼叫中心,如何建设呼入机器人系统?
  • 在云服务器搭建 Docker
  • 【Android】EventBus事件总线用法浅析
  • HOW - PPT 制作系列(一)
  • Python_爬虫3_Requests库网络爬虫实战(5个实例)
  • 第一篇 第3章 不确定型分析 第4章 设备更新分析 第5章价值工程
  • 基于SpringBoot+Vue的超市外卖管理系统
  • vue3使用provide和inject传递异步请求数据子组件接收不到
  • 大文件切片上传-vue3.0
  • 如何在VUE3中使用函数式组件
  • ecmascript和javascript的区别?
  • 从底层原理上理解ClickHouse 中的稀疏索引
  • 相互作用先验下的 3D 分子生成扩散模型 - IPDiff 评测
  • Hbase的简单使用示例
  • 在 RT-Thread 上使用单色屏 UI 库 - U8G2
  • 【Shiro】Shiro 的学习教程(四)之 SpringBoot 集成 Shiro 原理
  • 海外云手机是否适合运营TikTok?
  • Kubernetes部署(haproxy+keepalived)高可用环境和办公网络打通
  • Java 21的Preferences API的笔记
  • 分布式中间件-几个常用的消息中间件
  • redis基本数据结构-hash
  • 数据分析-11-时间序列分析的概念任务和主要方法
  • 第R2周:LSTM-火灾温度预测
  • C语言——希尔排序
  • Qt什么时候触发paintEvent事件