RSS如何在網頁中嵌入 PDF 檔案？
9 月 24
資訊應用 Flash, Google, PDF 6 Comments / 28,335 views
設計網站時常會發現，許多資訊已有現成檔案，若是另外作成網頁是費時費功，但是要網友下載閱讀也是麻煩。
最明顯的情況就是產品使用文件，像電子產品說明書之類的。
對於這種情況，最好的方式當然就是直接把這些檔案嵌入網頁，讓網友可以直接瀏覽，就能兼顧各種情況。
這裡要介紹的，就是如何把 PDF 這種檔案格式嵌入網頁。
步驟
- 把你的 PDF 原始檔上傳到自己網站上，例如：EMASREPORT.pdf (解讀 EMAS 經絡檢測報告)
- 利用下列語法，將線上瀏覽介面嵌入：
<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 語法，也可以再加一些其他效果。
- http://docs.google.com/gview
- 完成後就可以線上閱讀了。但是，如果每天開啟網頁都立即載入的話，會太浪費頻寬。所以可以在檔案的下載鏈結旁加入「線上閱讀」的鏈結，而在點擊後才開啟閱讀器的介面，就可以讓操作流程快速又便利了。
實例
- 解讀 EMAS 經絡檢測報告
下載檔案：EMASREPORT.pdf - 線上閱讀：請按這裡
另外，需注意線上閱讀時，檔案是先傳到 Google Docs 那邊，再將檔案轉成閱讀器的格式傳回。所以檔案太大的話，會需要一點時間。最好控制在 5M 以內。或者先將檔案上傳到 Google Docs 再由閱讀器開啟，節省上傳的時間和頻寬。
8 月 11, 2011 @ 22:08:43
诚心求教：
步骤3的“點擊後才開啟閱讀器的介面”是怎么实现的，很棒的功能哦，希望管理员可以解答
8 月 11, 2011 @ 22:28:51
檢視原始檔你就知道囉，就是利用 jQuery 嵌入 iFrame 來載入 pdf viewer 而已。
8 月 12, 2011 @ 00:11:35
感谢管理员解答，不过我是新手，请问如何“檢視原始檔”？或者有没有更为详尽的教材？
8 月 12, 2011 @ 00:20:38
哦，我知道“檢視原始檔”就是查看网页源代码的意思了，
就是尝试了很久没弄懂如何利用 jQuery 嵌入 iFrame 來載入 pdf viewer ？
是否需要事先做一些设置，或者下载特定的jQuery来调用？
8 月 12, 2011 @ 00:26:13
請搜尋源代碼中的 sample 字樣，就是透過 javascript function 去嵌入 iframe 而已。
8 月 12, 2011 @ 00:53:07
终于搞定了，有很开心哦，感谢管理员热心解答。