如何使用 pdf.js

我正在考虑使用 PDF 文件(一个允许在网页中嵌入 pdf 的开源工具)。没有任何关于如何使用它的文档。

我假设我所做的是使用头部引用的脚本创建一个 html 页面,然后在主体中,使用文件名和位置的数组放置某种函数调用。有人能帮帮我吗?

177134 次浏览

Try 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});

NOTE: the "pdf.js" project mentioned here is https://github.com/Marak/pdf.js, and has been deprecated since this answer was posted. @Treffynnon's answer is about the still-active Mozilla project (https://github.com/mozilla/pdf.js) that most searchers will be looking for.

There is documentation available on their github readme. They cite the 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);
});
});