js下载改变文件名,php下载文件到浏览器

旧城等待， 2023-07-08 02:37 10阅读 0赞

最简单的：

### 1.html实现： ###

> 注意：这个有限制，只能是同源的文件才可以设置文件名，跨域的虽然可以下载，但是没办法设置文件名字，跨域的时候download属性不起作用。

### 2.js下载改变文件名： ###

设置no-cors跨过跨域验证。

const downloadRes = async (url, name) => { 
        let response = await fetch(url, { 
            mode: "no-cors" # fetch设了mode='no-cors'表示不垮域，可以请求成功，但不好意思，你拿不到服务器返回数据，它被标记了'opaque'，请求没发出去请看控制台网络面板
        })
        // 内容转变成blob地址
        let blob = await response.blob()
        // 创建隐藏的可下载链接
        let objectUrl = window.URL.createObjectURL(blob)
        let a = document.createElement('a')
        //地址
        a.href = objectUrl
        //修改文件名
        a.download = name
        // 触发点击
        document.body.appendChild(a)
        a.click()
        //移除
        setTimeout(() => document.body.removeChild(a), 1000)
    }

### 3.后端实现 ###

前台显示：

后端方法：

/** * 文件下载，可跨域，可重命名 * @return [type] [description] */
        public function download() { 
            $params=$this->request->query;
            $file_url = $params['url'];
            $name = $params['name'];
            if ($file_url && $name) { 
                $size=readfile($file_url);
                header("Content-type:application/octet-stream");
                header("Content-Disposition:attachment;filename=$name");
                exit;
            }
            throw new Exception("参数不对！", 1);
        }