如何使用 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 文件? 的相关文章

  • 防止垃圾邮件按钮呼叫功能

    如何防止调用函数时出现垃圾邮件按钮 就像用户只能在按钮上每 1 秒调用一次该函数 有办法做到吗 因为我尝试了 setTimeout 但没有成功 它仍然在发送垃圾邮件 顺便说一句 我使用 Jquery 这是我的代码
  • 在版本 4.4.6 中禁用 ckeditor 上下文菜单

    我在 Rails4 项目中使用 ckeditor 我尝试了 ckeditor gem 和 ckeditor rails gem 来提供 ckeditor 库 这里有多个帖子 人们希望删除 ckeditor 上下文菜单 以便可以显示本机浏览器
  • 如何使用有角度的材料创建卡片网格?

    我正在尝试使用 ng repeat 创建每行三张卡片的网格 我有一个普通的 javascript 对象数组附加到范围 下面的代码将为每张卡创建一个新行 div div
  • Number.IsNaN() 比 isNaN() 更糟糕吗

    Soooooo isNaNJavaScript 显然被破坏了 比如 isNaN isNaN isNaN true isNaN false isNaN 0 返回 false 当它们看起来都是 不是数字 在 ECMAScript 6 中 草案包
  • 如何在网站上使用 svg 元素制作块的屏幕截图?

    我在网站上创建了一个构造函数 其本质是将所选元素及其颜色 svg中的元素 添加到访问者选择的背景和背景颜色 png中的背景 中 然后必须单击 保存 结果 按钮并仅执行工作区的屏幕截图 我写了这个脚本 但它需要屏幕截图 但只有背景 并忽略选定
  • 两列表:一列尽可能小,另一列占据其余部分

    我在 div 中有一个 to columns 表 div table tbody tr td class action a a td td class content p Bigger text variable size p td tr
  • JavaScript 验证和 PHP 验证?

    我正在使用 jquery 验证插件来验证空表单 我还应该在 PHP 中检查一下以确保 100 正确吗 或者用 javascript 验证就可以了 谢谢 您应该始终在服务器上进行验证 如果用户以某种方式不使用 Javascript 提交表单
  • 如何使用 Greasemonkey 监视静态 HTML 页面的更改?使用哈希?

    我希望我的 Greasemonkey 脚本仅在其访问的静态页面具有与以前完全相同的内容时运行 现在我可以设置一个包含该页面哈希的变量 我正在寻找一种动态散列页面的方法 以便我可以将我的散列与生成的散列进行比较 关于如何即时实现散列的任何想法
  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其
  • 计算三次贝塞尔曲线的弧长、曲线长度。为什么不工作?

    我正在用这个算法计算弧长 三次贝塞尔曲线的长度 function getArcLength path var STEPS 1000 gt precision var t 1 STEPS var aX 0 var aY 0 var bX 0
  • onclick 事件中未调用函数

    我想在每个 YouTube 链接的末尾添加一些 HTML 以在 litebox 中打开播放器 到目前为止 这是我的代码 document ready function var valid url new RegExp youtube com
  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做
  • 为什么我的交互式图像仅在 Internet Explorer 上出现故障?

    我的问题 我为自己制作了一个图像地图 交互式图像 它在 Chrome safari 和 Firefox 上完美运行 然而 当我在可怕的互联网浏览器上尝试它时 它真的很糟糕 这些小点应该扩展到更大的盒子中 在互联网浏览器上它要么不起作用 要么
  • 如何计算特定字符在字符串中出现的次数

    我正在尝试创建一个函数来查看数组中的任何字符是否在字符串中 如果是 有多少个 我尝试计算每一种模式 但是太多了 我尝试使用 Python 中的 in 运算符的替代方案 但效果不佳 function calc fit element var
  • JavaScript eval("{}") 返回行为?

    根据ECMA 262 规范 http www ecma international org publications files ECMA ST Ecma 262 pdf 以下语句返回1 eval 1 eval 1 eval 1 var a
  • Google Maps API (v3) 添加/更新标记

    编辑 它现在可以工作 但如果用户不允许或没有基于位置的服务 则不会加载 请参阅 jsfiddle 示例接受的答案评论 我已经浏览了一些教程和问题 但我无法安静地理解正在发生的事情 或者在这种情况下 没有发生 当用户单击链接时 我正在加载地图
  • 如何从浏览器向服务器发送“页面将关闭”消息?

    我想向每个 html 文档添加一个脚本 JavaScript 该脚本向服务器发送两条消息 页面确实打开了 页面将关闭 此消息包含页面打开的时间 打开消息应在文档加载时 或加载完成时 发送 这是简单的部分 The close message
  • 使用 Enzyme 测试 `React.createRef` api

    我想测试下面的类 它使用React createRef api 不过 快速搜索并没有发现任何这样做的例子 有人成功过吗 我该如何嘲笑裁判 理想情况下我想使用shallow class Main extends React Component
  • react-native - 图像需要来自 JSON 的本地路径

    你好社区 我正在react native中开发一个测试应用程序 并尝试从本地存储位置获取图像 我实际在做什么 我将图像直接链接源提供给 var 并在渲染函数中调用此方法 react 0 14 8 react native 0 23 1 np
  • 在 iOS 7 Safari 中,如何区分通过边缘滑动与后退/前进按钮的 popstate 事件?

    在 iOS 7 Safari 中 现在有两种后退 前进导航方式 使用底部的传统后退 前进按钮箭头或从屏幕边缘滑动 我正在使用动画在 ajax 应用程序中的页面之间进行转换 但如果用户通过边缘滑动进行导航 我不想触发该转换 因为这本身就是一个

随机推荐

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

    我正在编写一个多线程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