实现在线查看pdf文件(Java前后端代码)

1.引入pdfJs

下载pdfJs

 点击Download

下载到本地是一个zip文件,在项目中建立一个pdfJs文件夹,将解压的文件全部拷贝至这个文件夹,

好,接下来是代码:

 //根据项目id查看合同
    @ResponseBody
    @GetMapping("/selProjectImgById")
    public void selProjectImgById(Long projectId,HttpServletRequest request, HttpServletResponse response) throws IOException {
        System.out.println("查看合同");
        ProjectInfo one = projectInfoService.getOne(new QueryWrapper<ProjectInfo>().eq("PROJECT_ID", projectId).select("PROJECT_TRACT_IMG","PROJECT_NAME"));
        byte[] projectTractImg = one.getProjectTractImg();

        response.setContentType("application/octet-stream");
        response.setCharacterEncoding("utf-8");
        response.setHeader("Content-Disposition", "attachment;filename=" + one.getProjectName()+".pdf");

        byte[] buff = new byte[1024];
        BufferedInputStream bis = null;
        OutputStream os = null;
        try {
            System.out.println("==================pdf处理开始==================");
            os = response.getOutputStream();
            //获得PDF文件流，核心代码
            InputStream is = new ByteArrayInputStream(projectTractImg);
            System.out.println("获取流结束。。。。");
            bis = new BufferedInputStream(is);

            int i = 0;
            while ((i = bis.read(buff)) != -1) {
                os.write(buff, 0, i);
                os.flush();

            }

        } catch (Exception e) {
            System.out.println("pdf处理出现异常：" + e.getMessage() + "; ");
        } finally {
            try {
                bis.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }



    }

前端:

 //点击查看合同按钮
        $("#projectTractImg").click(function (){
            layer.msg("请稍等")
            window.open("${pageContext.request.contextPath}/js/pdfJs/web/viewer.html?file="
                +encodeURIComponent("${pageContext.request.contextPath}/projectInfo/selProjectImgById?projectId="+ project.projectId +""));
        })

前端代码释义:

window.open:打开新窗口

"${pageContext.request.contextPath}/js/pdfJs/web/viewer.html?file=",此路径就是下载的pdfJs的一个静态页面,file是我们从后端查询出来的pdf的二进制数据,所有后面的路径就是给后端发送请求获取数据

最终效果: