[WordPress] 利用 Google Drive 讓 PDF 直接預覽在網頁上 不須任何外掛

PDF 是一個在電腦文件資料的通用格式,想當然耳會有許多的廠商拿 PDF 規範製作一些 DataSheet、規格書、說明書、公告….等等使用,讓使用者可以打開查閱時不會因為開啟的方式不同,讓整體格式跑板。

對於一個部落客來說,有時候會需要引用廠商的 PDF 內容讓內容顯示給讀者們查閱,但在 WordPress 網路上的方式很多都是利用外掛來完成這件事情,當你想要讓 PDF 直接預覽在網頁上且不想要使用外掛輔助嵌入的話,可以來參考以下作法,使用上非常簡單只需要幾個步驟即可完成。


下面就是利用 Google Drive 的方式來嵌入在網頁上的範例。


使用教學

首先先將你要嵌入的 PDF 上傳到你的 Google Drive 空間,並開啟「共用」

將共用方式更改為「知道連結的人均可檢視」,並且點擊「進階」

如果你不想要讓檢閱者將這份 PDF 下載的話可以將這項設定勾選。

以下連結就是把上面設定完成後所得到的分享連結

https://drive.google.com/file/d/1RwyfPpkko1DEeHGLXJUqDyMG_qJTyLA-/view?usp=sharing

所得到上面的連結還不夠,需要將連結做修正。
將連結最後面的 “/” 之後的文字替代成 “preview”,就會變成下面的連結

https://drive.google.com/file/d/1RwyfPpkko1DEeHGLXJUqDyMG_qJTyLA-/preview

把剛剛改好的連結套上 iframe 並且設定屬性,將網址貼到 HTML 的內容上就大功告成囉~

<iframe src="https://drive.google.com/file/d/1RwyfPpkko1DEeHGLXJUqDyMG_qJTyLA-/preview" width="100%" height="600px"></iframe>

結語

PDF 檔案格式對於現今科技來說是非常常見的一項技術,我們可以不需要使用到任何的外掛,就可以利用 Google Drive 上的 PDF 預設版面來預覽 PDF 內容,不僅嵌入上非常容易,還可以達到節省流量的目的。推薦大家使用看看。

有話大聲說!