html - 内联 PDF 查看器

标签 html ruby pdf

是否有 PDF 查看器,我可以将其嵌入到我的 HTML 中并根据需要设置样式。

实际上我需要显示一些 PDF 文件页面并自定义我自己的 UI(几个按钮可以翻页和评论)。

如果有任何 Ruby 解决方案(据我所知,它实际上与编程无关),那将是很棒的。

我想显示 pdf 因为:

  • 用户可以复制文本
  • 文本采用原始布局

所以我不想将其显示为图像或转换后的文本。但我想以简单的设计显示页面。没有 Flex 或其他任何东西。

最佳答案

是的,使用 HTML5 是可能的!

https://github.com/mozilla/pdf.js/

这是一个纯 javascript 库,它使用 HTML5 函数打开 PDF 文件并将其呈现在页面中。 我在以下浏览器中成功测试了该库:

  • IE9 和当前版本的 Google Chrome、Firefox、Safari
  • IE8 及更低版本不支持 pdf.js(缺少 HTML5 功能)

用法

在 HTML 文件中包含 javascript 库并添加一个 - 元素(是 HTML5 元素,因此它只能在 HTML5 浏览器中工作):

<body>
  <canvas id="the-canvas" style="border:1px solid black;"/>
</body>

使用与此类似的 javascript 调用在 Canvas 内呈现 PDF:

PDFJS.getDocument('your-file-goes-here.pdf').then(function(pdf) {
  pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);

    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext);
  });
});

关于html - 内联 PDF 查看器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5586717/

相关文章:

javascript - 使用循环在 HTML 中创建多条垂直线

.net - 如何在 XNA 引擎中嵌入 Ruby?

ruby - Array#sample 随机数生成器

javascript - 如何从 UWP(通用 Windows 平台)Web 应用程序启动 PDF

javascript - 显示互联网页面的 HTML

javascript - 当隐藏元素显示在屏幕上时重新运行函数

javascript - 为什么 html5 应用程序在浏览器中的工作方式与在 Cordova (Android) 中的工作方式不同?

ruby-on-rails - 为什么 Ruby 无法连接到我的 Tor 网络?

iOS 从应用程序内给定的 url 查看 PDF

python - Matplotlib:带有光栅化图的多页 PDF