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

最新推荐文章于 2025-07-10 14:28:13 发布

IDonng、

最新推荐文章于 2025-07-10 14:28:13 发布

阅读量6.4k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/z90818/article/details/78085265

本文介绍如何解决PDF.js在加载跨域PDF文件时出现的“fileorigindoesnotmatchviewer's”错误。提供了两种解决方案：一是通过修改源码中的HOSTED_VIEWER_ORIGINS配置来允许特定域名的跨域请求；二是设置跨域标识位CORS来控制是否开启跨域支持。

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