如何将Spatie Browsershot生成的PDF字符串在页面小区域/iframe展示？

你当前已经能通过返回response让浏览器整页展示PDF，但直接把原始PDF字符串传给视图并塞进iframe的src里是无效的——因为iframe的src需要的是URL或者可解析的Data URI，原始二进制/字符串格式的PDF浏览器无法识别。下面提供两种可行的实现方式：

方案一：使用Data URI直接嵌入iframe #

把PDF内容转成Base64编码，生成Data URI后直接作为iframe的源，适合小型PDF场景。

控制器代码 #

public function index(Request $request)
{
    $pdf = Browsershot::html('<h1>Test</h1>')
        ->pdf();
    // 将PDF二进制内容转为Base64编码
    $pdfBase64 = base64_encode($pdf);
    return view('index', ['pdfBase64' => $pdfBase64]);
}

视图代码 #

<!-- 自定义宽高来控制PDF展示窗口的大小 -->
<iframe src="data:application/pdf;base64,{{ $pdfBase64 }}" width="600" height="400"></iframe>

方案二：拆分路由，通过独立接口加载PDF #

创建专门的PDF生成接口，让iframe请求这个接口获取PDF内容，适合大型PDF或需要复用PDF生成逻辑的场景。

1. 定义路由 #

// 展示包含iframe的页面
Route::get('/pdf-preview-page', [PdfController::class, 'showPreviewPage']);
// 返回PDF内容的接口
Route::get('/generate-pdf', [PdfController::class, 'generatePdf']);

2. 控制器代码 #

public function showPreviewPage()
{
    // 返回包含iframe的视图
    return view('pdf-preview');
}

public function generatePdf(Request $request)
{
    $pdf = Browsershot::html('<h1>Test</h1>')
        ->pdf();
    return response($pdf, 200)
        ->header('Content-Type', 'application/pdf');
}

3. 视图代码（示例含模态框） #

<!-- 基础iframe展示 -->
<iframe src="{{ url('/generate-pdf') }}" width="600" height="400"></iframe>

<!-- 模态框内展示PDF的示例（结合Bootstrap） -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#pdfModal">
  打开PDF预览模态框
</button>

<div class="modal fade" id="pdfModal" tabindex="-1" aria-labelledby="pdfModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="pdfModalLabel">PDF预览</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <iframe src="{{ url('/generate-pdf') }}" width="100%" height="500"></iframe>
      </div>
    </div>
  </div>
</div>

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