jq下载文件并自定义文件名

最新推荐文章于 2024-07-19 03:08:01 发布

weixin_43502879

最新推荐文章于 2024-07-19 03:08:01 发布

阅读量738

点赞数 8

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_43502879/article/details/135642029

版权

本文介绍了如何使用JavaScript的XMLHttpRequest和BlobAPI实现点击事件触发的文件下载功能，包括获取文件URL、创建Blob对象以及处理HTTP请求和下载链接的生成

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        $("body").on("click", '.xazi', function () {
            var fileUrl = $(this).attr('data-url');
            var fileName = $(this).attr('data-name');
            var fileType = $(this).attr('data-type');

            let url = fileUrl
            let name = fileName+fileType
            // 发送http请求，将文件链接转换成文件流
            fileAjax(url, function(xhr) {
                downloadFile(xhr.response, name)
            }, {
                responseType: 'blob'
            })
            return;
        })

        function fileAjax(url, callback, options) {
            let xhr = new XMLHttpRequest()
            xhr.open('get', url, true)
            if (options.responseType) {
                xhr.responseType = options.responseType
            }
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    callback(xhr)
                }
            }
            xhr.send()
        }

        function downloadFile(content, filename) {
            window.URL = window.URL || window.webkitURL
            let a = document.createElement('a')
            let blob = new Blob([content])
            // 通过二进制文件创建url
            let url = window.URL.createObjectURL(blob)
            a.href = url
            a.download = filename
            a.click()
            // 销毁创建的url
            window.URL.revokeObjectURL(url)
        }