通过pdf.js预览PDF文件

1、预览PDF文件前段页面demo

下载js插件（官网有api可以看看的），http://mozilla.github.io/pdf.js/

<html>
<head>
<meta charset="UTF-8"></meta>
<title>PDF.js 测试浏览器预览PDF文件</title>
<style type="text/css">
#the-canvas {
   border: 1px solid black;
   z-index: -1;
   top: 0;
   background: #fff;
}
</style>
<script src="/pdfjs-1.9.426-dist/build/pdf.js"></script>
</head>
<body style="text-align: center;">
   <div>
       <button id="prev">上一页</button>
         
       <button id="next">下一页</button>
            <span>页码: <span id="page_num"></span>
           / <span id="page_count"></span></span>
   </div>
   <canvas id="the-canvas"></canvas>
</body>
<script type="text/javascript">
   //将此处的url替换为你请求的PDF流即可~
   var url = "/showPdf";
   PDFJS.workerSrc = '/pdfjs-1.9.426-dist/build/pdf.worker.js';

ctx.fillText("请等一会儿", 100, 100);
</script>
</html>

2、后台接口

本人后台用的是spring boot

因为我的office文件转换工程师部署在window服务器上的，所以涉及到了跨域的问题

解决方法，在控制器加上

package officeutil.web.controller;

import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.OutputStream;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;

import officeutil.web.utils.Tool;

/**
* 预览PDF文件和缩略图文件, 暂时允许所有域名地址的请求
*
* @author eo.li
*
*/
@Controller
// 允许192.168.1.108的服务器请求
//@CrossOrigin(origins = "http://192.168.1.108", maxAge = 3600)
// 允许所有的服务器请求
@CrossOrigin
public class PreviewController {

   @Value("${pdf.path}")
   private String pdf_path;
   @Value("${picture.path}")
   private String picture_path;

@RequestMapping("/showPdf")
public void showPdf(HttpServletRequest request, HttpServletResponse response) {

System.out.println(request.getRemoteHost());

String projectId = Tool.obj2Str(request.getParameter("projectId"));
String fileName = Tool.obj2Str(request.getParameter("fileName"));

fileName = fileName.substring(0, fileName.lastIndexOf(".")) + ".pdf";

String fullFileName = String.format(pdf_path + "%s/%s", projectId, fileName);

       if (Tool.isEmpty(fileName)) {
           File baseFile = new File(pdf_path + projectId);
           File[] files = baseFile.listFiles();
           if (files.length > 0) {
               fullFileName = files[0].getPath();
           } else {
               fullFileName = pdf_path + "noPdf.pdf";
           }
       }

       // 文件不存在的情况
       if (!new File(fullFileName).exists()) {
           fullFileName = pdf_path + "noPdf.pdf";
       }

       response.setContentType("application/pdf");
       response.setHeader("Access-Control-Allow-Headers",
               "Content-Type, x-requested-with, X-Custom-Header, HaiYi-Access-Token");
       response.setHeader("Access-Control-Allow-Methods", "POST, GET, DELETE, OPTIONS, DELETE");
       FileInputStream fis = null;
       OutputStream os = null;
       try {
           fis = new FileInputStream(fullFileName);
           os = response.getOutputStream();
           int count = 0;
           byte[] buffer = new byte[1024 * 1024];
           while ((count = fis.read(buffer)) != -1)
               os.write(buffer, 0, count);
           os.flush();
       } catch (Exception e) {
       } finally {
           if (os != null)
               try {
                   os.close();
               } catch (IOException e) {
                   // TODO Auto-generated catch block
               }
           if (fis != null)
               try {
                   fis.close();
               } catch (IOException e) {
                   // TODO Auto-generated catch block
               }
       }
   }

@RequestMapping("/showPic")
public void showPic(HttpServletRequest request, HttpServletResponse response) throws IOException {

String projectId = Tool.obj2Str(request.getParameter("projectId"));
String fileName = Tool.obj2Str(request.getParameter("fileName"));

fileName = fileName.substring(0, fileName.lastIndexOf(".")) + ".jpg";

String fullFileName = String.format(picture_path + "%s/%s", projectId, fileName);

       if (Tool.isEmpty(fileName)) {
           File baseFile = new File(picture_path + projectId);
           File[] files = baseFile.listFiles();
           if (files.length > 0) {
               fullFileName = files[0].getPath();
           } else {
               fullFileName = picture_path + "noPic.jpg";
           }
       }

       // 文件不存在的情况
       if (!new File(fullFileName).exists()) {
           fullFileName = picture_path + "noPic.jpg";
       }

       response.setContentType("image/jpeg");
       FileInputStream fis = null;
       OutputStream os = null;
       try {
           fis = new FileInputStream(fullFileName);
           os = response.getOutputStream();
           int count = 0;
           byte[] buffer = new byte[1024 * 1024];
           while ((count = fis.read(buffer)) != -1)
               os.write(buffer, 0, count);
           os.flush();
       } catch (Exception e) {
       } finally {
           if (os != null)
               try {
                   os.close();
               } catch (IOException e) {
                   // TODO Auto-generated catch block
               }
           if (fis != null)
               try {
                   fis.close();
               } catch (IOException e) {
                   // TODO Auto-generated catch block
               }
       }
   }
}

通过pdf.js预览PDF文件

猜你喜欢