pdf.js 跨域加载文件
PDF.js 是一个由Mozilla开发的、用于在Web浏览器中解析和渲染PDF文件的开源JavaScript库。当涉及到跨域加载PDF文件时，可能会遇到浏览器的同源策略限制，这会导致无法直接从不同的源加载文件。
基础概念
同源策略：是一种安全机制，它限制了一个源的文档或脚本如何与另一个源的资源进行交互。只有协议、域名和端口完全相同的两个URL才被认为是同源的。
相关优势
- 安全性：防止恶意网站读取敏感数据。
- 隐私保护：确保用户信息不被未授权的第三方获取。
类型
- 简单请求：满足特定条件的HTTP请求（如GET、POST等）。
- 预检请求：非简单请求在发送前会先发送一个OPTIONS请求进行预检。
应用场景
- 在线文档预览：用户可以在不同域名下的网站上预览PDF文件。
- 资源共享：多个应用间共享PDF资源。
遇到的问题及原因
当使用PDF.js尝试跨域加载PDF文件时，可能会遇到以下问题：
- CORS错误：浏览器阻止了跨域请求，因为服务器没有正确设置CORS（跨源资源共享）头部。
解决方法
服务器端设置CORS
确保提供PDF文件的服务器设置了正确的CORS头部。例如，在Apache服务器上，可以在.htaccess文件中添加以下内容：
Header set Access-Control-Allow-Origin "*"在Nginx服务器上，可以在配置文件中添加：
add_header Access-Control-Allow-Origin *;使用代理服务器
如果无法修改源服务器的设置，可以使用一个同源的代理服务器来转发请求。例如，使用Node.js和Express创建一个简单的代理：
const express = require('express');
const request = require('request');
const app = express();
app.get('/proxy', (req, res) => {
const url = req.query.url;
request(url).pipe(res);
});
app.listen(3000, () => {
console.log('Proxy server running on port 3000');
});然后在PDF.js中使用这个代理URL来加载PDF文件。
使用PDF.js的WorkerSrc选项
PDF.js允许指定一个同源的WorkerSrc路径，这样可以在不同的源上加载PDF文件，但需要确保WorkerSrc指向的资源是同源的。
PDFJS.workerSrc = 'https://example.com/pdf.worker.js';示例代码
以下是一个简单的PDF.js跨域加载PDF文件的示例：
<!DOCTYPE html>
<html>
<head>
<title>PDF.js Cross-Origin Example</title>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
</head>
<body>
<canvas id="pdf-canvas"></canvas>
<script>
PDFJS.GlobalWorkerOptions.workerSrc = 'https://example.com/pdf.worker.js';
var url = 'https://anotherdomain.com/sample.pdf';
var loadingTask = PDFJS.getDocument(url);
loadingTask.promise.then(function(pdf) {
pdf.getPage(1).then(function(page) {
var viewport = page.getViewport({ scale: 1.5 });
var canvas = document.getElementById('pdf-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
</script>
</body>
</html>在这个示例中，确保pdf.worker.js是同源的，并且服务器设置了适当的CORS头部。
通过以上方法，可以有效地解决PDF.js跨域加载文件时遇到的问题。
相关·内容
我在跨域请求通过PDF.js获取PDF文件时遇到了问题。有没有人能告诉我在Apache服务器上启用跨域PDF.js请求的步骤？
浏览 19提问于2013-08-12得票数 2
3回答
我有一个关于PDF.js和CORS配置的问题。
我从域A将PDF.js加载到iframe中，参数为文件(服务器的完整路径，它将返回一个pdf文档)。PDF.js将使用origin: domain A向域B中的服务器创建请求。域B上的服务器返回标题为Access-Control-Allow-Origin: domain A的pdf文档，到目前为止一切正常。在我的网络选项卡中，我看到对服务器的请求，它返回一个200 status OK，但PDF.j
浏览 7提问于2016-09-07得票数 9
回答已采纳
1回答
我想从我的GCP中获取pdf文件，但是我得到了CORS错误。好的，np。我试着在GCP中找到解决这个问题的方法。
浏览 24提问于2019-10-06得票数 1
1回答
未显示PDF表单域内容
、、、、
我使用Apache PDFBox (Java)以编程方式生成带有表单域的PDF。但是，使用PDF.JS/Firefox加载PDF时，不会显示这些字段的内容。使用独立查看器或Chrome打开文件时，该字段的内容将正确显示。
我知道PDF.JS不支持编辑AcroForms，但我读到显示应该不会有任何问题。下面是一个生成的PDF，它在PDF.JS/Firefox中无法正确显示：
浏览 63提问于2016-08-16得票数 1
回答已采纳
我正在尝试从一个嵌入在iframe内部的Google链接到iframe之外打开。我尝试过几种解决方案。我尝试将基本目标定义为任意一个_parent、_top或_blank。Google在iframe中创建代码，所以我尝试用jquery更改它以更改目标属性，但这似乎行不通。<iframe id="googledoc" base target="_blank" scrolling=no width=1000 height=1000 src="https://docs.google.com/document/d/1ctn5fek
浏览 3提问于2014-04-26得票数 0
回答已采纳
我正在使用pdf.js从firefox附加组件中的pdf文件中提取注释。除了打开本地pdf文件之外，一切都运行得很好。这是一个跨域的问题吗？我认为这应该不是问题，因为我的代码是从扩展运行的。我该如何解决这个问题？
浏览 1提问于2013-04-23得票数 1
回答已采纳
我正在开发一个窗口应用程序，在该应用程序中，我必须查找所有pdf文件，解析它们，并在javascript的帮助下搜索其中出现的关键字。我尝试使用pdf.js，但没有找到本地文件的解决方案。它显示了以下错误: XMLHttpRequest无法加载XMLHttpRequest只支持HTTP的跨源请求。(示例文件名为Hello.pdf)
浏览 4提问于2014-09-18得票数 0
回答已采纳
1回答
我正在构建一个node.js应用程序，它使用pdf.js读取pdf文件，但与其他js一样，pdf.js不允许跨源请求。因此，我需要一种方法，以保存选定的文件输入到我的pdf目录。
浏览 2提问于2015-02-23得票数 0
回答已采纳
1回答
我本来可以做一个最小的样本，但是我无法让Chrome浏览器在jsfiddle中工作，所以我不确定我会如何展示它。每个大小调整器的鼠标向下触发添加窗口mousemove和mouseup事件侦听器该窗口mousemove事件根据需要在窗口鼠标上执行的所有调整，窗口事件侦听器将被删除
看起来，如果我为pdf对象设置了display:none，大小调整器就能正常工作。在进一步的测试中，只要游标没有太快地超出div大小，大小调整器似乎也能工作，这似
浏览 0提问于2019-11-05得票数 0
回答已采纳
pdf文件可以显示在Chrome的iframe中，但不能显示在IE中。选择的答案使我发现了pdf.js。查看器js是基于pdf.js的，但是它有一些基本没有的限制。我需要从其他域加载pdfs，还需要加载base64编码的pdf数据。pdf.js使我能够做到这一点。所选的答案把我引向了正确的方向。
浏览 0提问于2015-09-14得票数 2
回答已采纳
我正在一个弹出窗口中加载一个.pdf文件。我想附加一个事件。ready事件工作得很好，但其他事件就不行了。为什么会这样呢？
浏览 1提问于2013-05-02得票数 2
在什么情况下，flex应用程序试图从这个位置加载跨域文件： As，我已经将跨域放置在服务器的根级别，并且我也能够从浏览器加载它(如果我点击根/跨域).Still它指向默认的adobe。
浏览 0提问于2011-12-02得票数 2
我正在工作的一个网络应用程序，需要阅读一个pdf与pdf.js。我的页面上有一个选择该文件的文件输入。我有document.getElementById("...").value作为pdf的网址。当我运行它时，它说：
XMLHttpRequest无法加载c:\fakepath\vocab_list_15_8th_grade.pdf。跨源请求仅支持协议方案: http、数据、铬、铬-扩展、https、铬扩展-资源。awe:1未处理的承诺拒绝承诺{[PromiseStatus]：“拒绝”，
浏览 10提问于2015-02-22得票数 1
回答已采纳
当使用pdf.js查看pdf时，我遇到了一个问题。问题来自于PDFJS.workerSrc设置。
浏览 5提问于2017-12-04得票数 1
回答已采纳
5回答
我们正在创建一个应用程序，它使用动态加载到主swf中的模块。我们遇到的问题是，在本地调试主应用程序时，我们无法加载位于测试服务器上的模块。我们得到的错误是"SWF不是一个可加载的模块“。我查了一下，发现服务器上需要一个跨域文件，该文件授予从外部位置加载模块的权限。因此，我们创建了一个简单的跨域文件，并将其放到服务器上，但这似乎没有帮助。以下是跨域
浏览 1提问于2009-04-21得票数 3
回答已采纳
3回答
反向漏出
、、
我有大约500个页面，其中一些只是PDF文件，可以在单独的域父页面上的iframe中查看(文件是子域，但是驻留在不同的服务器上)。强制执行以下行为的最佳方法是什么：请注意，子域可以使用任何必要的PHP，但是主域不能使用PHP (这就是为什么整个子
浏览 0提问于2013-01-11得票数 2
pdf.js库在桌面浏览器上运行良好，但在PhoneGap项目上实现时，pdf.js库的查看器界面会加载，但无法加载要读取的PDF文件。有人能帮我解决这个问题吗？
提前感谢！
浏览 3提问于2014-08-16得票数 1
我正在使用pdf.js在我的网站上查看pdf。但是，viewer.html不会加载viewer.css、pdf.js和viewer.js。pdf.js位于build目录中。我的查看器html不会加载所有这些文件。 我已经尝试了这里列出的解决方案：HTML not loading CSS file。但没有任何帮助。/viewer.css">
<script src="build/pdf.js"><&
浏览 72提问于2019-07-03得票数 0
我在一个react组件中有和Iframe，该组件从外部url (我的Api端点带有端口8000)单击按钮加载pdf文件，成功加载后，我希望打印该Iframe的内容，但得到和错误。
浏览 4提问于2021-02-10得票数 0
我非常同意PDF.JS的观点，但现在我需要一些帮助。我用PDF.JS在线加载(查看) pdf文件，但我需要的不是下载的pdf文件。我设法从超文本标记语言中删除了下载按钮/功能，但现在我需要知道如何防止直接访问(而不妨碍PDF.JS读取)。有什么建议吗？:)谢谢
浏览 44提问于2014-06-21得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
