pdf.js 在线浏览pdf组件构建与安装注意事项

PDF.js v1.8.188 (build: ad1023ff)

Message: file origin does not match viewer's

4.注意

1.如果web服务器是iis，请添加.properties的MIME类型为application/octet-stream， 否则本地化无法启用，默认语言为英文。

2.pdf.js是不支持跨域文件加载的，比如你的页面地址为http://www.a.com, pdf地址为：http://www.b.com/my.pdf。 直接加载是不会成功的。会报  “file origin does not match viewer”错误。

分析一下源码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

var validateFileURL ;    var HOSTED_VIEWER_ORIGINS = [      'null' ,      'http://mozilla.github.io' ,      'https://mozilla.github.io'    ] ;    validateFileURL = function validateFileURL ( file ) {      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 ( e ) {      var message = e && e . message ;      var loadingErrorMessage = mozL10n . get ( 'loading_error' , null , 'An error occurred while loading the PDF.' ) ;      var moreInfo = { message : message } ;      PDFViewerApplication . error ( loadingErrorMessage , moreInfo ) ;      throw e ;      }    } ;

首先，如果Viewer.html所在的主机是否在HOSTED_VIEWER_ORIGINS列表中定义，如果定义，则以下不检查同源。如果不存在，则检查同源。因此可以在将viewer.html所在的主机加到HOSTED_VIEWER_ORIGINS中即可实现跨域。  这样做比较安全。第2029行

如果部署觉得麻烦，暂不考虑安全性的话，可以在开头设置一个跨域标识位：

1 2 3

if ( ! CORS ) {          validateFileURL ( file ) ;      }

var CORS = true;表示支持跨域，不进行同源判断。

var CORS = true;表示不支持跨域，进行同源检测。