精华内容
下载资源
问答
  • js通过URL下载文件
    2021-11-04 20:07:21

    通过URL下载文件分为两种:

    1.doc,docx文件

    2.非doc、docx文件

    第一种:doc、docx文件下载的函数

    /**
     * url 下载文件路径
     * fileName 自定义文件名称
     * target 文件在何处被下载
     */
    
    export function downloadByLink({url, fileName, target}: any) {
    
        const link = document.createElement('a');
        console.log('link', link); // 打印出来的结果
        // <a href="https://url.docx" target="undefined" download="fileName.docx"></a>
        
        link.href = url;
        link.target = target;
        
        if(link.download !== undefined) {
            link.download = fileName || url.substring(url.lastIndexOf('/') + 1, url.length)
        }
    
        if(document.createEvent) {
            const e: MouseEvent = document.createElement('MouseEvents');
            e.initEvent('click', true, true);
            link.dispatchEvent(link);
            return true;
        }
    
        
    }
    

    第二种: 非doc、docx文件下载到函数

    /**
     * url 下载文件路径
     * fileName 自定义文件名称
     * target 文件在何处被下载
     */
    export function downloadByURL({url, fileName,target}: any) {
        
        // 如果文件不携带扩展名,补充扩展名
        if( !fileName?.includes('.')) {
            const index = url.lastIndexOf('.');
            fileName = `${fileName}.${url.substr(index + 1)}`;
        }
    
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        xhr.onload = (e) => {
            const url = window.URL.createObjectURL(xhr.response);
            // 调用上面封装的函数
            downloadByLink({url, fileName, target});
        };
        xhr.onerror = () => {};
        xhr.send();
    }

    更多相关内容
  • 用于js下载文件到本地,js根据url或数据下载文件到本地,使用方法见https://blog.csdn.net/mudarn/article/details/118547480?spm=1001.2014.3001.5502
  • node.js通过url读取文件

    2020-12-16 20:47:29
    本文实例为大家分享了node.js通过url读取文件的具体代码,供大家参考,具体内容如下 在浏览器地址栏中输入127.0.0.1:3000和127.0.0.1:3000/node时,读取node.html文件,输入127.0.0.1:3000/banner时读取banner.json...
  • js根据URL下载文件

    千次阅读 2020-11-19 12:29:34
    url没有经过后端处理,返回的是文件存储地址url 第一种情况: window.open('url') 缺点:会打开一个新的窗口,请求完成后自动关闭,用户体验不是特别好,但是问题不大 <a href="url" download="文件名"><...

    两种情况

    • url经过后端处理,返回的是文件流
    • url没有经过后端处理,返回的是文件存储地址url

    第一种情况:

    • window.open('url')
      缺点:会打开一个新的窗口,请求完成后自动关闭,用户体验不是特别好,但是问题不大
    • <a href="url" download="文件名"></a>
      虽然不会打开新弹窗,但是兼容性不好,IE 需要>IE13,safari暂未支持

    第二种情况:
    上面的方法对于第二种情况,都只是跳转页面并展示图片,但是并不会自动下载

    使用canvas将地址url转换成dataurl

    Data URLs 由四个部分组成:前缀 (data:)指示数据类型的 MIME 类型、如果非文本则为可选的 base64 标记、数据本身,

    方法:

    function downloadQrCodeByBase64(dataUrl, fileName) {
      const img = new Image();
      img.onload = () => {
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        // 将画布内容转换为base64
        const base64 = canvas.toDataURL();
        const a = document.createElement('a');
        a.href = base64;
        a.download = fileName;
        // 触发a链接点击事件,浏览器开始下载文件
        a.click();
      };
      img.src = dataUrl;
      // 必须设置,否则canvas中的内容无法转换为base64
      img.setAttribute('crossOrigin', 'Anonymous');
    }
    
    

    缺点:图片越大,转换后的 base64 编码越长,尽量避免对大图进行 DataURL 转换,防止转换后的长度超出浏览器限制

    展开全文
  • js通过文件url下载文件到本地

    万次阅读 多人点赞 2019-03-25 15:31:57
    同源单文件 ... 标签的 download 属性下载文件 const elt = document.createElement('a'); elt.setAttribute('href', url); elt.setAttribute('download', 'file.png'); elt.style.display = 'none'; ...

    同源单文件

    针对单文件的情况下,同源的文件,可以通过 < a> 标签的 download 属性下载文件

    const elt = document.createElement('a');
    elt.setAttribute('href', url);
    elt.setAttribute('download', 'file.png');
    elt.style.display = 'none';
    document.body.appendChild(elt);
    elt.click();
    document.body.removeChild(elt);
    

    但是这个方案并不适用于非同源的资源,此时它相当于普通的超链接,点击会跳转到资源页面,而不是下载。

    非同源

    如果不存在CORS问题, 可以借助Blob实现下载(构造xhr请求文件地址, 以Blob的形式接收Response):

    function downloadWithBlob(url) {
     fetch(url).then(res => res.blob().then(blob => {
      var a = document.createElement('a');
      var url = window.URL.createObjectURL(blob);
      var filename = 'file.png';
      a.href = url;
      a.download = filename;
      a.click();
      window.URL.revokeObjectURL(url);
     }));
    }
    

    如果存在CORS问题,可以考虑使用 canvas 将图片转换成 base64 编码之后再通过 标签的 download 属性下载:

    function downloadPic(url) {
     const img = new Image;
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d');
     img.onload = function() {
      canvas.width = this.width;
      canvas.height = this.height;
      ctx.drawImage(this, 0, 0);
     
      const elt = document.createElement('a');
      elt.setAttribute('href', canvas.toDataURL('image/png'));
      elt.setAttribute('download', 'file.png');
      elt.style.display = 'none';
      document.body.appendChild(elt);
      elt.click();
      document.body.removeChild(elt);
     };
     img.crossOrigin = 'anonymous';
     img.src = url;
    }
    

    如果有文件content

    function funDownload(content, filename) {
        // 创建隐藏的可下载链接
        var eleLink = document.createElement('a');
        eleLink.download = filename;
        eleLink.style.display = 'none';
        // 字符内容转变成blob地址
        var blob = new Blob([content]);
        eleLink.href = URL.createObjectURL(blob);
        // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
    };
    
    展开全文
  • 一、下载含有url文件 代码如下(示例): // 下载含有url文件 function downloadUrlFile(url, fileName) { const url2 = url.replace(/\\/g, '/'); const xhr = new XMLHttpRequest(); xhr.open('GET', url2,...

    将url通过XMLHttpRequest请求拿到二进制文件流,转blob对象下载到本地

    一、下载含有url的文件

    代码如下(示例):

    // 下载含有url的文件
    function downloadUrlFile(url, fileName) {
        const url2 = url.replace(/\\/g, '/');
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url2, true);
        xhr.responseType = 'blob';
        //xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
        // 为了避免大文件影响用户体验,建议加loading
        xhr.onload = () => {
            if (xhr.status === 200) {
                // 获取文件blob数据并保存
                saveAs(xhr.response, fileName);
            }
        };
        xhr.send();
    }
    

    二、保存到本地并自动点击

    代码如下(示例):

    function saveAs(data, name) {
    const urlObject = window.URL || window.webkitURL || window;
    const export_blob = new Blob([data]);
    //createElementNS() 方法可创建带有指定命名空间的元素节点。
    //此方法可返回一个 Element 对象。
    const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = urlObject.createObjectURL(export_blob);
    save_link.download = name;
    save_link.click();
    }
    

    在这里插入图片描述

    三、将文件下载

    需要将文件转换成blob文件流格式,再将blob格式转成url格式,最后调用上述方法下载

    var blob = new Blob([data.Body]); //data.Body是文件
    let blobUrl = URL.createObjectURL(blob)
    

    四、案例

    var blob = new Blob([data.Body]);
    let blobUrl = URL.createObjectURL(blob)
    if (err) {
        _that.$message.error(err)
        return
    }
    // 保存到本地并自动点击
    function saveAs(data, name) {
        const urlObject = window.URL || window.webkitURL || window;
        const export_blob = new Blob([data]);
        const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = urlObject.createObjectURL(export_blob);
        save_link.download = name;
        save_link.click();
        let formData3 = new FormData()
        formData3.append('taskid', id);
        postAction(_that.downloadOver, formData3)
    }
    // 下载含有url的文件
    function downloadUrlFile(url, fileName) {
        const url2 = url.replace(/\\/g, '/');
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url2, true);
        xhr.responseType = 'blob';
        //xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
        // 为了避免大文件影响用户体验,建议加loading
        xhr.onload = () => {
            if (xhr.status === 200) {
                // 获取文件blob数据并保存
                saveAs(xhr.response, fileName);
            }
        };
        xhr.send();
    }
    downloadUrlFile(blobUrl, name)
    

    window.open打开文件资源路径保存文件

    该方法交给浏览器下载,会在浏览器下方出现下载进度条,批量下载超过四个会被浏览器拦截,使用定时器settimeout()处理

    window.open(url)
    

    使用javascript保存文件

    获取html文档,转换成文字保存

    function createHtml() {
     try {
      save_record("index1", $("#yhtcprediv").html());
     } catch (e) {
      alert(e);
     }
     }
     function save_record(filename, content) {
     //打开新窗口保存
     var winRecord = window.open('about:blank', '_blank', 'top=500');
     winRecord.document.open("text/html", "utf-8");
     winRecord.document.write(" <div class=\"introBox section package boxBg02\" id=\"yhtcprediv\">" + content + "</div>");         
     winRecord.document.execCommand("SaveAs", true, filename + ".html");
     winRecord.close();
     }
    

    区分blob格式和文本格式

    blob格式的数据
    在这里插入图片描述
    文本格式是乱码

    总结

    good afternoon
    展开全文
  • ajax请求后, 后端的导出接口, 返回的是导出文件url链接 实现 const elt = document.createElement('a'); elt.setAttribute('href', url); elt.setAttribute('download', 'file.png'); elt.style.display = 'none';...
  • js获取url传值的方法

    2021-01-19 15:10:38
    静态html文件js读取url参数 根据获取html的参数值控制html页面输出 一、字符串分割分析法 这里是一个获取URL带QUESTRING参数的JAVASCRIPT客户端解决方案,相当于asp的request.querystring,PHP的$_GET 函数: ...
  • 主要介绍了JavaScript实现写入文件到本地的方法,结合实例形式分析了基于FileSaver.js插件实现保存文件到本地的相关操作技巧,并附带FileSaver.js插件完整源码,需要的朋友可以参考下
  • 通过URL下载PDF文件并调用PDF阅读器显示 以及通过WEBVIEW 显示PDF 文件
  • 可以先看我的另一篇博文js通过URL下载服务器文件(可行方法) 有时候我们得到的URL是动态获取的,所以此时我们可以用如下方式设置文件地址  &lt;a :href ="'http://'+ip+'/test.txt'" download=&...
  • -说到请求下载文件,初学者可能就会想到使用ajax,然后目前ajax的返回数据,一般都是xml、json、等等,并没有以流的形式返回,其实实现起来并没有那么困难,话不多说,直接上代码 <html> <head> <...
  • js 通过url 转blob下载文件

    千次阅读 2021-12-14 17:02:43
    js 通过url 转blob下载文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name=...
  • * @param {*} src 文件url链接 * @param {*} fileName 文件名+后缀 * @param {*} fileType 文件类型(后缀) * @param {*} isNotImage 是否是图片 */ export default function download(src, fileName, ...
  • 需求简介,有一堆字体需要从oss上下载到本地,数据库只存了相对路径,但是完整路径可以拼接出来,每个字体要下载图片和字体并放入同一个... * @param {*} url 网络文件url地址 * @param {*} fileName 文件名 * .
  • 前端-javascript根据url下载文件

    千次阅读 2020-10-22 09:44:52
    var url = url.replace(/\\/g, '/'); var fileName = url.substring(url.lastIndexOf("/")+1);...// 为了避免大文件影响用户体验,建议加loading xhr.onload = () => { if (xhr.status === 200)
  • 在网上找了好多资料,最后总结下自己的实现方案,废话不多说,直接上代码 一、 第一种,后台服务器有静态资源... * 文件下载(from表单单文件下载) * @param url */ function downloadFileForm(url) { var file.
  • 以前都是直接用windows....js下载地址点这里,分别是数据,文件名,文件格式,常见文件格式看本文最后 download(data, strFileName, strMimeType); (2)如果是后台只返回了一个url,那么也是先引用刚刚下载..
  • js通过Url下载文件

    千次阅读 2017-10-11 09:49:39
    我们通过iframe到后台请求一个下载,后台通过流返回到浏览器,弹出保存窗口。 js代码: function (){ var voiceUrl =baseURL+ "download"; var iframe = document.createElement("iframe"); document....
  • js通过url地址访问文件下载

    千次阅读 2021-05-11 16:11:49
    let name = url.substring(url.lastIndexOf("/") + 1); let objectURL = window.URL.createObjectURL(new Blob([url])); let a = document.createElement('a') a.href = objectURL a.download = name a
  • let name = url.substring(url.lastIndexOf("/") + 1) let downLoad = async () => { let responsePromise = await fetch(url) let blob = await responsePromise.blob() let objectURL = window.URL....
  • 本文实例讲述了javascript使用Blob对象实现的下载文件操作。分享给大家供大家参考,具体如下: Blob对象 前言 环境 操作 总结 Blob是一个类文件的不可变的原始数据对象,非javascript原生数据类型,File对象...
  • Node.jsJavaScript的一个解析器,可以运行js文件,今天就是简单说一下如何使用Node.js下的request模块下载文件。 1、request 模块下载 npm install request 首先建一个文件夹,在控制台进入该文件夹执行这个命令...
  • .vue 文件 // 点击下载 touchDowload (item) { // 将当前链接换成本地代理的方式 var baseUrl = '/ProxyDownload' + item.url.replace('https://file.hp.video', '') // 创建一个a节点插入的document var a = ...
  • JS 获取URL地址中的文件名和参数,这个版本中有详细的注释。
  • URL文件地址下载方法 一、正常情况下,我们都如此下载文件并修改文件名,在a标签上面添加download属性 //文件下载 downFile() { if ('download' in document.createElement('a')) { // 非IE下载 const elink = ...
  • 当ajax请求到一个文件url地址(http://…)时,如何下载这个文件? 如果程序自动执行window.open(url),是会被浏览器拦截的。 但是如果是用户手动触发就不会拦截。 做法:先定义一个空的窗口或者在当前窗口,然后在...
  • js通过URL下载服务器文件(可行方法)

    万次阅读 热门讨论 2018-10-31 14:56:16
    本文讲述已知文件在服务器的地址,如何下载至本地 其他博客分享的一般是这两种 1.通过window.open window.open('https://1.1.1.1/test.txt') 2.通过get表单请求 var $form = $('&lt;form method="...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 671,052
精华内容 268,420
关键字:

js下载url文件