首页 > 其他分享 >js 下载文件重命名

js 下载文件重命名

时间:2023-01-13 11:46:36浏览次数:44  
标签:重命名 body url filename xhr link blob js 下载

<a  href="javascript:void(0)" title="下载" onclick="downloadCros('url地址','文件名称')"></a>


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

        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        xhr.onload = () => {
            if (xhr.status === 200) {
                resolve(xhr.response);
            }
        };

        xhr.send();
    });
}

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

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

        // fix Firefox
        link.style.display = 'none';
        body.appendChild(link);

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

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

/**
 * 下载
 * @param  {String} url 目标文件地址
 * @param  {String} filename 想要保存的文件名称
 */
function downloadCros(url, filename) {
    getBlob(url).then(blob => {
        saveAs(blob, filename);
    });
}

标签:重命名,body,url,filename,xhr,link,blob,js,下载
From: https://www.cnblogs.com/manastudent/p/17049157.html

相关文章

  • Angular集成bpmn.js的基础实现及扩展(一)
    一、bpmn的基本认识bpmn.js是一个BPMN2.0渲染工具包和web建模器,使得画流程图的功能在前端来完成。bpmn画图具有哪些内容?二、使用npm安装bpmn.jsnpminstall--sav......
  • js加法精度问题解决
    //加法exportconstnumAdd=(num1,num2)=>{letbaseNum,baseNum1,baseNum2try{baseNum1=num1.toString().split('.')[1].length}cat......
  • js中base64转blob
    //将base64转换为blobexportconstdataURLtoBlob=(dataurl)=>{letarr=dataurl.split(','),mime=arr[0].match(/:(.*?);/)[1],bstr=a......
  • js中的Class类详解
    什么是类?class类是一种抽象的体现,用来表示具有相同特性的一类事物,是面向对象编程(oop)不可缺少的工具。定义一个简单的类定义一个类为Person,每个Person都会跑,都有名字c......
  • python-标准库json模块的使用
    python-标准库json模块1.标准库json模块JSON是一种轻量级数据交换格式,一般API返回的数据大多是JSON、XML,如果返回JSON的话,需将获取的数据转换成字典,方面在程序中处理......
  • Node.js压缩包版安装与配置
    1.下载安装压缩包Node.js官网:https://nodejs.org/en/下载地址:https://nodejs.org/en/download/2.解压将下载成功的压缩包解压至指定路径,如D:\environment3.创建文件......
  • Selenium的webdriver下载地址汇总
    chromedriver驱动下载地址:(根据chrome版本下载)http://chromedriver.storage.googleapis.com/index.htmlmicrosoft-edge驱动下载地址:(根据Edge版本下载)https://developer.m......
  • 5个实用JS库
    前言作为一名前端开发者,我通过这些JavaScript库大大提高了自己的效率,比如格式化日期、处理URL参数、调试手机网页等。因此,我想将这些好用的库分享给你们,也希望可以帮助到你......
  • SpringBoot-JSR303数据校验
    什么是JSR303?Springboot中可以用@validated来校验数据,如果数据异常则会统一抛出异常,方便异常中心统一处理。我们这里来写个注解让我们的name只能支持Email格式;@Componen......
  • 来自StateOfJS调查:2022年JavaScript生态圈趋势报告(前端早读课)
    原文我这里记录些觉得有趣的。Promise.allSettled()完成所有输入的方法,nomatterwhat,返回对应的状态和值/原因,这对想知道所有返回状态的业务很好用;使用async/await没法......