利用pdfJS实现以读取文件流方式在线展示pdf文件

PDF.js 的使用

PDFJS是在线预览PDF的一款神器。 对于PC端浏览器，一般直接提供pdf文件，iframe一下就可以直接预览了。我使用这个插件的原因是在移动端，android微信无法在线预览，原因是微信android使用x5的内核，就是QQ浏览器的那个貌似它只要检测到文件流，就会直接下载。
官网地址：http://mozilla.github.io/pdf.js/

• 下载PDF.js
  笔者下载是1.9.426 如图
  
  解压后有 web 和 build 两个文件夹 如图
  

---

• 运行示例
  将解压后的文件夹直接丢到tomcat下 访问 ip:port/文件夹名称/web/viewer.html
  显示的是 web 文件夹下的compressed.tracemonkey-pldi-09.pdf
  

---

• 修改默认打开PDF
  我们只用修改viewer.js文件中的pdf路径参数即可：
  var DEFAULT_URL = ‘09.pdf’;
  如果pdf文件与viewer.html不在一层目录中，改成相对路径即可：
  var DEFAULT_URL = ’ ../doc/ 09.pdf’;

  viewer.html可以通过页面参数传值的方式加载pdf文件，比如我们想打开09.pdf文件的话，只需要这样：
  先把viewer.js中的参数修改为空：
  var DEFAULT_URL = ”;
  然后把url改写为参数传值：
  http://127.0.0.1:8080/pdfjs/web/viewer.html?file=09.pdf
  如果pdf文件与viewer.html不在一层目录中，改成相对路径即可：
  http://127.0.0.1:8080/pdfjs/web/viewer.html?file=../doc/09.pdf
  参考地址https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#file

• 获取服务器上的PDF文件
  通过页面参数传值的方式加载pdf文件
  file的值需要URLEncode编码 指向服务器端
  例如：
  http://xxxxx.com:89/demo/fileupdownfud=1&rid=4&isweb=1&iswebshow=1&dbid=01&filepath=fj_ob_item/Y201809/11.pdf
  URLEncode编码：为
  http%3A%2F%2Fxxxx.com%3A89%2Fdemo%2Ffileupdown%3Ffud%3D1%26rid%3D4%26isweb%3D1%26iswebshow%3D1%26dbid%3D01%26filepath%3Dfj_ob_item%2FY201809%2F11.pdf
  访问地址为：
  http://127.0.0.1:8080/pdfjs/web/viewer.html?file=http%3A%2F%2Fxxxx.com%3A89%2Fdemo%2Ffileupdown%3Ffud%3D1%26rid%3D4%26isweb%3D1%26iswebshow%3D1%26dbid%3D01%26filepath%3Dfj_ob_item%2FY201809%2F11.pdf

  PDF.js默认好像是不能跨域请求
  
  将viewer.js 中的错误提示注释掉即可

    try {
      var viewerOrigin = new URL(window.location.href).origin || 'null';
      if (HOSTED_VIEWER_ORIGINS.indexOf(viewerOrigin) >= 0) {
        return;
      }
      var fileOrigin = new URL(file, window.location.href).origin;
      //跨域请求错误提示
      //if (fileOrigin !== viewerOrigin) {
        //throw new Error('file origin does not match viewer\'s');
      //}
    } catch (ex) {
      var message = ex && ex.message;
      PDFViewerApplication.l10n.get('loading_error', null, 'An error occurred while loading the PDF.').then(function (loadingErrorMessage) {
        PDFViewerApplication.error(loadingErrorMessage, { message: message });
      });
      throw ex;
    }

• 服务端代码

//跨域请求
String s0 = "C:11.pdf"
response.setHeader("Access-Control-Allow-Origin", "*"); 
File file = new File(s0);
response.setContentLength((int) file.length());
response.setHeader( "Content-Disposition", "attachment;filename=" + URLEncoder.encode(file.getName(), "UTF-8"));// 设置在下载框默认显示的文件名
response.setContentType("application/octet-stream");// 指明response的返回对象是文件流
// 读出文件到response
// 这里是先需要把要把文件内容先读到缓冲区
// 再把缓冲区的内容写到response的输出流供用户下载
FileInputStream fileInputStream = new FileInputStream(file);
BufferedInputStream bufferedInputStream = new BufferedInputStream(fileInputStream);
OutputStream outputStream = response.getOutputStream();
byte buffer[] = new byte[1024];
int len = 0; 
while ((len = bufferedInputStream.read(buffer)) > 0) {
    outputStream.write(buffer, 0, len);
}
// 人走带门
bufferedInputStream.close();
outputStream.flush();
outputStream.close();