如何使用 pdf.js [关闭]

Posted 2023-02-24

【中文标题】如何使用 pdf.js [关闭]

【英文标题】：How to Use pdf.js [closed]

【发布时间】：2012-03-08 20:53:38

【问题描述】：

我正在考虑使用pdf.js（一种允许在网页中嵌入 pdf 的开源工具）。没有任何关于如何使用它的文档。

我假设我所做的是使用标题中引用的脚本制作一个 html 页面，然后在正文中，我使用文件名和位置数组进行某种函数调用。有谁能帮帮我吗？

【问题讨论】：

### Github 文章我刚刚在 GitHub 上的项目 wiki 上开始了一篇文章 Setup PDF.js in a website。 ### 完成请求如果您有一些经验，请完成文章。

像viewerjs.org 这样更高级的东西可能是你想要的。

我想从PDF中提取嵌入的xml文件，有什么办法吗？

【参考方案1】：

试试谷歌pdf.js documentation

/* create the PDF document */

var doc = new pdf();
doc.text(20, 20, 'hello, I am PDF.');
doc.text(20, 30, 'i was created in the browser using javascript.');
doc.text(20, 40, 'i can also be created from node.js');

/* Optional - set properties on the document */
doc.setProperties(
  title: 'A sample document created by pdf.js',
  subject: 'PDFs are kinda cool, i guess',        
  author: 'Marak Squires',
  keywords: 'pdf.js, javascript, Marak, Marak Squires',
  creator: 'pdf.js'
);

doc.addPage();
doc.setFontSize(22);
doc.text(20, 20, 'This is a title');
doc.setFontSize(16); 
doc.text(20, 30, 'This is some normal sized text underneath.');

var fileName = "testFile"+new Date().getSeconds()+".pdf";
var pdfAsDataURI = doc.output('datauri', "fileName":fileName);

注意：此处提到的“pdf.js”项目是 https://github.com/Marak/pdf.js，自发布此答案以来已被弃用。 @Treffynnon 的回答是关于大多数搜索者正在寻找的仍然活跃的 Mozilla 项目 (https://github.com/mozilla/pdf.js)。

【讨论】：

我看到了，但我对 var=filename 上面的内容感到困惑。我是否需要任何 doc.addPage() 到 doc.text，以及上面的三倍 doc.texts？

另一个问题是我必须改变什么。我假设我必须更改最后一行的第一个“文件名”和文档属性。是这样吗？

这不是一个不同的pdf.js吗？

@Swiss，这是从 2 月开始的，带有赞成票，并标记为答案。我想说这就是 OP 想要的。

是的，这就是它如此令人困惑的原因。该操作似乎是指将 pdf 显示为 html 的 mozilla 项目，但您链接到的博客中提到的项目是使用 javascript 创建 pdf 文件的不同项目。

【参考方案2】：

在他们的github readme 上有可用的文档。 他们引用following example code：

/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */

//
// See README for overview
//

'use strict';

//
// Fetch the PDF document from the URL using promises
//
PDFJS.getDocument('helloworld.pdf').then(function(pdf) 
  // Using promise to fetch the page
  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);
  );
);

【讨论】：

没有很好的文档记录，但是您提取了 pdf.js zip 并保持其目录结构不变。然后要查看 pdf，您只需导航到 viewer.html 文件（通过浏览器），并将文件附加到末尾。前任。 yoursite.com/directory_that_viewer_._html_is_in/viewer.html?file=somepdfthatyouhave.pdf pdf 位置只是作为 GET 变量传递给 viewer.html 文件。

来自github wiki：“但是，我们确实询问您是否打算将查看器嵌入到您自己的站点中，它不仅仅是未修改的版本。请重新皮肤或建立在它之上。” - 鉴于他们可怕地不存在api documentation，这个项目确保你跳过足够多的箍来保持身材：\