如何在網頁中嵌入 PDF 檔案?

6 Comments / 27,934 views

設計網站時常會發現,許多資訊已有現成檔案,若是另外作成網頁是費時費功,但是要網友下載閱讀也是麻煩。

最明顯的情況就是產品使用文件,像電子產品說明書之類的。

對於這種情況,最好的方式當然就是直接把這些檔案嵌入網頁,讓網友可以直接瀏覽,就能兼顧各種情況。

這裡要介紹的,就是如何把 PDF 這種檔案格式嵌入網頁。

步驟

  1. 把你的 PDF 原始檔上傳到自己網站上,例如:EMASREPORT.pdf (解讀 EMAS 經絡檢測報告)
  2. 利用下列語法,將線上瀏覽介面嵌入:
    <iframe src=”http://docs.google.com/gview?url=pdf檔案網址&embedded=true” style=”width:600px; height:500px;” frameborder=”0″></iframe>
    其中:

    • http://docs.google.com/gview
      就是這個線上閱讀器的網址,它是由 Google Docs 所提供的工具。
    • pdf檔案網址
      例如上述檔案的網址就是:https://www.qna.tw/upload_file/EMASREPORT.pdf
      但需注意,這個網址需要經過 Escape 處理,才不會出現語法衝突的問題。
    • width:600px; height:500px;
      就是設定閱讀器尺寸的 CSS 語法,也可以再加一些其他效果。
  3. 完成後就可以線上閱讀了。但是,如果每天開啟網頁都立即載入的話,會太浪費頻寬。所以可以在檔案的下載鏈結旁加入「線上閱讀」的鏈結,而在點擊後才開啟閱讀器的介面,就可以讓操作流程快速又便利了。

實例

  • 解讀 EMAS 經絡檢測報告
    下載檔案:EMASREPORT.pdf
  • 線上閱讀:請按這裡
    另外,需注意線上閱讀時,檔案是先傳到 Google Docs 那邊,再將檔案轉成閱讀器的格式傳回。所以檔案太大的話,會需要一點時間。最好控制在 5M 以內。或者先將檔案上傳到 Google Docs 再由閱讀器開啟,節省上傳的時間和頻寬。

VN:F [1.9.22_1171]
Rating: 7.3/10 (14 votes cast)
VN:F [1.9.22_1171]
Rating: -1 (from 1 vote)
如何在網頁中嵌入 PDF 檔案?, 7.3 out of 10 based on 14 ratings

Post to Twitter Post to Plurk Post to Digg Post to Facebook

Facebook comments:

6 Comments (+add yours?)

  1. dagong
    8 月 11, 2011 @ 22:08:43

    诚心求教:

    步骤3的“點擊後才開啟閱讀器的介面”是怎么实现的,很棒的功能哦,希望管理员可以解答

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

  2. 管理員
    8 月 11, 2011 @ 22:28:51

    檢視原始檔你就知道囉,就是利用 jQuery 嵌入 iFrame 來載入 pdf viewer 而已。

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

  3. dagong
    8 月 12, 2011 @ 00:11:35

    感谢管理员解答,不过我是新手,请问如何“檢視原始檔”?或者有没有更为详尽的教材?

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

  4. dagong
    8 月 12, 2011 @ 00:20:38

    哦,我知道“檢視原始檔”就是查看网页源代码的意思了,
    就是尝试了很久没弄懂如何利用 jQuery 嵌入 iFrame 來載入 pdf viewer ?
    是否需要事先做一些设置,或者下载特定的jQuery来调用?

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

  5. 管理員
    8 月 12, 2011 @ 00:26:13

    請搜尋源代碼中的 sample 字樣,就是透過 javascript function 去嵌入 iframe 而已。

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

  6. dagong
    8 月 12, 2011 @ 00:53:07

    终于搞定了,有很开心哦,感谢管理员热心解答。

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

Leave a Reply

You must be logged in to post a comment.