如何使用pdf.js [关闭]


92

我正在考虑使用pdf.js(允许将pdf嵌入网页的开放源代码工具)。没有任何有关如何使用它的文档。

我假设我要做的是使用标题中引用的脚本制作一个html页面,然后在正文中放置某种函数调用,并在其中包含文件名和位置的数组。有谁可以帮我离开这里吗?


1
### Github文章我刚刚在GitHub上的项目Wiki上的网站上开始了一篇文章SetupPDF.js。###请求完成如果您有经验,请完成本文。
爱德华·洛佩兹

您可能想要更高级的内容,例如viewerjs.org
最高

我想从PDF中提取嵌入式xml文件,有什么办法吗?
阿南塔·普拉萨德

Answers:


33

试用Google'ing 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.text?
克里斯

另一个问题是我必须更改什么。我假设必须更改最后一行的第一个“文件名”,以及doc属性。是吗
克里斯

25
这不是pdf.js吗?
瑞士

@Swiss,这是从2月开始的投票,并标记为答案。我会说这是OP所寻找的。
James Hill

14
是的,这就是为什么如此令人困惑。貌似op指的是用于将pdfs显示为html的mozilla项目,但是您链接到的博客中引用的项目与使用JavaScript创建pdf文件的项目不同。
瑞士

50

他们的github自述文件上有可用的文档。他们引用了以下示例代码

/* -*- 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);
  });
});

19
它的文档记录不充分,但是您提取了pdf.js zip并保留了其目录结构。然后,要查看pdf,您只需导航到viewer.html文件(通过浏览器),并将文件附加到末尾即可。例如yoursite.com/directory_that_viewer_._html_is_in/viewer.html?file=somepdfthatyouhave.pdf pdf位置只是作为GET变量传递给了viewer.html文件。
Craig Lafferty 2014年

4
来自github Wiki“但是,我们确实询问您是否打算将查看器嵌入到自己的网站中,它不仅是未经修改的版本。请重新添加外观或在其上进行构建。” -考虑到他们几乎不存在的api文档,该项目可确保您跳过足够的圈来保持状态:\
Philzen 2016年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.