Pdfjs 跨域載入檔案--支援移動端，微信端手勢操作
阿新 • • 發佈：2019-01-03
我廢話不多說，直接上如何解決方式問題
1.官網下在pdf.js/pdf.worker.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;
}