Comment utiliser pdf.js [fermé]

92

J'envisage d' utiliser pdf.js (un outil open source qui permet d'intégrer un pdf dans une page Web). Il n'y a pas de documentation sur son utilisation.

Je suppose que ce que je fais est de créer une page html avec le script référencé dans l'en-tête, puis dans le corps, je mets une sorte d'appel de fonction avec un tableau du nom et de l'emplacement du fichier. Est-ce que quelqu'un pourrait m'aider?

Chris
la source
1
### Article Github Je viens de commencer un article Setup PDF.js dans un site Web sur le wiki du projet sur GitHub. ### Demande d'achèvement Si vous avez de l'expérience, veuillez compléter l'article.
Édouard Lopez
Quelque chose de plus haut niveau comme viewerjs.org est probablement ce que vous voulez.
max
Je souhaite extraire un fichier XML intégré à partir d'un PDF, existe-t-il un moyen de le faire?
Ananta Prasad

Réponses:

33

Essayez Googleing 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});

REMARQUE: le projet "pdf.js" mentionné ici est https://github.com/Marak/pdf.js , et est obsolète depuis que cette réponse a été publiée. La réponse de @ Treffynnon concerne le projet Mozilla toujours actif ( https://github.com/mozilla/pdf.js ) que la plupart des chercheurs rechercheront.

James Hill
la source
J'ai vu cela mais je suis confus à propos de ce qui se trouve au-dessus du var = filename. Ai-je besoin de l'un de ces doc.addPage () à doc.text, et de trois doc.texts au-dessus?
Chris
Une autre question serait ce que je dois changer. Je suppose que le premier "nom de fichier" de la dernière ligne que je dois changer, ainsi que les propriétés doc. Est-ce que c'est ça?
Chris
25
N'est-ce pas un pdf.js différent?
Suisse
@Swiss, c'est à partir de février, avec des votes positifs, et marqué comme la réponse. Je dirais que c'est ce que le PO recherchait.
James Hill
14
Ouais, c'est pourquoi c'était si déroutant. L'op fait apparemment référence au projet mozilla pour afficher des fichiers PDF au format html, mais le projet auquel vous faites référence dans le blog auquel vous créez un lien est différent pour la création de fichiers pdf en utilisant javascript.
Suisse
50

Une documentation est disponible sur leur readme github . Ils citent l' exemple de code suivant :

/* -*- 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);
  });
});
Treffynnon
la source
19
Ce n'est pas bien documenté mais vous extrayez le zip pdf.js et laissez sa structure de répertoire intacte. Ensuite, pour afficher un pdf, vous accédez simplement au fichier viewer.html (via le navigateur) avec le fichier ajouté à la fin. Ex yoursite.com/directory_that_viewer_._html_is_in/viewer.html?file=somepdfthatyouhave.pdf L'emplacement pdf est simplement passé en tant que variable GET au fichier viewer.html.
Craig Lafferty
4
Depuis le wiki github : "Cependant, nous vous demandons si vous prévoyez d'intégrer le visualiseur dans votre propre site, qu'il ne s'agisse pas simplement d'une version non modifiée. Veuillez le redessiner ou construire dessus." - étant donné leur documentation api horriblement inexistante , ce projet s'assure que vous sautez à travers suffisamment de cerceaux pour rester en forme: \
Philzen