如何使用 pdf.js 渲染 pdf 文件?

2024-01-26

我创建了一个 html 文件,内容如下索引.html

<html>
  <head>
    <script type="text/javascript" src="./pdf.js"></script>
    <script type="text/javascript" src="./hello.js"></script>
  </head>
  <body>
    <canvas id="the-canvas" style="border:1px solid black;"/>
  </body>
</html>

hello.js有内容

PDFJS.disableWorker = true;
var pf = PDFJS.getDocument('./helloworld.pdf')
pf.then(function(pdf) {
  pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);

    //
    // Prepare canvas using PDF page dimensions
    //
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    //
    // Render PDF page into canvas context
    //
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext);
  });
});

但是当我将浏览器指向index.html 时,pdf 未正确显示。 我希望用户能够在他的计算机上选择一个 pdf 文件并在浏览器窗口中显示该 pdf 文件。


看起来您在使用时遇到了这个问题file:协议而不是http: or https:。不同协议之间存在不同的安全考虑。

Here's 关于使用的博客文章XMLHttpRequest与本地文件 http://ejohn.org/blog/tightened-local-file-security/, and a 关于 Mozilla Firefox 票证的讨论 https://bugzilla.mozilla.org/show_bug.cgi?id=230606.

门票有几张(包括this one https://github.com/mozilla/pdf.js/issues/2354 and this one https://github.com/mozilla/pdf.js/issues/3134)关于可能提供指点的项目。来自的评论这张票 https://github.com/mozilla/pdf.js/issues/1913 says:

典型的 pdf.js 用例需要使用 Web 服务器和现代 HTML5 浏览器。

我建议解决你的问题你只需通过网络服务器运行它即可使用http协议。 Nginx 和 Apache 易于安装和设置。

如果这不起作用,请使用以下命令为您的系统生成 pdf.js 和 pdf.worker.jsthis https://github.com/mozilla/pdf.js#building-pdfjs如果上述步骤不起作用。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 pdf.js 渲染 pdf 文件? 的相关文章

随机推荐

  • 让线程等待计时器或信号?

    我正在编写一个多线程Python应用程序 其中每个线程应该在以下情况下唤醒 来自主线程的信号 自行启动的 Timer 调用 换句话说 线程应该根据它们为自己设置的计时器唤醒 并且能够在相关事件出现时响应来自管理线程的信号 实现双重 定时器
  • 为什么 sql server 在 NVarchar 字段中存储问号字符而不是日语字符?

    我正在尝试将日语字符存储在 SQL Server 2000 数据库的 nvarchar 字段中 当我运行如下更新语句时 update blah set address N where key ID 1 从 SQL Server Manage
  • 我需要将利率转换为小数值

    我有以下内容 应该返回利息除以 100 的值 我如何实现这个 import math p int raw input Please enter deposit amount n r float raw input Please input
  • 有没有正确的方法来子类 Tensorflow 的数据集?

    我正在研究可以处理自定义 Tensorflow 数据集的不同方法 并且我习惯于查看PyTorch 的数据集 https pytorch org tutorials beginner basics data tutorial html cre
  • 一个或两个字母后跟 3-4 个数字

    我正在尝试找到正确的正则表达式模式 以允许一两个字母后跟 3 到 5 个数字 最后可选一个字母 最后应该允许非字母数字来包裹字符串 Allowed M394 MP4245 TD493 X4958A V49534 U394U A5909 No
  • Heroku 部署错误:找不到模块“/app/index.js”

    我正在尝试在 Heroku 上部署 mt 应用程序 但总是遇到相同的错误 2016 08 18T10 16 10 988982 00 00 heroku web 1 Starting process with command node in
  • React Native 组件中的 onEnter/onExit 方法 (react-native-router-flux)

    因此 我可以在路由器定义中的应用程序根目录中使用 onEnter onExit 方法 并且它工作得很好
  • 有没有 Doctrine 和 Propel 的比较?

    我看过很多 Doctrine 与 Propel 的比较 但没有一个真正说服我选择 Doctrine 而不是 Propel 我已经使用 Propel 一段时间了 几乎我读到的每一个比较都表明 Propel 没有被很好地记录为第一个问题 而且我
  • ASIHTTPRequest 与 AFNetworking 与 NSUrlRequest

    过去我用过ASIHTTPRequest但现在有NSURLRequest 我们应该使用NSURLRequest现在 有什么缺点吗 对于现在阅读本文的人 我最终使用了AFNetworking正如答案中提到的 https github com A
  • asp.net缓存多线程锁webparts

    我有以下场景 假设我们有两个不同的 Web 部件对相同的数据进行操作 一个是饼图 另一个是数据表 在其 Page Load 中 它们从数据库异步加载数据 加载后将其放入应用程序缓存中以供进一步使用或由其他 Web 部件使用 因此每个 Web
  • 使用 keras tokenizer 处理不在训练集中的新单词

    我目前正在使用 Keras Tokenizer 创建单词索引 然后将该单词索引与导入的 GloVe 字典进行匹配以创建嵌入矩阵 然而 我遇到的问题是 这似乎破坏了使用词向量嵌入的优点之一 因为当使用经过训练的模型进行预测时 如果它遇到不在分
  • JAX-WS/CXF 中的 /encoded 和 /literal 支持

    我从未在 java 中使用过 RPC 调用 所以我对需要研究的一些遗留代码有点困惑 如果可能的话 我希望您能帮助我阐明如何将 CXF 与 RPC 结合使用 1 CXF不支持rpc encoded调用 JAXWS 2 0 不支持 Rpc 编码
  • 不精确浮点常数的警告

    诸如 为什么 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 8 不是 让我想到 最好让编译器警告浮点常量 它舍入到二进制浮点类型中最接近的可表示形式 例如 0 1 和 0 8 以基数 2 浮点舍入 否则它们需要无限量的
  • 如何编译 GnuTLS

    我尝试在 Centos 6 2 上多次编译 GnuTLS 库 但没有成功 这些是步骤 我下载了荨麻2 4 root localhost opt wget http www lysator liu se nisse archive nettl
  • AngularJS 模板。内部JS不执行

    我有很多模板html页面 其中包含js代码 当我的 RouteProvider 加载此模板之一时 JS 不会执行 我不想使用 eval 我可以在外部 js 文件中编写代码并使用 requireJS 但我不知道如何使用 requireJS 停
  • JSON 数组结构变体

    以下是 3 种 JSON 数组结构格式 第一个是 JSON org 上概述的 是我熟悉的 格式 1 People name Sally age 10 name Greg age 10 第二个是命名数组元素的细微变化 我个人并不关心它 你不在
  • 如何在 Eclipse 中包含 javax.jms.* ?

    我正在尝试使用 eclipse 实现 JMS 但是当我尝试保存代码时 它表明javax jms cannot be resolved并且有no suggestions以及它推荐的 我怎样才能包含它并使用它 当我谷歌搜索时 我发现 javax
  • 如何找出我的控制台应用程序正在哪个目录中运行?

    如何找出我的控制台应用程序在 C 中运行的目录 要获取 exe 文件所在的目录 AppDomain CurrentDomain BaseDirectory 获取当前目录 Environment CurrentDirectory
  • Meteor JS 无法对数据进行排序

    我的主体中有一个按钮 单击该按钮时 应按降序排序 当我这样做时 什么也不会发生 我相信我的代码是正确的 但也许我遗漏了一些东西 这是js Tasks new Mongo Collection tasks Template body even
  • 如何使用 pdf.js 渲染 pdf 文件?

    我创建了一个 html 文件 内容如下索引 html