PDFJS跨域显示PDF文件的两种方法

首先使用文件流获取远程文件

@RequestMapping("getPdfFile")	
public void getRemoteFile(String url, HttpServletResponse response) {  
        InputStream inputStream = null;  
        try {  
            try {  
                String strUrl = url.trim();
                URL url=new URL(strUrl);
                //打开请求连接
                URLConnection connection = url.openConnection();
                HttpURLConnection httpURLConnection=(HttpURLConnection) connection;
                httpURLConnection.setRequestProperty("User-Agent", "Mozilla/4.0 (compatible; MSIE 5.0; Windows NT; DigExt)");
                // 取得输入流，并使用Reader读取
                inputStream = httpURLConnection.getInputStream();
                int bytesum = 0;
                int byteread = 0;
                byte[] buffer = new byte[1024];
                // 清空response
                response.reset();
                // 设置response的Header
                response.addHeader("Content-Disposition", "attachment;filename=" + new String("cbzm.pdf".getBytes()));
                OutputStream toClient = new BufferedOutputStream(response.getOutputStream());
                response.setContentType("application/octet-stream");
                bytesum = 0;
                byteread = 0;
                buffer = new byte[1024];
                while ((byteread = inputStream.read(buffer)) != -1) {
                    bytesum += byteread;
                    toClient.write(buffer, 0, byteread);
                }
                toClient.flush();
                inputStream.close();
                
                toClient.close();
            } catch (IOException e) {  
                e.printStackTrace();
                inputStream = null;  
            }  
        } catch (Exception e) {  
            e.printStackTrace();
            inputStream = null;  
        }  
    }

接下来使用PDFJS的两种方式展示

第一种（JS方式）：

<script type="text/javascript">
function showall(url, page, id) {
	PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
		pdf.getPage(page).then(function getPageHelloWorld(page) {
			var scale = 1.0;
			var viewport = page.getViewport(scale);
			var canvas = document.getElementById(id);
			var context = canvas.getContext('2d');
			canvas.height = viewport.height;
			canvas.width = viewport.width;
			var renderContext = {
				canvasContext: context,
				viewport: viewport
			};
			page.render(renderContext);
		});
	});
}

function showPdf() {
	var Request = GetRequest();
	if(!Request || !Request['pdf']){
		alert('非法访问');return;
	}
	var url = 'getPdf?urlPath='+Request['pdf'];//pdf文件地址
	$("#container").show();
	$("#pop").empty();
	PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
		pages = pdf.numPages;
		for(var i = 1; i < pdf.numPages; i++) {
			var id = 'page-id-' + i;
			$("#pop").append('<canvas id="' + id + '"></canvas>');
			showall(url, i, id);
		}
	});
}
showPdf();
function GetRequest() {
    var url = location.search; //获取url中"?"符后的字串
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for(var i = 0; i < strs.length; i ++) {
            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        }
    }
    return theRequest;
}
</script>

第二种（viewer.html方式）：

1.注释viewer.js中DEFAULT_URL

2.在viewer.html中增加以下代码

<script>
    var DEFAULT_URL = './getPdfFile?url='+getQueryStringByName('pdf');
    function getQueryStringByName(name){
       var result = location.search.match(new RegExp("[\?\&]" + name+ "=([^\&]+)","i"));
       if(result == null || result.length < 1){
           return "";
       }
       return result[1];
    }
</script>