Laravel 7移动端网页无法显示PDF Blob问题求助

问题背景 #

在Laravel 7 + Bootstrap 4项目中，使用<embed>或<iframe>标签在桌面端可正常显示PDF Blob，但移动端浏览器无法正常加载。

解决方案 #

方案1：直接返回PDF响应（最稳定） #

放弃Blob传输，让后端直接返回PDF文件的响应，利用浏览器原生的PDF处理能力，兼容性更好。

控制器代码调整

public function displayPdf()
{
    // 替换为你的PDF文件路径或生成逻辑
    $pdfFile = storage_path('app/path/to/your/document.pdf');

    // 返回inline类型的PDF响应，让浏览器内嵌显示
    return response()->file($pdfFile, [
        'Content-Type' => 'application/pdf',
        'Content-Disposition' => 'inline; filename="document.pdf"'
    ]);
}

Blade视图代码

<div class="container mt-4">
    <iframe 
        src="{{ route('pdf.display') }}" 
        width="100%" 
        height="700px" 
        frameborder="0"
        class="border rounded"
    >
        你的浏览器不支持PDF预览，请<a href="{{ route('pdf.display') }}">下载文件</a>查看
    </iframe>
</div>

方案2：Blob数据的移动端兼容处理 #

如果必须使用Blob传输，需针对移动端浏览器限制做适配，同时提供下载备选方案。

前端JavaScript代码

// 从后端获取Blob数据
fetch('/api/get-pdf-blob')
    .then(response => response.blob())
    .then(blob => {
        const blobUrl = window.URL.createObjectURL(blob);
        const viewer = document.getElementById('pdfViewer');
        viewer.src = blobUrl;

        // 设置下载链接
        const downloadBtn = document.getElementById('pdfDownload');
        downloadBtn.href = blobUrl;
        downloadBtn.download = 'document.pdf';
    });

Blade视图代码

<div class="container mt-4">
    <iframe 
        id="pdfViewer"
        width="100%" 
        height="700px" 
        frameborder="0"
        class="border rounded"
    >
        无法预览PDF，请点击<a id="pdfDownload" href="#" class="text-primary">下载文件</a>查看
    </iframe>
</div>

方案3：使用PDF.js渲染（兼容性最强） #

针对iOS Safari等对原生PDF预览支持有限的浏览器，使用PDF.js库直接在页面渲染PDF内容，完全脱离浏览器原生查看器限制。

步骤1：引入PDF.js文件

将PDF.js的核心文件和worker文件下载到项目public/js目录，然后在视图中引入：

<script src="{{ asset('js/pdf.min.js') }}"></script>
<script src="{{ asset('js/pdf.worker.min.js') }}"></script>

步骤2：前端渲染代码

async function renderPdfFromBlob(blob) {
    const pdfjsLib = window['pdfjs-dist/build/pdf'];
    pdfjsLib.GlobalWorkerOptions.workerSrc = '{{ asset('js/pdf.worker.min.js') }}';

    // 加载PDF Blob
    const loadingTask = pdfjsLib.getDocument(URL.createObjectURL(blob));
    const pdf = await loadingTask.promise;

    // 渲染第一页（如需多页可循环处理）
    const page = await pdf.getPage(1);
    const scale = 1.2;
    const viewport = page.getViewport({ scale });

    const canvas = document.getElementById('pdfCanvas');
    const ctx = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    await page.render({
        canvasContext: ctx,
        viewport: viewport
    });
}

// 调用渲染函数
fetch('/api/get-pdf-blob')
    .then(res => res.blob())
    .then(blob => renderPdfFromBlob(blob));

步骤3：Blade视图代码

<div class="container mt-4">
    <canvas id="pdfCanvas" class="w-100 border rounded"></canvas>
</div>

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