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';
var pdfDoc = null, pageNum = 1, pageRendering = false, pageNumPending = null, scale = 1.2, canvas = document
.getElementById('the-canvas'), ctx = canvas.getContext('2d');
function renderPage(num) {
pageRendering = true;
pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport(scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext : ctx,
viewport : viewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function() {
pageRendering = false;
if (pageNumPending !== null) {
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
document.getElementById('page_num').textContent = num;
}
function queueRenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}
function onPrevPage() {
if (pageNum == 1) {
return;
}
pageNum--;
queueRenderPage(pageNum);
}
document.getElementById('prev').addEventListener('click', onPrevPage);
function onNextPage() {
if (pageNum >= pdfDoc.numPages) {
return;
}
pageNum++;
queueRenderPage(pageNum);
}
document.getElementById('next').addEventListener('click', onNextPage);
PDFJS.getDocument(url).then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
document.getElementById('page_count').textContent = pdfDoc.numPages;
renderPage(pageNum);
});
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
}
}
}
}