Laravel 如何在 PC/Mobile 網頁中顯示 PDF

發表於 所需閱讀時間 ≈ 1 分鐘

以下幾種方法可以將 PDF 顯示在 網頁中

embed

1
2
<embed src="http://example.com/the.pdf" width="500" height="375" 
 type="application/pdf">
  • 好處：鑲嵌簡單
  • 壞處：在手機瀏覽器中顯示會有問題，如果可以使用另開視窗顯示也是一種方法

Google Doc

1
<iframe src="https://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>
  • 好處：鑲嵌簡單
  • 壞處：沒有下載的內建功能，必須要在Google Drive顯示儲存，倚賴第三方有可能未來被移除

object

1
2
3
<object width="400" height="500" type="application/pdf" data="/my_pdf.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0">
    <p>Insert your error message here, if the PDF cannot be displayed.</p>
</object>
  • 好處：鑲嵌簡單，可以有無法顯示時的錯誤訊息或是另開視窗
  • 壞處：跟<embed>一樣在手機上顯示會有問題

第三方套件 pdf.js

fork 專案，原先的作者的程式碼在 publish 時會有問題

Resource:

davcpas1234/laravelpdfviewer

如何在 view.js 預設顯示 Full Width

由於在手機版的時候顯示都非常的小，需要預設為 Full Width 才好觀看，但作者都沒有做相關的說明
找了非常久才找到可以實現的方式

1
/ViewerJS/?zoom=page-width#../[path_to_file]

在這邊Laravel的套件的作法如下：

  • 安裝的資料夾在 public/laraview 底下
  • PDF的檔案放在 public/folder/example.pdf

可設定參數：

  • startpage=2
  • zoom=page-width
1
<iframe src ="{{ asset('/laraview/?startpage=2&zoom=page-width#../folder/example.pdf') }}" width="100%" height="600px" allowfullscreen></iframe>

參考資料：

How to automatically fit the pdf to screen?

Open at a specific page