pdf.js请求远程文件

pdf.js 是一个用于在网页上显示 PDF 文件的开源 JavaScript 库。它允许开发者通过 AJAX 请求远程 PDF 文件，并在客户端进行解析和渲染，而无需依赖任何插件。

基础概念

pdf.js 利用浏览器的 XMLHttpRequest 或 fetch API 来请求远程 PDF 文件。一旦文件被成功下载，pdf.js 会解析 PDF 数据，并使用 Canvas API 或 SVG 将其渲染到网页上。

类型

pdf.js 支持多种类型的 PDF 文件，包括文本、图像、表格等。

应用场景

在线文档查看器
电子书阅读器
报告和演示文稿展示
内容管理系统中的 PDF 集成

请求远程文件的注意事项

CORS（跨域资源共享）：请求远程 PDF 文件时，必须确保服务器设置了正确的 CORS 头，以允许跨域请求。
文件大小：大型 PDF 文件可能会导致加载时间过长，影响用户体验。可以考虑分页加载或提供下载选项。
安全性：确保请求的 PDF 文件来源可信，避免加载恶意内容。

解决问题的方法

1. CORS 问题

如果遇到 CORS 错误，需要在服务器端设置允许跨域请求的头信息。例如，在 Apache 服务器上，可以在 .htaccess 文件中添加以下内容：

Header set Access-Control-Allow-Origin "*"

2. 加载速度慢

对于大型 PDF 文件，可以考虑以下优化措施：

分页加载：只加载用户当前查看的页面。
压缩 PDF：使用工具如 Ghostscript 或在线服务压缩 PDF 文件。
缓存：利用浏览器缓存机制，减少重复加载。

3. 渲染问题

如果 PDF 文件渲染不正确，可以尝试以下方法：

更新 pdf.js：确保使用的是最新版本的 pdf.js。
检查 PDF 文件：确保 PDF 文件没有损坏或格式错误。
调试工具：使用浏览器的开发者工具检查是否有 JavaScript 错误或资源加载失败。

示例代码

以下是一个简单的示例，展示如何使用 pdf.js 请求并显示远程 PDF 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PDF.js Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
</head>
<body>
    <canvas id="pdf-canvas"></canvas>
    <script>
        async function renderPDF(url) {
            const loadingTask = pdfjsLib.getDocument(url);
            const pdf = await loadingTask.promise;
            const page = await pdf.getPage(1);
            const viewport = page.getViewport({ scale: 1.5 });
            const canvas = document.getElementById('pdf-canvas');
            const context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            const renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            await page.render(renderContext).promise;
        }

        renderPDF('https://example.com/sample.pdf');
    </script>
</body>
</html>

在这个示例中，pdf.js 请求并渲染了一个远程 PDF 文件的第一页。确保替换 https://example.com/sample.pdf 为实际的 PDF 文件 URL，并处理好 CORS 问题。

页面内容是否对你有帮助？

有帮助

没帮助

如何创建一个make文件并为pdf.js缩小它？

、

