Pdfjs 跨域加载文件--支持移动端，微信端手势操作

最新推荐文章于 2024-05-06 20:15:29 发布

巨蟹小丸子

最新推荐文章于 2024-05-06 20:15:29 发布

阅读量4.2k

点赞数 1

分类专栏： pdfjs

本文链接：https://blog.csdn.net/Code645472731/article/details/80819647

版权

pdfjs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我废话不多说，直接上如何解决方式问题

1.官网下在pdf.js/pdf.worker.js,http://mozilla.github.io/pdf.js/

已更改的文件下载路径：https://download.csdn.net/download/code645472731/10501164

2.展示pdf页面,

 <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/taglibs.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>${article.articTitle}</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1">
<meta name="format-detection" content="telephone=no" />
<meta http-equiv="Expires" CONTENT="0"> 
<meta http-equiv="Cache-Control" CONTENT="no-cache"> 
<meta http-equiv="Pragma" CONTENT="no-cache">  
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<link rel="stylesheet" type="text/css" href="${ctx}/resources/pdf/web/self.css" />
</head>
<body class="special_detail" module="product_pdfView">
<iframe style="width: 100%;height:800px;" frameborder="no" border="0" marginwidth="0" marginheight="0" src="${ctx}/resources/pdf/web/viewer.html?file=${ctx}/rs/pdfview.do&urlpath=${article.image1}"><iframe>
</body>
</html>

css样式

body{
    background-color: #404040;
    padding-top: 0px;
    padding-bottom: 100px;
    margin:0px;
}

涉及传输的参数&urlpath,使用的官网pdfjs的viewer.html,file转向pdf文件，参数传输

<iframe style="width: 100%;height:800px;" frameborder="no" border="0" marginwidth="0" marginheight="0" src="${ctx}/resources/pdf/web/viewer.html?file=${ctx}/rs/pdfview.do&urlpath=${article.image1}"><iframe>

修改的参数文件viewer.js，是在1896行开始的

  var queryString = document.location.search.substring(1);
  var params = (0, _ui_utils.parseQueryString)(queryString);
  file = 'file' in params ? params.file : appConfig.defaultUrl;
  var urlpath='urlpath' in params ? params.urlpath:'';
  if(urlpath!=''){
	  file=file+"?urlpath="+urlpath;
  }
  validateFileURL(file);

3.viewer.html增加pinchzoom.js,swiper.js

    <title>PDF.js viewer</title>

    <link rel="stylesheet" href="viewer.css">

    <script src="compatibility.js"></script>



    <!-- This snippet is used in production (included from viewer.html) -->
    <link rel="resource" type="application/l10n" href="locale/locale.properties">
    <script src="l10n.js"></script>
    <script src="../build/pdf.js"></script>
    <script src="debugger.js"></script>
    <script src="viewer.js"></script>
	<script src="jquery-2.1.4.min.js"></script>
	<script src="../build/swiper-4.3.3.min.js"></script>
	<script src="../build/pinchzoom.js"></script>

  </head>

4.后端是java语言编写的

	@RequestMapping(value = "rs/pdfview.do", method = RequestMethod.GET)
	public void  memberPdfViewer(HttpServletRequest request, HttpServletResponse response,String urlpath) {
		 logger.info("urlpath="+urlpath);
		  try
	        {
	            InputStream fileInputStream =  getFile(urlpath);
	            response.setHeader("Content-Disposition", "attachment;fileName=test.pdf");
	            response.setContentType("multipart/form-data");
	            OutputStream outputStream = response.getOutputStream();
	            IOUtils.write(IOUtils.toByteArray(fileInputStream), outputStream);
	        }
	        catch (Exception e)
	        {
	            System.out.println(e.getMessage());
	        }
	}
	public InputStream getFile(String urlPath) {  
        InputStream inputStream = null;  
        try {  
            try {  
                String strUrl = urlPath.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();
                return inputStream;  
            } catch (IOException e) {  
                System.out.println(e.getMessage());
                inputStream = null;  
            }  
        } catch (Exception e) {  
            System.out.println(e.getMessage());
            inputStream = null;  
        }  
        return inputStream;  
    }

END

巨蟹小丸子

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
20
评论
Pdfjs 跨域加载文件--支持移动端，微信端手势操作

我废话不多说，直接上如何解决方式问题1.官网下在pdf.js/pdf.worker.js,http://mozilla.github.io/pdf.js/已更改的文件下载路径：https://download.csdn.net/download/code645472731/105011642.展示pdf页面, &lt;%@ page language="java" content...
复制链接

扫一扫