programing

pdf.js 사용 방법

nasanasas 2020. 9. 8. 08:03
반응형

pdf.js 사용 방법


pdf.js (웹 페이지에 pdf를 삽입 할 수있는 오픈 소스 도구) 사용을 고려 하고 있습니다. 사용 방법에 대한 문서가 없습니다.

내가하는 일은 헤더에서 참조 된 스크립트로 html 페이지를 만든 다음 본문에 파일 이름과 위치의 배열로 일종의 함수 호출을 넣는 것이라고 가정합니다. 누구든지 여기서 나를 도울 수 있습니까?


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 )에 대한 것입니다.


github readme 에서 사용할 수있는 문서가 있습니다 . 그들은 다음 예제 코드를 인용합니다 .

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

참고 URL : https://stackoverflow.com/questions/9328551/how-to-use-pdf-js

반응형