flexpaper阅读图片 项目中pdf上传转为图片的显示

第一步：

js中判断为pdf类型  loadPdf(kpointId, kpoint.name);

---

这一步是插入在js中的函数

第二步： 加载背景图和其他

/**
 * 加载文档预览
 * @param kpointId
 * @param name
 */
function loadPdf(kpointId, name) {
    $(".lh-play-body").css("background", "");
    $.ajax({
        url: baselocation + "/front/ajax/loadPdf.json",
        data: {
            "kpointId": kpointId,
            "courseId": courseId
        },
        type: "post",
        dataType: "text",
        success: function (result) {
            var initTitle = name;
            if (initTitle.indexOf('<b') > -1) {
                initTitle = initTitle.substring(0, initTitle.indexOf('<b'));
                alert(initTitle);
            }
            $("#loadHtml").html(result);
            var examName = $("#exam").attr("name");
            var baseLocation =$("#exam").attr("url");
            if(isNotEmpty(examName)){
                var url =baseLocation+ '/paper/doExamPaper/'+$("#exam").val();
                initTitle = initTitle+'(进入考试:<a id="href1" href="'+url+'"   target="_blank">'+examName+'</a>)';
            }
            $("#titleIdBig").html(initTitle);
        }, error: function () {
            dialog('提示', '系统繁忙，请稍后再操作', 1);
        }
    });
}

第三步：将图片路径在后台进行拼接

---

拼接图片的路径，传到页面

 /**
     * 获取文档加载地址
     *
     * @param request
     * @return
     */
    @RequestMapping("/front/ajax/loadPdf")
    public String loadPdf(HttpServletRequest request, @RequestParam("kpointId") Long kpointId, @RequestParam("courseId") Long courseId) {
        try {
            // 查询节点
            CourseKpoint courseKpoint = courseKpointService.getCourseKpointById(kpointId);

            CourseDto courseDto = courseService.getCourseInfoById(courseId);
            boolean isNxCourse = false;
            if (StringUtils.isNotEmpty(courseDto.getCompanyName())) {
                isNxCourse = true;
            }
            request.setAttribute("isNxCourse", isNxCourse);
            // 当传入数据不正确时直接返回
            if (ObjectUtils.isNull(courseKpoint) || !kpointIsOk(request, courseKpoint, courseId)) {
                return loadVideo;
            }
            request.setAttribute("courseKpoint", courseKpoint);
            String[] arr = new String[]{};
            if (StringUtils.isNotEmpty(courseKpoint.getPngUrlStr())) {
                arr = courseKpoint.getPngUrlStr().split(",");
                String toJson = gson.toJson(arr);
                request.setAttribute("imgArr", toJson);
            }
        } catch (Exception e) {
            logger.error("CourseKpointController.loadPdf---error", e);
            return setExceptionRequest(request, e);
        }
        return playPdfAjax;
    }

第四步：拼接ajax需要展示的页面

---

ajax返回页面，实现的异步拼接

<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ include file="/base.jsp" %>
<link rel="stylesheet" href="/static/edu/css/page-style.css">
<div class="">
    <div class="mt10 c-666">
        <div>
            <input type="hidden" name="${courseKpoint.paperName}" id="exam" value="${courseKpoint.examId}" url="${ctxnxb}">
            <section class="" style="margin-right: 10px;">
                <div class="lh-play-body pr">
                    <section id="" class="doc-reader-pic-controller">
                        <section class="libraryCont" style="float:none;margin: 20px auto 0;width:auto;                      ">
                            <div class="mr30">
                                <div class="doc-reader">
                                    <div class="doc-reader-mod">
                                        <div class="doc-reader-conts" style="width:100%;height:100%;">
                                            <img src="" class="doc-reader-pic nx_controller_img" id="doc-reader-pic">
                                        </div>
                                        <section class="ppt-arrow-left">
                                            <a href="javascript: void(0)" onclick="getUrl(1)" title="上一张">&nbsp;</a>
                                        </section>
                                        <section class="ppt-arrow-right">
                                            <a href="javascript: void(0)" onclick="getUrl(2)" title="下一张">&nbsp;</a>
                                        </section>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </section>
                </div>
            </section>
        </div>
    </div>
</div>
<script type="text/javascript" src="${ctximg}/static/common/flexpaper/flexpaper_flash.js?v=${v}"></script>
<%--<script src="/static/common/jquery.slimscroll.min.js" type="text/javascript"/>--%>
<script type="text/javascript">
    $(function () {
        var winW = parseInt(document.documentElement.clientHeight, 10) + parseInt(document.documentElement.scrollTop || document.body.scrollTop, 10);
        $("#viewerPlaceHolder,.doc-reader-pic-controller,.lh-play-body,.lh-r-body,.flash-play-wrap").css("height", winW - 148 + "px");
    });

    var imgArr = eval('${imgArr}');
    var _index = 0;
    if (imgArr != null && $.trim(imgArr) != '') {
        imgArr = eval("(" + '${imgArr}' + ")");
    }

    $(function () {
        if (imgArr != null && imgArr != '' && imgArr.length > 0) {
            $("#doc-reader-pic").attr("src", '<%=staticImageServer%>' + imgArr[_index]);
        }
    });

    //type=1获取上一张，type=2获取下一张
    function getUrl(type) {
        if (imgArr == null || imgArr == '' || imgArr.length <= 0) {
            return;
        }
        if (type == 1) {
            if (_index <= 0) {
                return;
            }
            _index = _index - 1;
        } else if (type == 2) {
            if (_index >= (imgArr.length - 1)) {
                return;
            }
            _index = _index + 1;
        }
        $("#doc-reader-pic").attr("src", '<%=staticImageServer%>' + imgArr[_index]);
    }
</script>

 第五步：展示的效果是左右分页，如下

备注：如果需要上下滑动需要去除上面的分页信息