Java 版在线查看 pdf

原创 于 2016-01-28 16:16:57 发布 · 6.7k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#在线查看pdf #java #pdf #spring mvc #插件

上一篇文章中，学习了上传文件。这次学习在线查看pdf内容

目前本人所学习到的三种查看方法：

1pdfbox

网上的demo很多，细心学习就可以找到。此插件有个坏处就是只能查看纯文本的pdf，图片无法显示，且无格式。（本人目前学习到的）。

开始学习 导入jar包

因为本人用的是SpringMVC maven项目。首先导入jar包

<dependency>
    <groupId>org.apache.pdfbox</groupId>
    <artifactId>pdfbox-app</artifactId>
    <version>1.8.6</version>
</dependency>
<dependency>
    <groupId>org.apache.pdfbox</groupId>
    <artifactId>fontbox</artifactId>
    <version>1.8.2</version>
</dependency>
<dependency>
    <groupId>org.apache.pdfbox</groupId>
    <artifactId>pdfbox</artifactId>
    <version>1.8.2</version>
</dependency>

前台页面

方法请求

$.post("方法名", {pdfUrl: pdf地址}, function(data) {
    $("#pView").val(data);
});

//jsp
<div id="pdfViewDiv" class="pdfViewDiv">
    <textarea style="margin: 0 auto;border: 0px; width: 1000px;"  id="pView" readonly="readonly"  ></textarea>
</div>

后台Java代码

写自己的controller方法，根据pdf地址调用readPDF（）方法

//此方法可写在公共类，所有人都可调用
public static String readPDF(String pdfUrl) {
    PDDocument helloDocument;
    String t = "";
    try {
        helloDocument = PDDocument.load(new File(pdfUrl));
        PDFTextStripper textStripper = new PDFTextStripper();
        t = textStripper.getText(helloDocument);
        helloDocument.close();
     } catch (IOException e) {
        // TODO Auto-generated catch block  
        e.printStackTrace();
     }
        return t;
 }
    看到这里相比大家就明白了，为什么不能查看图片内容了吧，此方法返回的是String格式的。。。
    如果你们的内容是纯文本并且查看的时候无格式要求可用此方法，比较简单，直接嵌在jsp页面内。（可以随意控制复制、粘贴）

2使用浏览器本省的查看功能

    此方法只需要用到pdfobject.js，无需jar包，并且不需要后台代码。
    此方法是使用浏览器本省的查看pdf功能，麻烦之处需要判断浏览器类型，并且不好控制复制、粘贴和下载的功能

开始学习 下载pdfobject.js

在网上搜索就可以找到

前台代码

在pdf查看jsp页面，需要从后台获得pdf的地址，在此页面接收地址即 url ；

<script type="text/javascript">
     var body = document.body || document.documentElement, style = body.style,vendor =['webkit','khtml','moz', 'ms', 'o'],i = 0;
       while (i < vendor.length) {
            if (typeof style[vendor[i] + 'Transition'] === 'string') {
            vendor_all = vendor[i];
           }
        i++;}
        if (vendor_all != undefined && vendor_all == "ms") {
         window.location.href($("#baseHref").val() + url );
        } else {
         var myPDF = new PDFObject({url: $("#baseHref").val() + url}).embed();
        }
</script>

此方法也相当简单，如果你的项目没有要求禁止用户复制，另存为 可用此方法。

3pdf在线预览插件（好像是火狐的js）

    此插件相当强大，可随意控制复制、另存为、下载。可自由修改，查看也是相当漂亮
    好处也是只需要js即可，不需要jar包和后台Java代码

开始学习

juqery插件库的东西
MG
别高兴太早，这东西居然要币才能下载，说好的开源呢？欺负我穷是吧。。。

为了早点挣钱下载要币的东东，我发愤图强，只好一点一点把东西复制下来学习，这么多。。。
所有js
需要的朋友，加最下面的群来找我要，这里面我没找到可以上传附件的地方
好了，代码开始

首先把需要准备的js，css放在项目中。

jsp页面

直接上代码，此页面类似于一个pdf查看器

