PDF.JS+JAVA跨域

开始

先去官网下载PDF.JS，地址：http://mozilla.github.io/pdf.js/
下载之后解压缩

把整个文件夹当直接引入工程。

把 viewer.html 和  viewer.js 复制出去单独使用，保留控件的完整性。

在html里或者jsp里按照格式相应的路径改好。

<link rel="stylesheet" href="[路径]+web/viewer.css"><link rel="resource" type="application/l10n" href="[路径]+web/locale/locale.properties"><script src="[路径]+jquery.min.js"></script><script src="[路径]+build/pdf.js"></script><script src="[路径]+viewer.js (自己的viewer.js)"></script>

打开自己的viewer.js。在895行附近，把相应的路径给改掉。服务器的话需要设置相对路径。

function configure(PDFJS) {  PDFJS.imageResourcesPath = path +'[路径]/web/images/';  PDFJS.workerSrc = path +'[路径]/build/pdf.worker.js';  PDFJS.cMapUrl = path +'[路径]/web/web/cmaps/';  PDFJS.cMapPacked = true;}

在10054行附近，设置 DEFAULT_URL为一个变量。

var DEFAULT_URL = pdf_url;

给整个viewer.js 加上 下面函数，意思是页面加载完毕后才加载渲染函数。

把变量定义在开头，这样方面使用。

$(document).ready(function(){  var pdf_url = "[需要查看的pdf路径]";  .  .  .});

这样基础路径设置完毕，这样就把页面抽离出来并且可以加载本地需要的PDF了。

跨域

这里采用的是文件流的方式实现跨域操作。

现在viewer.js开头调用ajax。获取pdf的文件流。

var PDFData = ""; //定义一个空变量$.ajax({    type: "GET", //如果报405错误就把post改成get    async: false,    mimeType: 'text/plain; charset=x-user-defined',    url: "传入后台方法", //获取服务器路径    success: function(data) {        PDFData = data; //data就是byte[]数组，下面有介绍    }});var rawLength = PDFData.length;//转换成pdf.js能直接解析的Uint8Array类型,见pdf.js-4068  var array = new Uint8Array(new ArrayBuffer(rawLength));for (var i = 0;i < rawLength; i++) {    ·[i] = PDFData.charCodeAt(i) & 0xff;}var pdf_url = array;

后台java方法

1.本地文件流后台处理，只用了web项目，没有任何框架

public void pdfStreamHandeler(HttpServletRequest request, HttpServletResponse response) {    filePath = "d://a.pdf";    File file = new File(filePath);    byte[] data = null;    try {        FileInputStream input = new FileInputStream(file);        data = new byte[input.available()];        input.read(data);        response.getOutputStream().write(data);        input.close();    } catch (Exception e) {        logger.error("pdf文件处理异常：" + e.getMessage());    }}

2：跨域(从云服务器下载）

这里以阿里云的OSS云服务器为例，设计知识点：https://www.alibabacloud.com/help/zh/doc-detail/32016.htm?spm=a3c0i.o32014zh.b99.108.e7882928dW9FL

@RequestMapping(value = "/pdf", method = RequestMethod.GET)@ResponseBodypublic byte[] loadPdf1(Model model, HttpServletResponse response, HttpServletRequest request) {    final String keySuffixWithSlash = "a.pdf";    // 创建OSSClient实例    OSSClient Server = new OSSClient(endpoint, accessKeyId, accessKeySecret);    Date expiration = new Date(new Date().getTime() + 3600 * 1000);    GeneratePresignedUrlRequest request1 = new    GeneratePresignedUrlRequest("aaa", keySuffixWithSlash,        HttpMethod.GET);    // 设置过期时间    request1.setExpiration(expiration);    URL signedUrl = Server.generatePresignedUrl(request1);    String url = signedUrl.toString();    Server.shutdown();    System.out.println("signed url for getObject: " + signedUrl.toString());    HttpURLConnection httpConn = null;    URL urlObj;    try {        //将url转化成流，把他利用resonse读出，返回页面的是buffBytes        HttpURLConnHelper HttpURLConnHelper = new HttpURLConnHelper();        InputStream input = HttpURLConnHelper.loadFileFromURL(url);        response.setStatus(HttpServletResponse.SC_OK);        response.setContentType("application/pdf;charset=UTF-8");        ServletOutputStream out = null;        out = response.getOutputStream();        int read = 0;        byte buffBytes[] = new byte[1024];        while ((read = input.read(buffBytes)) != -1) {            out.write(buffBytes, 0, read);        }        out.flush();        out.close();    } catch (IOException e1) {        e1.printStackTrace();    }    return null;}

其中HttpURLConnHelper是一个方法类，使用了这个工具类。参考地址：http://blog.csdn.net/iblade/article/details/50488749

这样后台处理跨域资源并且以流的形式给前台，就做好了。

这里的兼容性后期测试的时候出现了问题，在手机端的兼容性不行，如要解决请参考本人的另一篇博客。