簡單的移動端開啟pdf檔案。

標籤：webapps   PDF檔案   檔案   二維   圖片   按鈕   sed   com   sse   

業務需要，在做一個醫學產品類型的項目。其中大多是對醫療設備的一系列處理方案。最近產品需求需要給每個產品型號添加一個pdf類型的產品使用說明詳情。

簡單的說就是在產品這個表中加一個欄位儲存pdf檔案，使用者在端掃描二維碼可以查看這個pdf檔案的內容。這是需要，接下來是具體的實現：

這個東西之前是沒有接觸過的，只知道很多應用內建的有pdf解析器，比如qq。qq解析pdf檔案樣式是很好看的，但是目前沒有找到類qq方面的解析pdf方法，在網上搜尋用到的最多的就是使用pdf.js去解析。

首先去官網上下載pdfjs。我下載的地址為：http://mozilla.github.io/pdf.js/，pdf的demo 必須在web項目中開啟，所以必須得部署web項目。

下載完之後放在項目的webapps下面：

然後查看pdf/web/viewer.js檔案。

ctrl+f尋找DEFAULT_URL 會尋找到這樣var DEFAULT_URL = ‘compressed.tracemonkey-pldi-09.pdf‘;

這個是這個pdfjs預設的js檔案，可以先寫個demo.jsp頁面測試是否使用成功：

然後再網上上訪問這個頁面成功的話可以看到：

這個pdf就是pdfjs預設給的pdf檔案。

然後把自己的項目映射到外網上用手機開啟查看顯示為：

  

這個成功之後，接下來是查看自己傳入的pdf檔案：

我們要把var DEFAULT_URL = ‘compressed.tracemonkey-pldi-09.pdf‘;設定為空白值：var DEFAULT_URL = ‘‘;

用一個點擊按鈕事件去查看傳入的pdf檔案：

如果想替換pdfjs預設的檔案需要在${pageContext.request.contextPath}/pdf/web/viewer.html?file=？去傳入所需要預覽的pdf檔案。

這個id是我資料表中的一個要查看的產品資訊的id，後台根據這個id查詢出所需要的pdf檔案（這個pdf檔案是在之前傳入的，存放在資料庫的表中）。

我們將pdf以檔案流的方式傳入 ，所以需要後台代碼處理 ，也就是方法：/test/displayPDF/{id} 。如下：

這樣，在頁面上點擊按鈕就可以查看相應的pdf檔案了。其實也就是替換預設的pdf檔案，只要第一次的測試順利開啟了js預設給的pdf檔案，哪接下來就是替換工作了。第一次用，暫時就瞭解了這麼多，先總結下。後期補充。

簡單的移動端開啟pdf檔案。