在模块“入门”说明中，我读了以下一句：为了将所有src/文件绑定到最终的pdf.js中，问题：$ make将生成可以包含在最终项目中的文件build/pdf.js。(警告:这是一个大文件！(考虑将其缩小)。这需要SSH进入远程主机吗？

浏览 0提问于2012-04-29得票数 0

3回答

移动应用中的PDF.JS -访问-控制-允许-来源问题

、、、

由于安卓浏览器不支持PDf，我决定使用PDF.JS，它在加载本地PDf文件时运行良好，但是当尝试打开远程文件时，它抛出了一个错误提前感谢

浏览 10提问于2014-07-25得票数 5

1回答

如何使用PDF.js解决跨域问题？

、

我在跨域请求通过PDF.js获取PDF文件时遇到了问题。有没有人能告诉我在Apache服务器上启用跨域PDF.js请求的步骤？

浏览 19提问于2013-08-12得票数 2

1回答

如何使用pdf.js从客户端设置范围标头？

、、、

我试图在我的网站上使用pdf.js查看我的pdf。通过遵循文档中的步骤，我尝试用pdf.js加载pdf。整个pdf文件是被下载在一个单一的请求。现在，我想做渐进加载(通过指定范围下载)。我的客户端包含两个文件 'use strict';这包

浏览 3提问于2016-11-15得票数 4

回答已采纳

1回答

react-pdf cors到gcp存储

、、

我想从我的GCP中获取pdf文件，但是我得到了CORS错误。好的，np。我试着在GCP中找到解决这个问题的方法。

浏览 24提问于2019-10-06得票数 1

1回答

PDF JS -延迟加载？

、

看起来，pdf.js本身是在请求整个字节范围的文件。取而代之的是，有没有可能只在PDF load上请求5页，在滚动上可以加载另一组5页，就像这样。有没有办法通过使用pdf.js来实现这一点？

浏览 4提问于2017-06-25得票数 2

3回答

我有一个关于PDF.js和CORS配置的问题。我从域A将PDF.js加载到iframe中，参数为文件(服务器的完整路径，它将返回一个pdf文档)。PDF.js将使用origin: domain A向域B中的服务器创建请求。在我的网络选项卡中，我看到对服务器的请求，它返回一个200 status OK，但PDF.js抛出了一个错误Unexpected server response (0) while retrieving问题是，这里发生了什么，CORS看起来还好，但我

浏览 7提问于2016-09-07得票数 9

回答已采纳

1回答

用Node.js简单的文件上传

、

我正在构建一个node.js应用程序，它使用pdf.js读取pdf文件，但与其他js一样，pdf.js不允许跨源请求。因此，我需要一种方法，以保存选定的文件输入到我的pdf目录。

浏览 2提问于2015-02-23得票数 0

回答已采纳

2回答

PDF概述链接在我的angularjs应用程序中不起作用

、、、、

我的web应用程序使用PDF.js在浏览器中加载PDF。它从REST中获取PDF。<iframe src="/pat

浏览 0提问于2019-07-02得票数 0

回答已采纳

1回答

不使用绝对路径加载pdf。只适用于相对路径

、

我正在使用javascript库来使用浏览器呈现pdf文件。我不能让它使用绝对路径作为我想要显示的PDF的路径。所有的相对路径都很好。

浏览 3提问于2013-01-03得票数 1

1回答

未定义web组件的pdf.js导入

、、、、

我正在尝试写一个使用lit-html的网页组件，它将呈现一个用户选择使用pdf.js的PDF文件。但是，pdf.js导入会给出以下错误： webpackUniversalModuleDefinitionhttp://localhost:8003/node_modules/pdfjs-di

浏览 13提问于2020-02-19得票数 1

1回答

将PDF从文件系统加载到Ionic (Cordova) + Android + pdf.js应用程序中

、、

我很难将pdf.js集成到Android应用程序中。我希望pdf.js渲染一个pdf到一个准备好的画布。我做了一些研究，在SO和互联网上有很多关于将文件加载到pdf.js上的问题，但是他们要么讨论从服务器加载pdfs，而不是从file:// urls，要么他们建议修改本地的安卓代码，我想避免:如果可能的话在cannot read property 'length' of null中将其设置为false结果，在加载xhr请求无法加载的文件时将其设置为

浏览 6提问于2015-12-01得票数 7

回答已采纳

1回答

如何使用pdf.js而不定义pdf.worker位置

、

当使用pdf.js查看pdf时，我遇到了一个问题。问题来自于PDFJS.workerSrc设置。

浏览 5提问于2017-12-04得票数 1

回答已采纳

5回答

pdf.js不使用Safari

、、、

(在PDF.JS版本上测试= 0.8.229 (最新)/Safari5.1.9- 6.0.4 / Mac 10.6.8 - 10.8.3)这是一个示例示例，演示代码来自我们的服务器，示例PDFError: Invalid XRef stream (while reading XRef): WarningIndexing all PDF objects Error: Invalid XRef stream (while readin

浏览 6提问于2013-06-10得票数 4

回答已采纳

2回答

将pdf文件显示为从servlet嵌入的

、、

in.close(); e.printStackTrace(); }我有一个xhtml文件，我想在这里显示这个pdf文件。pdf" width="105%"现在，我可以使用localhost:8080/myapp/file访问pdf文件

浏览 3提问于2016-06-20得票数 0

回答已采纳

1回答

无法在angularjs中使用pdf.js查看数字签名的pdf文件

、、、、

运行此网页应用程序的铬以及火狐，并能够查看正常的pdf，但不是数字签名的pdf文件。请找到下面的代码，我正在使用。请您帮助我查看pdfjs lib中需要哪些代码修改才能查看数字签名的pdf文件。提前谢谢。

浏览 3提问于2021-07-26得票数 1

1回答

pdf.js是否支持Pdf的分块，即在后台下载剩余部分的同时加载一些pdf块？

pdf.js是否支持Pdf的分块，即在后台下载剩余部分的同时加载一些pdf块？怎么做到的？

浏览 3提问于2016-02-10得票数 0

2回答

本地安装的PDF.JS不会呈现

、、

当尝试从npm安装的pdfjs中使用PDF.JS时，pdf不会呈现，并且控制台中没有显示任何错误。当使用在线资源(例如//mozilla.github.io/pdf.js/build/pdf.worker.js)时，可以很好地呈现PDF。这是我正在使用的代码，几乎直接取自this example <script type="text/javascript" src="node_modules/pdfjs-dist/build/

浏览 40提问于2019-05-24得票数 1

2回答

我的viewer.html无法加载任何css和jss文件

、、

我正在使用pdf.js在我的网站上查看pdf。但是，viewer.html不会加载viewer.css、pdf.js和viewer.js。pdf.js位于build目录中。我的查看器html不会加载所有这些文件。我已经尝试了这里列出的解决方案：HTML not loading CSS file。但没有任何帮助。/viewer.css">&l

浏览 72提问于2019-07-03得票数 0

1回答

使用pdf.js时只从服务器加载所需的页面

、、、

我使用pdf.js查看pdf文档，pdf.js首先从服务器获取整个文档，然后开始呈现，这种行为导致两个问题：下面是一个PR，它实现了范围请求，但是请求仍然在运行，直到加载了整个文档，而不是带有“随取即走”的行为。

浏览 7提问于2013-04-08得票数 3

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

pdf.js请求远程文件

基础概念

相关优势

类型

应用场景

请求远程文件的注意事项

解决问题的方法

1. CORS 问题

2. 加载速度慢

3. 渲染问题

示例代码

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