zoukankan      html  css  js  c++  java
  • JS 下载指定网址URL资源(文件,图片)

    /**
     * 获取 blob
     * @param  {String} url 目标文件地址
     * @return {Promise} 
     */
    function getBlob(url) {
        return new Promise(resolve => {
            const xhr = new XMLHttpRequest();
    
            xhr.open('GET', url, true);
            xhr.setRequestHeader('Access-Control-Allow-Origin','*');
            xhr.responseType = 'blob';
            xhr.onload = () => {
                if (xhr.status === 200) {
                    resolve(xhr.response);
                }
            };
    
            xhr.send();
        });
    }
    
    /**
     * 保存
     * @param  {Blob} blob     
     * @param  {String} filename 想要保存的文件名称
     */
    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 download(url, filename) {
        getBlob(url).then(blob => {
            saveAs(blob, filename);
        });
    }
    download('http://11.0.1.178:8020/EIP/AssetsOA/css/images/oa_sign_icon.png', 'jjdl.png');

    被下载的资源,服务器需要允许跨跨域请求。

  • 相关阅读:
    Clojure编写一个阶乘程序 使用递归
    SSH框架学习步骤
    js需要清楚的内存模型
    SeaJS结合javascript面向对象使用笔记(一)
    函数副作用
    linux笔记2
    C#事件与接口编程实例
    C#的接口基础教程之七 覆盖虚接口
    C#的接口基础教程之六 接口转换
    C#的接口基础教程之五 实现接口
  • 原文地址:https://www.cnblogs.com/johnjackson/p/14280631.html
Copyright © 2011-2022 走看看