JS下载文件

weixin_44953227

已于 2022-05-09 15:27:57 修改

阅读量5.9k

点赞数 1

分类专栏： JavaScript 文章标签： js javascript reactjs vue.js es6

于 2020-03-24 10:55:14 首次发布

本文链接：https://blog.csdn.net/weixin_44953227/article/details/105066630

版权

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

JS下载文件

核心 JavaScript 代码
完整 HTML 代码

核心 JavaScript 代码

// 截取当前时间戳
const uid = Date.now().toFixed().toString();
const url = `http://localhost:7071/gateway-api/anon/test/download?documentPath=esus/api/2022/5/9/5oyH5Y2XIF8gRWxlbWVudA__gdfileflag3c3-419f-9ac8-f4385802.pdf`
fetch(url, {
    method: 'GET',
    // headers: getHeaders() // 可以添加请求头信息
})
.then(response => {
    // console.log(response, 'response')
    response.blob().then((blob) => {
        // console.log(blob, 'blob')
        const a = document.createElement('a');
        const downUrl = window.URL.createObjectURL(blob);// 获取 blob 本地文件连接 (blob 为纯二进制对象，不能够直接保存到磁盘上)
        // const filename = response.headers
        // console.log(filename, downUrl, 'fl')
        a.href = downUrl;
        a.download = `导出数据_${uid}.pdf`; // 定义文件名字类型
        a.click();
        window.URL.revokeObjectURL(downUrl);
    });
});

完整 HTML 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件下载demo</title>
</head>

<body>
    <script>
        // 截取当前时间戳
        const uid = Date.now().toFixed().toString();
        const url = `http://localhost:7071/gateway-api/anon/test/download?documentPath=esus/api/2022/5/9/5oyH5Y2XIF8gRWxlbWVudA__gdfileflag3c3-419f-9ac8-f4385802.pdf`
        fetch(url, {
            method: 'GET',
            // headers: getHeaders() // 可以添加请求头信息
        })
        .then(response => {
            // console.log(response, 'response')
            response.blob().then((blob) => {
                // console.log(blob, 'blob')
                const a = document.createElement('a');
                const downUrl = window.URL.createObjectURL(blob);// 获取 blob 本地文件连接 (blob 为纯二进制对象，不能够直接保存到磁盘上)
                // const filename = response.headers
                // console.log(filename, downUrl, 'fl')
                a.href = downUrl;
                a.download = `导出数据_${uid}.pdf`; // 定义文件名字类型
                a.click();
                window.URL.revokeObjectURL(downUrl);
            });
        });

    </script>
</body>

</html>

weixin_44953227

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS下载文件

JS下载文件 const url = `${host}/videoData/?query=${JSON.stringify(params)}` fetch(url, { method: 'GET', headers: getHeaders() // 可以添加请求头信息 }) .then(response => { //...
复制链接

扫一扫

专栏目录