需求：
在預覽這個pdf文件時候，PC端可以直接 放地址， 在手機端直接放會變成下載，所以就要使用 pdfjs 來實現
背景：
文件地址： http://www.alioss.test.com/files/laofan.pdf
我的項目域名： http://www.test.com
官網地址： http://mozilla.github.io/pdf.js/
下載穩定版本
目錄結構如下。你要先訪問 web目錄里的 viewer.html
把文件放到你得項目靜態文件里
那么你訪問 www.test.com/web/viewer.html ， 如下圖
項目中配置使用
nginx 配置反向代理，此時就代表 /alioss/ 在項目中就代替了 http://www.alioss.test.com
#代理第三方文件訪問
location /alioss/ {
proxy_pass http://www.alioss.test.com/;
}
php文件接收訪問的文件 ，格式為：http://www.test.com/file_view?file_url=http://www.alioss.test.com/files/laofan.pdf
/**
*預覽
* 依然范兒特西
*/
public function file_view(Request $request)
{
$file_url = input("file_url");
$parts = parse_url($file_url);
//此處的 /alioss/ 代表 nginx反向代理的名字替換，$parts 里邊有了 / ， 所以此處寫 /alioss
$fally_path_url = '/alioss'.$parts['path'];
$this->assign("file_url",$fally_path_url);
return $this->fetch('webview/file_view');
}
簡單使用就用這個就可以
<iframe src="__CPLUGINS__/pdfjs-2.4.456/web/viewer.html?file={$file_url}" frameborder="0" style="width: 100vw; height:100vh;"></iframe>
html 完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>文件預覽</title>
</head>
<body style="margin: 0;">
<iframe id="xy" src="__CPLUGINS__/pdfjs-2.4.456/web/viewer.html?file={$file_url}" frameborder="0" style="width: 100vw; height:100vh;"></iframe>
</body>
<script type="text/javascript" src="__MJS__/jquery-2.1.0.js" ></script>
<script type="text/javascript">
$('#xy').load(function(){
$('#xy').contents().find('body').find('#secondaryToolbarToggle').hide();
$('#xy').contents().find('body').find('#viewFind').hide();
$('#xy').contents().find('body').find('#sidebarToggle').hide();
$('#xy').contents().find('body').find('#toolbarViewerMiddle').css('float','right');
});
</script>
</html>
過程中出現的問題
問題1 ： file origin does not match viewer
因為我是本服務器 遠程訪問 阿里oss 的文件資源， 出現跨域，
解決辦法 網上說是 /web/viewer.js 要注釋掉判斷信息
if (origin !== viewerOrigin && protocol !== "blob:") {
// throw new Error("file origin does not match viewer's");
}
注釋之后，還是報錯跨域，
解決辦法： nginx代理 模式
問題2 頁面顯示不全，之后頭部一點，下邊一大片空白，
解決辦法： 在 iframe 里邊 加 行內樣式
frameborder="0" style="width: 100vw; height:100vh;"
問題 3 ： 整個頁面左右晃動
解決辦法，body里 加
style="margin: 0;"