pdf.js打开文件不显示

PDF.js 是一个由Mozilla开发的用于解析和渲染PDF文件的开源JavaScript库。如果你在使用PDF.js时遇到文件无法显示的问题，可能是由于以下几个原因：

基础概念

PDF.js 通过浏览器环境中的JavaScript来解析PDF文件，并将其渲染成可视化的页面。它允许开发者将PDF阅读功能嵌入到网页中，而不需要依赖任何插件。

可能的原因及解决方法

文件路径错误：
- 确保PDF文件的URL是正确的，并且可以通过浏览器直接访问。

CORS策略限制：
- 如果PDF文件位于不同的域上，浏览器的安全策略可能会阻止加载。需要在服务器端设置适当的CORS（跨源资源共享）头。
PDF文件损坏：
- 尝试使用其他PDF阅读器打开文件，以确认文件是否完好无损。
浏览器兼容性问题：
- 某些浏览器可能不完全支持PDF.js或存在已知的bug。尝试在不同的浏览器中测试。
JavaScript错误：
- 查看浏览器的控制台是否有任何错误信息，这些信息通常会指出问题所在。
PDF.js配置问题：
- 确保正确设置了PDF.js的workerSrc属性，这是必须的，以便PDF.js能够找到其Web Worker脚本。

示例代码

以下是一个简单的PDF.js使用示例，包括如何设置workerSrc：

<!DOCTYPE html>
<html>
<head>
    <title>PDF.js Example</title>
    <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
</head>
<body>
    <canvas id="pdf-canvas"></canvas>
    <script>
        // 设置PDF.js的workerSrc
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';

        // 加载PDF文件
        var url = 'path/to/your/document.pdf';
        var loadingTask = pdfjsLib.getDocument(url);

        loadingTask.promise.then(function(pdf) {
            // 获取第一页
            pdf.getPage(1).then(function(page) {
                var scale = 1.5;
                var viewport = page.getViewport({ scale: scale });

                // 准备canvas元素
                var canvas = document.getElementById('pdf-canvas');
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                // 渲染PDF页面
                var renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext);
            });
        }, function(error) {
            console.error('Error loading PDF: ', error);
        });
    </script>
</body>
</html>

应用场景

PDF.js广泛应用于需要在线查看PDF文件的网站和应用，如电子书阅读器、在线文档管理系统等。

优势

无需插件：完全基于HTML5和JavaScript，不需要用户安装任何额外的插件。
跨平台：可以在任何支持现代浏览器的设备上运行。
可定制：开发者可以根据需要定制PDF的显示和交互方式。

类型

PDF.js主要分为两个部分：核心库（pdf.js）和Web Worker脚本（pdf.worker.js），后者负责后台处理，以避免阻塞主线程。

如果你遇到的问题不在上述列表中，或者上述方法无法解决你的问题，请提供更多的错误信息或具体的使用场景，以便进一步诊断问题。

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

有帮助

没帮助

ionic v1使用inappbrowser和pdf.js打开pdf

、

我正在尝试打开ionic-v1应用程序中的pdf。pdf.js将在服务器上(不在移动应用程序中)。pdf.js使用<>.html文件来显示pdf文件。这样行得通吗？请帮帮忙。

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

1回答

在windows上用pdf.js打开一个pdf

、、、、

我试图在Windows应用程序上使用pdf.js打开一个pdf文件，但我无法让它工作。PdfWebViewer.Source = "Assets/pdf.js/web/viewer.html?file=Assets/Temp/test.pdf"; PdfWebViewer.So

浏览 0提问于2015-10-11得票数 0

2回答

如何在模式Rails中显示pdf

、、、、

在我的rails应用程序中，我希望用户能够以模式显示pdf，因此我使用了Iframe，如下所示这很好用，但我希望即使用户使用其他web浏览器，文件也可以用mozilla pdf阅读器打开，所以我想知道有没有什么好办法可以做到这

浏览 0提问于2015-05-11得票数 0

2回答

在应用程序中转换PDF附件以使用PDFBox在HTML中打开它

、、

我有一个应用程序，在某个页面上的用户有上传PDF文件的设施。稍后，当用户再次访问同一页编辑一些信息，并希望查看附件的PDF文件。不应下载附加的PDF文件，然后将其打开。相反，它应该直接在HTML中打开。这个应用程序是用java编写的。或者有没有其他更好的方法来做到这一点？

浏览 1提问于2011-07-14得票数 0

1回答

未显示PDF表单域内容

、、、、

但是，使用PDF.JS/Firefox加载PDF时，不会显示这些字段的内容。使用独立查看器或Chrome打开文件时，该字段的内容将正确显示。我知道PDF.JS不支持编辑AcroForms，但我读到显示应该不会有任何问题。下面是一个生成的PDF，它在PDF.JS/Firefox中无法正确显示：

浏览 63提问于2016-08-16得票数 1

回答已采纳

2回答

在火狐中使用pdf.js

、

但当我打开PDF文件时，它仍然使用Adobe Reader显示。如何使用pdf.js显示它？

浏览 4提问于2013-04-25得票数 1

回答已采纳

1回答

pdf.js :我们如何使用pdf.js获得当前的pdf页码

、、

