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>

 

  • 3
    点赞
  • 7
    收藏
  • 打赏
    打赏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 9

打赏作者

银狐被占用

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值