• 文件下载重命名(可跨域)


    参考https://www.jianshu.com/p/6545015017c4

    1.不可跨域

    <a :id="'download' + scope.$index" style="display:none"></a>
    var a = $('#download'+e)[0];
                    a.href=this.url+n.file_link;
                    console.log(2222,a)
                    a.download = n.file_name;
                    a.click()
    由于a.download跨域会失效,上面代码只可同域实现

    2.通用版
    差不多就是获取文件 Blob,然后下载重命名,简单整理了一下:
    /**
     * 获取 blob
     * @param  {String} url 目标文件地址
     * @return {Promise} 
     */
    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();
        });
    }
    
    /**
     * 保存
     * @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);
        });
    }
     
  • 相关阅读:
    吉哥系列故事――恨7不成妻
    K
    F
    树状数组
    34.在排序数组中查找元素的第一个和最后一个位置--二分查找
    CSS选择器及其权重
    CSS布局 圣杯和双飞翼
    983. 最低票价 -- 动态规划
    合并k个排序链表 二分
    面试题 16.03. 交点
  • 原文地址:https://www.cnblogs.com/lichuntian/p/11208482.html
Copyright © 2020-2023  润新知