前言

因為工作需要，開發移動端線上閱讀PDF文件。所以找到了PDF.js，但PDF檔案是儲存在另外獨立伺服器，所以常規使用PDF.js會存在問題，經過搜尋查詢，實踐解決了問題。

這邊提供嘗試過的2種有效方法

1.繪製頁面

html 

<div> <h1><a href="javascript:void(0)" target="_blank" onclick="showPdf()">顯示pdf文件</a></h1> <div id="container" style="display: none;"> <div class="lightbox"></div> <div id="pop" class="pop"></div> </div></div>

js

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="./pdfjs/build/pdf.js" type="text/javascript"></script> <script src="./pdfjs/build/pdf.worker.js" type="text/javascript"></script> <script type="text/javascript"> function showall(url, page, id) { PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) { pdf.getPage(page).then(function getPageHelloWorld(page) { var scale = 1.0; var viewport = page.getViewport(scale); var canvas = document.getElementById(id); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); }); }); }
function showPdf() { var url = 'http://otdddh8nn.bkt.clouddn.com/yxxj.pdf';//pdf檔案地址 $("#container").show(); $("#pop").empty(); PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) { pages = pdf.numPages; for(var i = 1; i < pdf.numPages; i++) { var id = 'page-id-' + i; $("#pop").append('<canvas id="' + id + '"></canvas>'); showall(url, i, id); } }); }
</script>

引入 pdf.worker.js 、 pdf.js  兩個檔案和jq，通過呼叫檔案api繪製PDF頁面.

特點 可以根據自己需要構建頁面，對手機網速有要求。

備註 蘋果6 ios11系統會報Unhandled Promise Rejection: UnexpectedResponseException: Unexpected server response (206) while retrieving PDF  可能和儲存伺服器不支援斷點續傳有關係（有知道的大佬可以告訴我下）所以後面改用以下方法。

2.使用viewer.html

html

<iframe style="width:100%;height:100%;" src="./pdfjs/web/viewer.html?pdf_url=http://otdh8nn.bkt.clouddn.com/yxxj.pdf">
</iframe>

viewer.js 註釋掉 DEFAULT_URL

新建viewer.php 

<?phpecho file_get_contents($_GET['pdf_url']);

viewer.html 頁面底部新增

<script>
    var DEFAULT_URL = './viewer.php?pdf_url='+getQueryStringByName('pdf_url');
    function getQueryStringByName(name){ var result = location.search.match(new RegExp("[\?\&]" + name+ "=([^\&]+)","i")); if(result == null || result.length < 1){ return ""; } return result[1];    }</script>

在頁面新增 iframe 標籤開啟viewer.html  傳引數pdf_url 值為pdf地址 ；

在viewer.html 修改預設地址default_url 為viewer.php,傳引數pdf_url ；

而在viewer.php頁面將pdf_url 網址的pdf檔案讀取成字串返回給前臺顯示 。

特點 速度很快，上方有選單，可以根據自己需要修改註釋掉了選單部分功能。

單獨傳參可以開啟頁面，實現跨域訪問

http://localhost/web/pdfjs/web/viewer.html?pdf_url =http://otq6dd8nn.bkt.clouddn.com/yxxj.pdf

補充 

個人使用的是 pdfjs-1.9 版本 包含web和build2個資料夾

官方FAQ

Can I load a PDF fromanother server (cross domain request)?能否從其它伺服器讀取pdf檔案（跨域訪問）?

Notby default, but it is possible. PDF.js runs with the same permissions as anyother JavaScript code, which means it cannot do cross origin requests (see Same origin policyand an example).There are some possible ways to get around this such as using CORS(seealso unsafeheaders issueand Access-Control-Expose-Headersissue) or setting up a proxy on your server thatwill feed PDF.js the PDF file. Both workarounds are out of the scope of thePDF.js project and we will not provide code to do either.

不預設，但它是可能的。 PDF.js執行具有相同許可權的任何其他JavaScript程式碼，這意味著它不能跨出自身請求（見同根同源的政策和示例） 。有一些可能的方法來解決這個問題，如使用CORS (seealsounsafe headers issueandAccess-Control-Expose-Headersissue)，或者設定你的伺服器上的代理，將PDF檔案提供給PDF.js。這兩種解決方法都出了PDF.js專案的範圍，我們將不提供程式碼，請執行。

第二種方法實際上就是用php自身先讀取文件再開啟，網上有說用讀取檔案流方式可行，原理一致

我個人php 沒有仔細研究   但java一般都是採用這個方法。

也貼一下程式碼

function getStream(){     $filepath = 'http://otq68ddnn.bkt.clouddn.com/yxxj.pdf';    $fp = fopen($filepath,"r");    Header('Content-Type: application/pdf');    header('Access-Control-Allow-Origin:*');    //Header("Content-type: application/octet-stream");    Header("Accept-Ranges: bytes");    Header("Content-Disposition: attachment; filename=yxxj.pdf");    $buffer = 1024;    while (!feof($fp)) {    $file_con = fread($fp,$buffer);     echo $file_con;    }
    fclose($fp);}
function sendfile( $fullPath ){    $fsize = filesize($fullPath);    header("Pragma: public");    header("Expires: 0");    header("Cache-Control: must-revalidate, post-check=0, pre-check=0");    header("Cache-Control: private",false);    header("Content-Type: application/pdf");    header('Access-Control-Allow-Origin:*');    Header("Accept-Ranges: bytes");    header("Content-Disposition: attachment; filename=\"".basename($fullPath)."\";" );    header("Content-Transfer-Encoding: binary");    header("Content-Length: ".$fsize);    ob_clean();    flush();    readfile( $fullPath );}

感謝 參考來源

2018-05-21 更新

JAVA實現

後面又用java開發了web版本，也貼下程式碼。

1.java服務端 這裡我是直接寫在servlet,其他需要自己建立 response 

直接從雲伺服器獲取資料，輸出給前端

response.setContentType("application/pdf");
ServletOutputStream sos = response.getOutputStream();
					
String destUrl="http://osq69h8nn.bkt.clouddn.com/BB8B.pdf";
URL url = new URL(destUrl);
HttpURLConnection httpUrl = (HttpURLConnection) url.openConnection();
//連線指定的網路資源
httpUrl.connect();
//獲取網路輸入流
BufferedInputStream bis = new BufferedInputStream(httpUrl.getInputStream());
int b;
while((b = bis.read())!=-1) {
	sos.write(b);
}
sos.close();
bis.close();
return;

如果是讀取伺服器檔案，可以改為讀取檔案方式（我的做法是讀取WEB-INF下的PDF檔案，微笑）

InputStream is = new FileInputStream(path);

2.viewer.html 新增，務必放在 引用viewer.js前面 或者直接寫到viewer.js前面

<script>
	//獲取資料流
	var PDFData = ""; //定義一個空變數  
	$.ajax({  
	    type: "get", //如果報405錯誤就把post改成get  
	    async: false,  
	    mimeType: 'text/plain; charset=x-user-defined',  
	    url: "../../article.do?type=getPdf", //請求伺服器資料 
	    success: function(data) {  
		        PDFData = data; //data就是byte[]陣列，下面有介紹  
	    }  
	});  
	var rawLength = PDFData.length;  
	//轉換成pdf.js能直接解析的Uint8Array型別,見pdf.js-4068    
	var array = new Uint8Array(new ArrayBuffer(rawLength));  
	for (var i = 0;i < rawLength; i++) {  
		 array[i] = PDFData.charCodeAt(i) & 0xff;  
	}  
	var pdf_url = array;  
	//-----------
	 
</script>

3.viewer.js 修改

var DEFAULT_URL = pdf_url;

唯一要注意的就是 js請求方法的呼叫