2015年6月11日 星期四

把 PDF 嵌入網頁中


需注意的一點,PDF 需要可以讓 Google Doc 找的到


網頁 from : 如何在網頁中嵌入 PDF 檔案
http://www.qna.tw/how-to-embed-pdf-file-into-web-page

以下截自文章:

1.
把你的 PDF 原始檔上傳到自己網站上,例如:Examle.pdf

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的線上閱讀器的網址,它是由 Google Docs 所提供的工具。
。pdf檔案網址
 例如上述檔案的網址就是:http://www.qna.tw/upload_file/EMASREPORT.pdf
 但需注意,這個網址需要經過 Escape 處理,才不會出現語法衝突的問題。
。width:600px; height:500px;
 就是設定閱讀器尺寸的 CSS 語法,也可以再加一些其他效果。

3.
完成後就可以線上閱讀了。但是,如果每天開啟網頁都立即載入的話,會太浪費頻寬。
所以可以在檔案的下載鏈結旁加入「線上閱讀」的鏈結,而在點擊後才開啟閱讀器的介面,就可以讓操作流程快速又便利了。

4.
程式碼範例:(詳細範例請看原範例)

function sample() {    
if (jQuery('#pdf_viewer').size() > 0)
{
jQuery('#pdf_viewer').remove() ;
    } else {
jQuery('#sample').append('<|| iframe id="pdf_viewer"
src="http://docs.google.com/gview?url=http://www.qna.tw/upload_file/EMASREPORT.pdf&embedded=true"
mce_src="http://docs.google.com/gview?url=http://www.qna.tw/upload_file/EMASREPORT.pdf&embedded=true" style="width:540px;height:540px;border:#888 solid 1px"
frameborder="1"||><||/iframe||>') ;
    }
}

沒有留言:

張貼留言