当用户使用时，我希望从pdf.js获取当前的页面号。以下链接我的问题是如何从 pdf.js

浏览 9提问于2017-02-24得票数 3

回答已采纳

2回答

如何在android的webview中从SD卡中打开pdf文件

、

如何在Webview中打开Sd卡pdf文件而不使用Android中的意图？

浏览 4提问于2014-07-12得票数 0

2回答

使用PDF.js打开PDF文件，而不将文件作为查询字符串传递

、、、、

我目前正在使用PDF.js打开一个PDF文件，它可以正常工作。http://myapp.mycompany.com/web/viewer.html?file=http://myapp.mycompany.com/my-PDF-file.pdf出于某些原因，我确实不希望显示我的PDF文件的文件路径，并且希望将我的PDF文件移出根目录。有没有其他方法

浏览 1提问于2016-03-07得票数 0

回答已采纳

1回答

UWP向WebView发送文件数据

、、、、

我有一个用C#编写的应用程序，但是我想在一个带有pdf.js的WebView中显示一个PDF文件。UWP为查看PDF提供的API对我来说太有限了，它们不支持文本选择之类的东西，而且对于大文件来说它可能非常慢。在StorageFile应用程序中使用pdf.js在WebView中打开文件(如果是这样的话，什么是最好的方式)？

浏览 0提问于2018-07-06得票数 1

回答已采纳

3回答

使用google查看.ps文件？

、

我想知道是否有一种方法可以查看.ps文件，而不用下载/保存它们，同时使用Google吗？

浏览 1提问于2015-01-16得票数 8

回答已采纳

2回答

如何实现pdf.js在pdf浏览器中查看pdf文件？

、

我想在pdf.js查看器的新页面中打开链接到文档中的pdf文件。谁能告诉我如何实现pdf.js，以便我可以在pdf查看器中在新页面中打开pdf文档？谢谢。

浏览 4提问于2013-02-17得票数 0

2回答

在iframe Internet Explorer/Edge中使用Javascript将字节数组呈现为pdf

、、、、

我有一个从http post方法返回的字节数组(它是从原始PDF文件转换而来的)。我的要求是在iframe中渲染原始PDF，我使用带有IE/Edge浏览器的angular 1.x。

浏览 106提问于2019-12-17得票数 0

2回答

如何旋转文件pdf和所有图像类型

、、

我有一个html页面，显示PDF和各种图像。我正在寻找一种方法来旋转我用jQuery显示的文件。 $( "objectPdfId" ).addClass( "rotate90" );我很确定这不是正确的方法函数在JavaScript -不工作

浏览 2提问于2017-12-06得票数 5

1回答

为什么这个通用代码不能在iOS中显示PDF，而不能在Android中呢？

、、

在下面的代码中，我编写了一个PDF文件到应用程序数据目录，并在Xamarin WebView中打开它。这在iOS上运行得很好，但在安卓系统中什么都不显示。换句话说，我可以在Android模拟器中打开Chrome，导航到一个PDF url，它就会加载。如下例所示： ?

浏览 32提问于2019-06-15得票数 0

回答已采纳

2回答

有人能告诉我如何在pdf.js中禁用缓存吗？

、

我使用pdf.js在浏览器中显示.then。我注意到如果我向下滚动一个pdf (假设当前页面是8)，当我刷新页面时，有超过一个页面(让我们看20)的pdf，然后pdf自动从页面8打开。我们可以在pdf.js中删除这个东西，以便它只从页面1打开。

浏览 64提问于2015-04-11得票数 2

1回答

PDF.js无法在安卓11上显示来自externalFilesDir的PDF

、、

我使用PDF.js在我的安卓应用程序中显示PDF文件。在Android10之前，它工作得很好，但从"targetSdkVersion 30“开始，它就不再工作了。如果我想打开并显示一个PDF文件，PDF.js会显示 Missing PDF "file:///storage/emulated/0/Android/data/<App-ID>&#x

浏览 21提问于2020-10-06得票数 4

1回答

Drupal PDF查看器

、

我正在搜索Drupal 7的PDF查看器，它不会呈现为Mozilla Firefox PDF或google的PDF。有人知道我需要什么吗？

浏览 0提问于2016-01-20得票数 1

回答已采纳

2回答

如何使用pdfjs在整个pdf中旋转单页？

、、

我从mozilla下载了pdf.js库。它在打开我的pdf文件和查看它们时效果很好。问题是，当我点击旋转页面时，它会旋转所有页面，而不仅仅是选定的页面。我试着用谷歌搜索并阅读了pdf.js的手册，但在pdf.js帮助中的旋转单个pdf页面上找不到相关资源

浏览 101提问于2017-08-22得票数 3

2回答

PDF模块，PDF全页高或全卷轴

、

我设法得到了一个PDF的内容类型，并显示了完整的PDF。我用drupal 7中的PDF模块来完成这个操作，但是我不想要1页的高度(A4总是这样)，也不想要文档的全部高度。当我尝试使用PDF:连续滚动选项时，它会中断。对我来说，这也应该是一个解决方案，这只是文件的高度。未定义在renderPage ( pdf.js:28 ) pdf.js:28 Uncaught (in允诺) Refe

浏览 0提问于2017-05-06得票数 0

回答已采纳

点击加载更多