首页 > 其他分享 >JS - 文件下载

JS - 文件下载

时间:2024-01-15 18:44:25浏览次数:27  
标签:body 文件 const JS xhr link blob document 下载

文件下载 1

function downloadFile() {
    const link = document.createElement('a');
    link.style.display = 'none';
    link.setAttribute('href', file.sourceUrl); // 设置下载地址
    link.setAttribute('download', file.fileName); // 设置文件名
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

文件下载 2

async function download(downloadUrl, downloadFileName) {
    const blob = await getBlob(downloadUrl);
    saveAs(blob, downloadFileName);
}



function getBlob(url) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();

        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        xhr.onload = () => {
            if (xhr.status === 200) {
                resolve(xhr.response);
            } else {
                reject(new Error(`Request failed with status ${xhr.status}`));
            }
        };
        xhr.onerror = () => {
            reject(new Error('Request failed'));
        };

        xhr.send();
    });
}



function saveAs(blob, filename) {
    if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename);
    } else {
        let link = document.createElement('a');
        const body = document.body;

        link.href = window.URL.createObjectURL(blob);
        link.download = filename;

        link.style.display = 'none'; // hide the link
        body.appendChild(link);

        link.click();
        body.removeChild(link);

        window.URL.revokeObjectURL(link.href);
    }
}

标签:body,文件,const,JS,xhr,link,blob,document,下载
From: https://www.cnblogs.com/ShenhaoCore/p/17965988

相关文章

  • nginx代理,http下载文件到1G就终止的问题
    我们使用了nginx作为网关,项目中发现再互联网上http下载超过1G的文件就自动终止。但是在局域网中下载正常。查看NGINX的官方文档:http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_buffering从NGINX的缓存配置中发现了一个参数:proxy_max_temp_file_size 看到......
  • windows下直接把文件夹打包成war包
    windows下直接把文件夹打包成war包在windows中把一个文件夹打成war包一般开发打war包时都是用MyEclipse或IntelliJIDEA等直接导出war文件,这里介绍一种如何把一个文件夹打成war包的方式,如下例如要打包的文件在D:\testWar打开cmd命令行窗口,进入文件所在目录D:\testWar然......
  • 前端跨域三种解决方式(CORS、JSONP、代理跨域)
    什么是跨域?跨域是浏览器为了安全而作出的限制策略(所以服务端不涉及到跨域);浏览器请求必须遵循同源策略,即同域名、同端口、同协议;例如:http://www.abc.com到http://www.def.com的请求会出现跨域(域名不同)http://www.abc.com:3000到http://www.abc.com:3001的请求会出现跨域(端口不同......
  • 传输文件到imx6ul开发板上
    使用tftp、nfs、scp传输文件到开发板上的前提是开发板、ubuntu虚拟机的网络能够ping通。配置网络以及tftp、nfs等部分参考正点原子团队的开发手册和韦东山老师的开发手册。一、tftp传输文件将需要传输的文件放入/home/ly/linux/tftp目录下,在开发板中使用命令:tftp-g-r192.168......
  • Linux find命令删除N天或N小时前的文件或目录
    前言全局说明Linuxfind命令删除N天或N小时前的文件或目录一、模拟创建N天前的文件(夹)1.1生成不带0开头的文件名foriin{1..15};dot=$i;touch-d"2024-01-0$i00:00:00"$i.txt;done1.2生成0开头的文件名foriin{01..15};dot=$i;touch-d"2024-01-0$......
  • Python3 使用 PyMuPDF 库提取pdf中的字体文件
    先安装PyMuPDF库:pipinstallPyMuPDF 示例:importfitzdefextract_fonts(pdf_path):withfitz.open(pdf_path)asdoc:num_pages=doc.page_countfonts=[]forpage_numberinrange(num_pages):font_info=doc.get......
  • 添加头文件在某一种模式(Debug/Release)下 提示不存在对应的 .h 文件
    在C++引用头文件中,如在Debug模式下进行编译,可能此时本地环境中没有对应的***_d.lib文件,只有***.lib,就会提示对应的错误信息。如C++中Debug模式下#include<Python.h>会提示链接错误信息无法打开文件“python311_d.lib”,此时可以将项目修改为Release模式,或在包含头文件......
  • Androidmanifest文件加固和对抗
    前言恶意软件为了不让我们很容易反编译一个apk,会对androidmanifest文件进行魔改加固,本文探索androidmanifest加固的常见手法以及对抗方法。这里提供一个恶意样本的androidmanifest.xml文件,我们学完之后可以动手实践。1、Androidmanifest文件组成这里贴一张经典图,主要描述了andr......
  • JMeter文件介绍
       ......
  • 【nestjs】main.ts
    1.main.ts文件做了什么?核心文件,通过NestFactory.create创建应用程序实例,完成中间件、守卫、管道、异常过滤器、拦截器的注册。2.NestFactory.create(appModele,options?)做了什么?创建应用程序实例,该方法接受两个参数,第一个参数是一个根模块,第二个参数是一个可选的配置对象,......