PDF.JS 解决跨域, 传值，本地路径，IE兼容性问题

本文介绍如何使用pdf.js实现在网页上预览PDF文件，包括直接预览项目内的PDF和通过流操作预览本地或服务器上的PDF，提供前端与后端代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近公司要求实现在线预览PDF功能，于是百度查了一些资料，借鉴了一些大佬好的想法，特总结下来，供参考。
去官网http://mozilla.github.io/pdf.js/ 下载 pdfjs类库
导入项目的 WebRoot 下：
在这里插入图片描述

之后更改Viewer.js中默认引入pdf路径, 因为采用file流方式预览所以也可不用更改。

var DEFAULT_URL = 'compressed.tracemonkey-pldi-09.pdf';
var DEFAULT_URL = '';

第一种：在本项目中预览PDF

这种方式是最简单的，因为不涉及跨域操作以及本机pdf文件操作。代码如下`
就有一个前端：

<title>PDF显示</title>
</head>
 <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
 <script type="text/javascript">
 function showPDF(){
 	// 注意  斜杠，不能少
	 var pdfPath="/SSM/pdf/com.pdf";  
//注：因为显示本项目中的pdf，所以要在路径前 加入项目名称  /SSM  (/斜杠不可少) 下面2种方式都可以，推荐第一种，之后要用第一种进行动态传值，跨域操作
 //	window.location.href = "pdfjs2/web/viewer.html?file="+pdfPath;
	window.open("pdfjs2/web/viewer.html?file="+pdfPath);
 }
 
 </script>
<body>
	<span onclick="showPDF()">在线预览PDF</span>
</body>

成功后显示，如果没有显示，请注意路径，注意路径，注意路径！！！
在这里插入图片描述

第二种：读取本地或服务器PDF文件（流操作）

楼主也是百度了一些网上的资料，读取本地文件或服务器中文件都是使用的流操作。
该方法兼容IE，谷歌
在写读取本地PDF文件的时候，因为要动态显示不同的PDF，这就要牵扯到路径传值，查了好多资料，终于功夫不负有心人，查到了相关资料，详情点：http://www.cnblogs.com/kagome2014/p/kagome2014001.html

前端：

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
pageContext.setAttribute("path", path);
pageContext.setAttribute("basePath", basePath);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>PDF显示</title>
</head>
 <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
 <script type="text/javascript">
 function showPDF(){
	 //本机E盘下PDF
	 var pdfPath="E:/A测试流/阿里巴巴Java开发手册.pdf"; 
	 //encodeURIComponent()处理http请求，进行转化
	 //pdfStreamHandeler 为 @RequestMapping(value = "/pdfStreamHandeler")方法名
 	window.location.href = "pdfjs2/web/viewer.html?file=" + encodeURIComponent("<%=basePath%>/pdfStreamHandeler?url=" + pdfPath);

 }
 </script>

<body>
	<span onclick="showPDF()">在线预览PDF</span>
</body>

后台：

	@RequestMapping(value = "/pdfStreamHandeler")
    public void pdfStreamHandeler(HttpServletRequest request, HttpServletResponse response) {
		String   filePath = request.getParameter("url");
        File file = new File(filePath);
        byte[] data = null;
        try {
        	// 解决请求头跨域问题（IE兼容性  也可使用该方法）
        	response.setHeader("Access-Control-Allow-Origin", "*"); 
            response.setContentType("application/pdf");             
            FileInputStream input = new FileInputStream(file);
            data = new byte[input.available()];
            input.read(data);
            response.getOutputStream().write(data);
            input.close();
        } catch (Exception e) {
        }
    }

成功后显示：
在这里插入图片描述