如何通过JavaScript利用HTTPS路径下载AJAX返回的PDF文件

我懂你遇到的这个痛点——浏览器默认会预览PDF文件，用window.location.href只会打开预览窗口，而不是直接触发下载。下面给你几种靠谱的前端实现方案，还有一个后端配合的思路，你可以根据场景选择：

方法1：创建隐藏<a>标签并模拟点击（最简洁的同源方案） #

这个方法利用HTML5的download属性强制触发下载，只要PDF路径和当前页面同源（同域名、协议、端口）就能直接用：

$.ajax({
    type: "POST",
    url: "/Reporting/ReportAPI",
    data: '{PatientId:"BH0012"}',
    contentType: "application/json;charset=utf-8", // 修正了原代码里的符号错误
    dataType: "JSON", // 注意是大写的T
    success: function (response) {
        // 确保是完整URL（后端返回相对路径时补全域名）
        const pdfUrl = response.startsWith('http') 
            ? response 
            : `${window.location.origin}/${response.replace(/^\/+/, '')}`;
        
        // 创建隐藏下载链接
        const downloadLink = document.createElement('a');
        downloadLink.href = pdfUrl;
        // 从URL提取文件名，也可以自定义
        downloadLink.download = pdfUrl.split('/').pop();
        downloadLink.style.display = 'none';
        
        // 模拟点击触发下载
        document.body.appendChild(downloadLink);
        downloadLink.click();
        // 清理DOM元素
        document.body.removeChild(downloadLink);
    }
});

注意：跨域场景下download属性会失效，建议用方法2或后端方案。

方法2：通过Fetch API获取Blob后下载（跨域场景适用） #

如果PDF文件是跨域的，或者需要更灵活地处理文件内容，可以先把PDF转为Blob对象再创建下载链接：

$.ajax({
    type: "POST",
    url: "/Reporting/ReportAPI",
    data: '{PatientId:"BH0012"}',
    contentType: "application/json;charset=utf-8",
    dataType: "JSON",
    success: function (response) {
        fetch(response)
            .then(res => res.blob())
            .then(pdfBlob => {
                // 创建临时Blob URL
                const blobUrl = URL.createObjectURL(pdfBlob);
                const downloadLink = document.createElement('a');
                
                downloadLink.href = blobUrl;
                downloadLink.download = response.split('/').pop();
                downloadLink.style.display = 'none';
                
                document.body.appendChild(downloadLink);
                downloadLink.click();
                document.body.removeChild(downloadLink);
                
                // 释放Blob URL，避免内存泄漏
                URL.revokeObjectURL(blobUrl);
            })
            .catch(err => console.error('PDF下载失败:', err));
    }
});

这个方法需要后端配置CORS跨域允许头，否则会触发跨域错误。

方法3：后端设置响应头（一劳永逸的最优方案） #

如果后端可以调整，最省心的方式是让后端在返回PDF文件时，添加Content-Disposition响应头，强制浏览器下载而非预览：

Content-Disposition: attachment; filename="BH00118051710501_1_1.pdf"

这样不管你用window.location.href还是前面的前端方法，都会直接触发下载，不需要前端做额外处理。

内容的提问来源于stack exchange，提问作者vndpal