Como usar o pdf.js [fechado]


92

Estou pensando em usar o pdf.js (uma ferramenta de código aberto que permite a incorporação de um pdf em uma página da web). Não existe nenhuma documentação sobre como usá-lo.

Presumo que o que faço é criar uma página html com o script referenciado no cabeçalho e, em seguida, no corpo, coloco algum tipo de chamada de função com uma matriz do nome do arquivo e localização. Alguém pode me ajudar aqui?


1
### Artigo Github Acabei de começar um artigo Setup PDF.js em um site na wiki do projeto no GitHub. ### Solicitação de conclusão Se você tem alguma experiência, conclua o artigo.
Édouard Lopez

Provavelmente, algo mais sofisticado, como viewerjs.org, é o que você deseja.
máx.

Quero extrair o arquivo xml incorporado do PDF, há alguma maneira de fazer isso?
Ananta Prasad

Respostas:


33

Experimente o Google 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});

NOTA: o projeto "pdf.js" mencionado aqui é https://github.com/Marak/pdf.js e está obsoleto desde que esta resposta foi postada. A resposta de @Treffynnon é sobre o projeto Mozilla ainda ativo ( https://github.com/mozilla/pdf.js ) que a maioria dos pesquisadores estará procurando.


Eu vi isso, mas estou confuso sobre o que está acima do nome do arquivo var =. Eu preciso de algum doc.addPage () para doc.text e hte triplo doc.texts acima disso?
Chris

Outra questão seria o que devo mudar. Presumo que o primeiro "nome do arquivo" da última linha que preciso alterar e as propriedades do doc. É isso?
Chris

25
Não é um pdf.js diferente?
Suíça

@Swiss, isso é de fevereiro, com votos positivos e marcado como a resposta. Eu diria que é isso que o OP estava procurando.
James Hill

14
Sim, é por isso que era tão confuso. O op aparentemente está se referindo ao projeto mozilla para exibir PDFs como html, mas o projeto referido no blog para o qual você faz um link é diferente para criar arquivos PDF usando javascript.
Suíça

50

Há documentação disponível em seu leiame no github . Eles citam o seguinte código de exemplo :

/* -*- 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
Não está bem documentado, mas você extrai o arquivo compactado pdf.js e deixa sua estrutura de diretório intacta. Em seguida, para visualizar um pdf, basta navegar até o arquivo viewer.html (via navegador) com o arquivo anexado ao final. Ex yourite.com/directory_that_viewer_._html_is_in/viewer.html?file=somepdfthatyouhave.pdf A localização do pdf é apenas passada como uma variável GET para o arquivo viewer.html.
Craig Lafferty de

4
Do wiki do github : "No entanto, perguntamos se você planeja incorporar o visualizador em seu próprio site, para que não seja apenas uma versão não modificada. Por favor, refaça a capa ou construa sobre ela." - devido à documentação api horrivelmente inexistente , este projeto garante que você
supere obstáculos
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.