วิธีใช้ pdf.js [ปิด]


92

ฉันกำลังพิจารณาใช้pdf.js (เครื่องมือโอเพนซอร์สที่ช่วยให้สามารถฝังไฟล์ pdf ในหน้าเว็บได้) ไม่มีเอกสารเกี่ยวกับวิธีการใช้งาน

ฉันคิดว่าสิ่งที่ฉันทำคือสร้างหน้า html ด้วยสคริปต์ที่อ้างถึงในส่วนหัวจากนั้นในเนื้อหาฉันใส่การเรียกฟังก์ชันบางอย่างด้วยอาร์เรย์ของชื่อไฟล์และตำแหน่ง ใครสามารถช่วยฉันที่นี่?


1
### บทความ Github ฉันเพิ่งเริ่มบทความตั้งค่า PDF.js ในเว็บไซต์บนวิกิโครงการบน GitHub ### ขอความสมบูรณ์หากคุณมีประสบการณ์กรุณากรอกบทความ
Édouard Lopez

สิ่งที่อยู่ในระดับสูงเช่นviewerjs.orgอาจเป็นสิ่งที่คุณต้องการ
สูงสุด

ฉันต้องการแยกไฟล์ xml ที่ฝังออกมาจาก PDF มีวิธีใดบ้างที่จะทำได้?
อนันต

คำตอบ:


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 = ฉันต้องการ doc.addPage () เพื่อ doc.text และ hte triple doc.text ด้านบนหรือไม่
คริส

อีกคำถามหนึ่งคือฉันต้องเปลี่ยนอะไร ฉันถือว่า "ชื่อไฟล์" แรกของบรรทัดสุดท้ายที่ฉันต้องเปลี่ยนและคุณสมบัติของเอกสาร มันคืออะไร?
คริส

25
นี่ไม่ใช่ pdf.js ที่แตกต่างกันใช่ไหม
สวิส

@Swiss นี่คือเดือนกุมภาพันธ์โดยมีการโหวตขึ้นและทำเครื่องหมายว่าเป็นคำตอบ ฉันจะบอกว่านี่คือสิ่งที่ OP กำลังมองหา
James Hill

14
ใช่ว่าทำไมมันถึงสับสน ดูเหมือนว่า op จะอ้างถึงโครงการ mozilla สำหรับการแสดงไฟล์ pdf เป็น html แต่โครงการที่อ้างถึงในบล็อกที่คุณเชื่อมโยงเป็นโครงการที่แตกต่างกันสำหรับการสร้างไฟล์ pdf โดยใช้ javascript
สวิส

50

มีเอกสารที่มีอยู่ของพวกเขาในREADME 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
มันไม่ได้รับการจัดทำเป็นเอกสารอย่างดี แต่คุณแตกไฟล์ zip pdf.js และปล่อยให้โครงสร้างไดเร็กทอรีเหมือนเดิม จากนั้นในการดู pdf คุณเพียงแค่ไปที่ไฟล์ viewer.html (ผ่านเบราว์เซอร์) พร้อมกับไฟล์ที่ต่อท้าย เช่น yoursite.com/directory_that_viewer_._html_is_in/viewer.html?file=somepdfthatyouhave.pdf ตำแหน่ง pdf เพิ่งส่งเป็นตัวแปร GET ไปยังไฟล์ viewer.html
Craig Lafferty

4
จากgithub wiki : "อย่างไรก็ตามเราจะถามว่าคุณวางแผนที่จะฝังวิวเวอร์ในไซต์ของคุณเองหรือไม่ไม่ใช่แค่เวอร์ชันที่ไม่มีการแก้ไขโปรดทำการสกินใหม่หรือสร้างขึ้นมาใหม่ - จากเอกสาร API ที่ไม่มีอยู่จริงของพวกเขาโครงการนี้ทำให้แน่ใจว่าคุณกระโดดผ่านห่วงเพียงพอที่จะอยู่ในรูปทรง: \
Philzen
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.