簡單的移動端打開pdf文件。


業務需要,在做一個醫療產品類型的項目。其中大多是對醫療設備的一系列處理方案。最近產品需求需要給每個產品型號添加一個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頁面測試是否使用成功:

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

web端查看pdfjs打開文件

這個pdf就是pdfjs默認給的pdf文件。

然后把自己的項目映射到外網上用手機打開查看顯示為:

移動端查看pdf示例圖 移動端查看pdf示例圖 移動端查看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文件,哪接下來就是替換工作了。第一次用,暫時就了解了這么多,先總結下。后期補充。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM