能否通过fetch请求设置<embed>标签的PDF内容？

可以实现将fetch获取到的PDF流通过<embed>标签展示，效果和直接设置URL作为src一致，还能支持动态切换不同PDF。

核心思路 #

<embed>的src属性不仅支持普通URL，也支持Blob URL（由浏览器生成的指向内存中Blob对象的临时URL）。我们只需要把fetch拿到的PDF流转换成Blob，再生成对应的Blob URL，赋值给<embed>即可。

完整实现代码 #

后端PHP代码（原代码整理）

public function getPdfContent() {
    return response($pdf, 200)
        ->header('Content-Type', 'application/pdf');
}

前端代码（含动态切换逻辑）

<!-- 页面中的embed元素 -->
<embed id="pdfEmbed" type="application/pdf" width="100%" height="600px">

<!-- 切换PDF的按钮示例 -->
<button onclick="loadPdf('pdf-id-1')">加载PDF 1</button>
<button onclick="loadPdf('pdf-id-2')">加载PDF 2</button>

<script>
let currentBlobUrl = null;

function loadPdf(pdfId) {
    // 先释放之前的Blob URL，避免内存泄漏
    if (currentBlobUrl) {
        URL.revokeObjectURL(currentBlobUrl);
    }

    fetch(`/get-pdf-content?pdfId=${pdfId}`) // 根据按钮传递不同参数获取对应PDF
        .then(response => {
            if (!response.ok) throw new Error('请求失败');
            return response.blob(); // 将响应转换为Blob对象
        })
        .then(blob => {
            currentBlobUrl = URL.createObjectURL(blob); // 生成Blob URL
            const embed = document.getElementById('pdfEmbed');
            embed.src = currentBlobUrl; // 赋值给embed的src
        })
        .catch(err => console.error('加载PDF出错:', err));
}
</script>

关键说明 #

• Blob转换：必须用response.blob()把fetch的响应转换成Blob类型，这是生成Blob URL的前提。
• 内存管理：每次切换PDF时，调用URL.revokeObjectURL()销毁旧的Blob URL，避免浏览器内存占用过高。
• 动态参数：通过在fetch的URL中添加参数（比如pdfId），后端可以根据参数生成不同的PDF，实现点击按钮切换的需求。

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