<html  dir="ltr" mozdisallowselectionprint moznomarginboxes>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <!--#if GENERIC || CHROME-->
        <meta name="google" content="notranslate">
        <!--#endif-->
        <title></title>
        <link rel="stylesheet" href="plugins/pdf/web/viewer.css"/>
        <!--#if !PRODUCTION-->
        <link rel="resource" type="application/l10n" href="locale/locale.properties"/>
        <!--#endif-->
        <!--#if !(MOZCENTRAL || CHROME || MINIFIED)-->
        <script src="plugins/pdf/web/compatibility.js"></script>
        <!--#endif-->
        <!--#if !PRODUCTION-->
        <script src="plugins/pdf/external/webL10n/l10n.js"></script>
        <!--#endif-->
        <script src="plugins/pdf/build/pdf.js"></script>
        <!--#if !PRODUCTION-->
        <script src="plugins/pdf/web/ui_utils.js"></script>
        <script src="plugins/pdf/web/default_preferences.js"></script>
        <script src="plugins/pdf/web/preferences.js"></script>
        <script src="plugins/pdf/web/download_manager.js"></script>
        <script src="plugins/pdf/web/view_history.js"></script>
        <script src="plugins/pdf/web/pdf_rendering_queue.js"></script>
        <script src="plugins/pdf/web/page_view.js"></script>
        <script src="plugins/pdf/web/text_layer_builder.js"></script>
        <script src="plugins/pdf/web/pdf_viewer.js"></script>
        <script src="plugins/pdf/web/thumbnail_view.js"></script>
        <script src="plugins/pdf/web/document_outline_view.js"></script>
        <script src="plugins/pdf/web/document_attachments_view.js"></script>
        <script src="plugins/pdf/web/pdf_find_bar.js"></script>
        <script src="plugins/pdf/web/pdf_find_controller.js"></script>
        <script src="plugins/pdf/web/pdf_history.js"></script>
        <script src="plugins/pdf/web/secondary_toolbar.js"></script>
        <script src="plugins/pdf/web/presentation_mode.js"></script>
        <script src="plugins/pdf/web/grab_to_pan.js"></script>
        <script src="plugins/pdf/web/hand_tool.js"></script>
        <script src="plugins/pdf/web/overlay_manager.js"></script>
        <script src="plugins/pdf/web/password_prompt.js"></script>
        <script src="plugins/pdf/web/document_properties.js"></script>
        <!--#endif-->
        <!--#if !MINIFIED -->
        <script src="plugins/pdf/web/debugger.js"></script>
        <script src="plugins/pdf/web/viewer.js"></script>
        <!--#else-->
        <!--#include viewer-snippet-minified.html-->
        <!--#endif-->
        <%@ include file="../common/plugins.jsp"%>
        <script type="text/javascript">
        //此处只需要获取到pdf地址即可
          $("#pdfurl").val($("#baseHref").val() + url);
          $("#pdfPath").val(data);
         }
        </script>
    </head>
    <body tabindex="1">        
        <div id="outerContainer" class="loadingInProgress">
            <div id="sidebarContainer">
                <div id="toolbarSidebar">
                    <div class="splitToolbarButton toggled">
                        <button id="viewThumbnail" class="toolbarButtongrouptoggled" title="ShowThumbnails" tabindex="2" data-l10n-id="thumbs">
                            <span data-l10n-id="thumbs_label">Thumbnails</span>
                        </button>
                        <button id="viewOutline" class="toolbarButton group" title="Show Document Outline" tabindex="3" data-l10n-id="outline">
                            <span data-l10n-id="outline_label">Document Outline</span>
                        </button>
                        <button id="viewAttachments" class="toolbarButton group" title="Show Attachments" tabindex="4" data-l10n-id="attachments">
                            <span data-l10n-id="attachments_label">Attachments</span>
                        </button>
                    </div>
                </div>
                <div id="sidebarContent">
                    <div id="thumbnailView">
                    </div>
                    <div id="outlineView" class="hidden">
                    </div>
                    <div id="attachmentsView" class="hidden">
                    </div>
                </div>
            </div>  <!-- sidebarContainer -->

            <div id="mainContainer">
                <div class="findbar hidden doorHanger hiddenSmallView" id="findbar">
                    <label for="findInput" class="toolbarLabel" data-l10n-id="find_label">Find:</label>
                    <input id="findInput" class="toolbarField" tabindex="91">
                    <div class="splitToolbarButton">
                        <button class="toolbarButton findPrevious" title="" id="findPrevious" tabindex="92" data-l10n-id="find_previous">
                            <span data-l10n-id="find_previous_label">Previous</span>
                        </button>
                        <div class="splitToolbarButtonSeparator"></div>
                        <button class="toolbarButton findNext" title="" id="findNext" tabindex="93" data-l10n-id="find_next">
                            <span data-l10n-id="find_next_label">Next</span>
                        </button>
                    </div>
                    <input type="checkbox" id="findHighlightAll" class="toolbarField">
                    <label for="findHighlightAll" class="toolbarLabel" tabindex="94" data-l10n-id="find_highlight">Highlight all</label>
                    <input type="checkbox" id="findMatchCase" class="toolbarField">
                    <label for="findMatchCase" class="toolbarLabel" tabindex="95" data-l10n-id="find_match_case_label">Match case</label>
                    <span id="findMsg" class="toolbarLabel"></span>
                </div>  <!-- findbar -->

                <div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
                    <div id="secondaryToolbarButtonContainer">
                        <button id="secondaryPresentationMode" class="secondaryToolbarButton presentationMode visibleLargeView" title="Switch to Presentation Mode" tabindex="51" data-l10n-id="presentation_mode">
                            <span data-l10n-id="presentation_mode_label">Presentation Mode</span>
                        </button>

                        <button id="secondaryOpenFile" class="secondaryToolbarButton openFile visibleLargeView" title="Open File" tabindex="52" data-l10n-id="open_file">
                            <span data-l10n-id="open_file_label">Open</span>
                        </button>

                        <button id="secondaryPrint" class="secondaryToolbarButton print visibleMediumView" title="Print" tabindex="53" data-l10n-id="print">
                            <span data-l10n-id="print_label">Print</span>
                        </button>

                        <button id="secondaryDownload" class="secondaryToolbarButton download visibleMediumView" title="Download" tabindex="54" data-l10n-id="download">
                            <span data-l10n-id="download_label">Download</span>
                        </button>

                        <a href="#" id="secondaryViewBookmark" class="secondaryToolbarButton bookmark visibleSmallView" title="Current view (copy or open in new window)" tabindex="55" data-l10n-id="bookmark">
                            <span data-l10n-id="bookmark_label">Current View</span>
                        </a>

                        <div class="horizontalToolbarSeparator visibleLargeView"></div>

                        <button id="firstPage" class="secondaryToolbarButton firstPage" title="Go to First Page" tabindex="56" data-l10n-id="first_page">
                            <span data-l10n-id="first_page_label">Go to First Page</span>
                        </button>
                        <button id="lastPage" class="secondaryToolbarButton lastPage" title="Go to Last Page" tabindex="57" data-l10n-id="last_page">
                            <span data-l10n-id="last_page_label">Go to Last Page</span>
                        </button>

                        <div class="horizontalToolbarSeparator"></div>

                        <button id="pageRotateCw" class="secondaryToolbarButton rotateCw" title="Rotate Clockwise" tabindex="58" data-l10n-id="page_rotate_cw">
                            <span data-l10n-id="page_rotate_cw_label">Rotate Clockwise</span>
                        </button>
                        <button id="pageRotateCcw" class="secondaryToolbarButton rotateCcw" title="Rotate Counterclockwise" tabindex="59" data-l10n-id="page_rotate_ccw">
                            <span data-l10n-id="page_rotate_ccw_label">Rotate Counterclockwise</span>
                        </button>

                        <div class="horizontalToolbarSeparator"></div>

                        <button id="toggleHandTool" class="secondaryToolbarButton handTool" title="Enable hand tool" tabindex="60" data-l10n-id="hand_tool_enable" style="display: none;">
                            <span data-l10n-id="hand_tool_enable_label">Enable hand tool</span>
                        </button>

                        <div class="horizontalToolbarSeparator"></div>

                        <button id="documentProperties" class="secondaryToolbarButton documentProperties" title="Document Properties" tabindex="61" data-l10n-id="document_properties">
                            <span data-l10n-id="document_properties_label">Document Properties</span>
                        </button>
                    </div>
                </div>  <!-- secondaryToolbar -->

                <div class="toolbar">
                    <div id="toolbarContainer">
                        <div id="toolbarViewer">
                            <div id="toolbarViewerLeft">
                                <button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" tabindex="11" data-l10n-id="toggle_sidebar">
                                    <span data-l10n-id="toggle_sidebar_label">Toggle Sidebar</span>
                                </button>
                                <div class="toolbarButtonSpacer"></div>
                                <button id="viewFind" class="toolbarButton group hiddenSmallView" title="Find in Document" tabindex="12" data-l10n-id="findbar">
                                    <span data-l10n-id="findbar_label">Find</span>
                                </button>
                                <div class="splitToolbarButton">
                                    <button class="toolbarButton pageUp" title="Previous Page" id="previous" tabindex="13" data-l10n-id="previous">
                                        <span data-l10n-id="previous_label">Previous</span>
                                    </button>
                                    <div class="splitToolbarButtonSeparator"></div>
                                    <button class="toolbarButton pageDown" title="Next Page" id="next" tabindex="14" data-l10n-id="next">
                                        <span data-l10n-id="next_label">Next</span>
                                    </button>
                                </div>
                                <label id="pageNumberLabel" class="toolbarLabel" for="pageNumber" data-l10n-id="page_label">Page: </label>
                                <input type="number" id="pageNumber" class="toolbarField pageNumber" value="1" size="4" min="1" tabindex="15">
                                <span id="numPages" class="toolbarLabel"></span>
                            </div>
                            <div id="toolbarViewerRight">
                                <button id="presentationMode" class="toolbarButton presentationMode hiddenLargeView" title="Switch to Presentation Mode" tabindex="31" data-l10n-id="presentation_mode">
                                    <span data-l10n-id="presentation_mode_label">Presentation Mode</span>
                                </button>

                                <button id="openFile" class="toolbarButton openFile hiddenLargeView" title="Open File" tabindex="32" data-l10n-id="open_file" style="display: none;">
                                    <span data-l10n-id="open_file_label">Open</span>
                                </button>

                                <button id="print" class="toolbarButton print hiddenMediumView" title="Print" tabindex="33" data-l10n-id="print">
                                    <span data-l10n-id="print_label">Print</span>
                                </button>

                                <button id="download" class="toolbarButton download hiddenMediumView" title="Download" tabindex="34" data-l10n-id="download" style="display: none;">
                                    <span data-l10n-id="download_label">Download</span><input type="hidden" id = "pdfurl" name = "pdfurl" value="" ><input type="hidden" id="pdfPath" name="pdfPath"><input type="hidden" id="id" name="id" value="<%=request.getParameter("id")%>">
                                    <input type="hidden" id="baseHref" name="baseHref" value="<%=basePath%>">
                                </button>
                                <!-- <div class="toolbarButtonSpacer"></div> -->
                                <a href="#" id="viewBookmark" class="toolbarButton bookmark hiddenSmallView" title="Current view (copy or open in new window)" tabindex="35" data-l10n-id="bookmark" style="display: none;">
                                    <span data-l10n-id="bookmark_label">Current View</span>
                                </a>

                                <div id="vTSHSV" class="verticalToolbarSeparator hiddenSmallView" style="display: none;"></div>

                                <button id="secondaryToolbarToggle" class="toolbarButton" title="Tools" tabindex="36" data-l10n-id="tools">
                                    <span data-l10n-id="tools_label">Tools</span>
                                </button> 
                            </div>
                            <div class="outerCenter">
                                <div class="innerCenter" id="toolbarViewerMiddle">
                                    <div class="splitToolbarButton">
                                        <button id="zoomOut" class="toolbarButton zoomOut" title="Zoom Out" tabindex="21" data-l10n-id="zoom_out">
                                            <span data-l10n-id="zoom_out_label">Zoom Out</span>
                                        </button>
                                        <div class="splitToolbarButtonSeparator"></div>
                                        <button id="zoomIn" class="toolbarButton zoomIn" title="Zoom In" tabindex="22" data-l10n-id="zoom_in">
                                            <span data-l10n-id="zoom_in_label">Zoom In</span>
                                        </button>
                                    </div>
                                    <span id="scaleSelectContainer" class="dropdownToolbarButton">
                                        <select id="scaleSelect" title="Zoom" tabindex="23" data-l10n-id="zoom">
                                            <option id="pageAutoOption" title="" value="auto" selected="selected" data-l10n-id="page_scale_auto">Automatic Zoom</option>
                                            <option id="pageActualOption" title="" value="page-actual" data-l10n-id="page_scale_actual">Actual Size</option>
                                            <option id="pageFitOption" title="" value="page-fit" data-l10n-id="page_scale_fit">Fit Page</option>
                                            <option id="pageWidthOption" title="" value="page-width" data-l10n-id="page_scale_width">Full Width</option>
                                            <option id="customScaleOption" title="" value="custom"></option>
                                            <option title="" value="0.5">50%</option>
                                            <option title="" value="0.75">75%</option>
                                            <option title="" value="1">100%</option>
                                            <option title="" value="1.25">125%</option>
                                            <option title="" value="1.5">150%</option>
                                            <option title="" value="2">200%</option>
                                            <option title="" value="3">300%</option>
                                            <option title="" value="4">400%</option>
                                        </select>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div id="loadingBar">
                            <div class="progress">
                                <div class="glimmer">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <menu type="context" id="viewerContextMenu">
                    <menuitem id="contextFirstPage" label="First Page"
                              data-l10n-id="first_page"></menuitem>
                    <menuitem id="contextLastPage" label="Last Page"
                              data-l10n-id="last_page"></menuitem>
                    <menuitem id="contextPageRotateCw" label="Rotate Clockwise"
                              data-l10n-id="page_rotate_cw"></menuitem>
                    <menuitem id="contextPageRotateCcw" label="Rotate Counter-Clockwise"
                              data-l10n-id="page_rotate_ccw"></menuitem>
                </menu>

                <div id="viewerContainer" tabindex="0">
                    <div id="viewer" class="pdfViewer"></div>
                </div>

                <div id="errorWrapper" hidden='true'>
                    <div id="errorMessageLeft">
                        <span id="errorMessage"></span>
                        <button id="errorShowMore" data-l10n-id="error_more_info">
                            More Information
                        </button>
                        <button id="errorShowLess" data-l10n-id="error_less_info" hidden='true'>
                            Less Information
                        </button>
                    </div>
                    <div id="errorMessageRight">
                        <button id="errorClose" data-l10n-id="error_close">
                            Close
                        </button>
                    </div>
                    <div class="clearBoth"></div>
                    <textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
                </div>
            </div> <!-- mainContainer -->

            <div id="overlayContainer" class="hidden">
                <div id="passwordOverlay" class="container hidden">
                    <div class="dialog">
                        <div class="row">
                            <p id="passwordText" data-l10n-id="password_label">Enter the password to open this PDF file:</p>
                        </div>
                        <div class="row">
                            <input type="password" id="password" class="toolbarField" />
                        </div>
                        <div class="buttonRow">
                            <button id="passwordCancel" class="overlayButton"><span data-l10n-id="password_cancel">Cancel</span></button>
                            <button id="passwordSubmit" class="overlayButton"><span data-l10n-id="password_ok">OK</span></button>
                        </div>
                    </div>
                </div>
                <div id="documentPropertiesOverlay" class="container hidden">
                    <div class="dialog">
                        <div class="row">
                            <span data-l10n-id="document_properties_file_name">File name:</span> <p id="fileNameField">-</p>
                        </div>
                        <div class="row">
                            <span data-l10n-id="document_properties_file_size">File size:</span> <p id="fileSizeField">-</p>
                        </div>
                        <div class="separator"></div>
                        <div class="row">
                            <span data-l10n-id="document_properties_title">Title:</span> <p id="titleField">-</p>
                        </div>
                        <div class="row">
                            <span data-l10n-id="document_properties_author">Author:</span> <p id="authorField">-</p>
                        </div>
                        <div class="row">
                            <span data-l10n-id="document_properties_subject">Subject:</span> <p id="subjectField">-</p>
                        </div>
                        <div class="row">
                            <span data-l10n-id="document_properties_keywords">Keywords:</span> <p id="keywordsField">-</p>
                        </div>
                        <div class="row">
                            <span data-l10n-id="document_properties_creation_date">Creation Date:</span> <p id="creationDateField">-</p>
                        </div>
                        <div class="row">
                            <span data-l10n-id="document_properties_modification_date">Modification Date:</span> <p id="modificationDateField">-</p>
                        </div>
                        <div class="row">
                            <span data-l10n-id="document_properties_creator">Creator:</span> <p id="creatorField">-</p>
                        </div>
                        <div class="separator"></div>
                        <div class="row">
                            <span data-l10n-id="document_properties_producer">PDF Producer:</span> <p id="producerField">-</p>
                        </div>
                        <div class="row">
                            <span data-l10n-id="document_properties_version">PDF Version:</span> <p id="versionField">-</p>
                        </div>
                        <div class="row">
                            <span data-l10n-id="document_properties_page_count">Page Count:</span> <p id="pageCountField">-</p>
                        </div>
                        <div class="buttonRow">
                            <button id="documentPropertiesClose" class="overlayButton"><span data-l10n-id="document_properties_close">Close</span></button>
                        </div>
                    </div>
                </div>
            </div>  <!-- overlayContainer -->

        </div> <!-- outerContainer -->
        <div id="printContainer"></div>
        <!--#if !(FIREFOX || MOZCENTRAL)-->
        <!--#include viewer-snippet-mozPrintCallback-polyfill.html-->
        <!--#endif--->
    </body>
</html>

上图
在线查看

爱学习的朋友们加 刚建的qq群交流学习<程序员之家 227493974>

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值