2012-02-17 32 views
80

Tôi đang xem xét sử dụng pdf.js (một công cụ nguồn mở cho phép nhúng pdf vào một trang web). Không có bất kỳ tài liệu nào về cách sử dụng nó.Cách sử dụng pdf.js

Tôi giả định những gì tôi làm là tạo một trang html với tập lệnh được tham chiếu trong tiêu đề, sau đó trong phần thân, tôi đặt một số chức năng gọi với một mảng tên tệp và vị trí. Có ai có thể giúp tôi ngoài này không?

+0

### Github Điều tôi chỉ mới bắt đầu một bài báo [PDF.js cài đặt trong một trang web] (https://github.com/mozilla/pdf.js/wiki/Setup-PDF .js-in-a-website) trên wiki dự án trên GitHub. ### Yêu cầu hoàn thành Nếu bạn có một số kinh nghiệm, vui lòng hoàn thành bài viết. –

+6

Tôi đang tìm kiếm điều tương tự. Tôi thấy đây là bước đi chi tiết nhất để thiết lập pdf.js, bắt đầu kết thúc. Chúc may mắn! http://www.worldwidewhat.net/2011/08/render-pdf-files-with-html5/ – Raj

+0

Thứ gì đó cao cấp hơn như http://viewerjs.org/ có lẽ là những gì bạn muốn. – max

Trả lời

32

Hãy thử 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}); 

LƯU Ý: các "pdf.js" dự án đề cập ở đây là https://github.com/Marak/pdf.js, và đã bị phản đối bởi vì câu trả lời này đã được đăng. Câu trả lời của @ Treffynnon là về dự án Mozilla vẫn còn hoạt động (https://github.com/mozilla/pdf.js) mà hầu hết người tìm kiếm sẽ tìm kiếm.

+0

Tôi thấy điều đó nhưng tôi đã nhầm lẫn về những thứ ở trên var = filename. Tôi có cần bất kỳ doc.addPage() nào để doc.text và hte triple doc.texts ở trên không? – Chris

+0

Một câu hỏi khác là tôi phải thay đổi điều gì. Tôi cho rằng "filename" đầu tiên của dòng cuối cùng tôi phải thay đổi, và các thuộc tính doc. Là nó? – Chris

+19

Đây có phải là tệp pdf.js khác không? – Swiss

47

Có tài liệu có sẵn trên github readme của chúng. Họ trích dẫn 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); 
    }); 
}); 
+14

Tài liệu không được viết rõ nhưng bạn trích xuất tệp pdf.js và giữ nguyên cấu trúc thư mục của nó. Sau đó, để xem một pdf bạn chỉ cần điều hướng đến tệp viewer.html (thông qua trình duyệt) với tệp được nối vào cuối. E.x. yoursite.com/directory_that_viewer_._html_is_in/viewer.html?file=somepdfthatyouhave.pdf Vị trí pdf vừa được chuyển thành biến GET cho tệp viewer.html. –

+1

Từ [github wiki] (https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website): * "Tuy nhiên, chúng tôi hỏi bạn có dự định nhúng người xem trong trang web của riêng bạn, rằng nó không chỉ là một phiên bản chưa sửa đổi. Vui lòng tái tạo nó hoặc xây dựng dựa trên nó. "* - đưa ra tài liệu [api documentation] không tồn tại của họ (http://mozilla.github.io/pdf .js/api /) dự án này đảm bảo bạn nhảy qua đủ số vòng để giữ hình dạng: \ – Philzen