如何在HTML页面展示或下载application/pdf类型的HTTP响应PDF

你的代码核心问题有两个：一是未给XMLHttpRequest设置正确的responseType，导致响应数据格式不符合要求；二是直接将Blob对象赋值给iframe的src属性，iframe无法直接识别Blob，需要通过URL.createObjectURL()生成可访问的临时URL。

一、修正代码在iframe中展示PDF #

修改JavaScript代码，添加响应类型设置，并正确生成Blob URL：

const request = new XMLHttpRequest();
request.open('GET', '你的API接口地址', true);
// 关键：设置响应类型为blob，确保拿到二进制PDF数据
request.responseType = 'blob';

request.onreadystatechange = () => {
    if (request.readyState == 4 && request.status === 200) {
        const pdfBlob = request.response;
        // 生成Blob的临时可访问URL
        const pdfUrl = URL.createObjectURL(pdfBlob);
        const iframe = document.getElementById("dispwill");
        iframe.src = pdfUrl;

        // 可选：页面卸载时释放URL，避免内存泄漏
        window.addEventListener('unload', () => {
            URL.revokeObjectURL(pdfUrl);
        });
    }
};

request.send();

二、实现PDF下载功能 #

如果需要添加下载功能，可在请求成功后通过创建<a>标签触发下载：

// 在请求成功的回调内添加以下代码
const downloadBtn = document.createElement('a');
downloadBtn.href = pdfUrl;
// 设置下载后的文件名
downloadBtn.download = 'document.pdf';
// 触发点击动作完成下载
downloadBtn.click();

额外注意事项 #

• 确认API响应的Content-Type头为application/pdf，避免Blob类型不匹配导致展示失败。
• 如果存在跨域问题，需要后端配置CORS规则，允许你的前端域名访问该API接口。

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