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”错误。

分析一下源码：

123456789101112131415161718192021222324

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;表示不支持跨域，进行同源检测。