Pdf.js: Como fazer o pdf.js funcionar?

Este é um lugar para relatar bugs. Não é um fórum de suporte.
Por favor, leia o README na página inicial e veja o visualizador e exemplos
http://mozilla.github.io/pdf.js/web/viewer.html
http://jsbin.com/pdfjs-helloworld-v2/edit#html , ao vivo
http://jsbin.com/pdfjs-prevnext-v2/edit#html , ao vivo

Obrigado benbro,
Eu não sabia disso - eu dei uma olhada em todos os documentos de suporte sem sucesso.

Você poderia sugerir um site que pudesse oferecer esse suporte?
Desde já, obrigado.

Todas as informações que você está procurando estão no README na página inicial:
https://github.com/mozilla/pdf.js/blob/master/README.md
Olhe na seção de perguntas.

@AliND Os exemplos fornecidos por @benbro devem web/viewer.html , portanto, visitar a pasta raiz resultará apenas em uma lista de pastas.

Você está tentando fazê-lo funcionar em um servidor da web ou em uma instância local de XAMPP / WAMP? Publique quaisquer informações adicionais (mensagens de erro / avisos exatos do console e sistema operacional / navegador) se você continuar recebendo erros. Se você estiver enviando para um servidor da web, um link para o seu visualizador também pode ajudar a rastrear quaisquer problemas. Ficaremos felizes em ajudar se você realmente não conseguir descobrir por si mesmo. :)

@timvandermeij Primeiramente, agradeço sua amável resposta. Agradeço muito também a @benbro , mas os links não me ajudaram a resolver o problema.

Percebi que muitas pessoas estão (estavam) tendo o mesmo problema. Alguns não resolveram, enquanto aqueles que resolveram não mostraram os passos! Acredito que escrever um guia tão pequeno sobre como fazê-lo funcionar para iniciantes seria muito útil.

@timvandermeij , não consigo instalar o XAMPP ou qualquer outro agente de servidor por alguns motivos. Acabei de criar uma conta gratuita, que você pode acessar com os seguintes detalhes de usuário de ftp:
Nomes de host: pdfjs.eu.pn
Nome de usuário do FTP: 1468147_admin
Senha do FTP: hello123?

Tentei três abordagens diferentes e recebi três avisos de PDF diferentes:

1- Baixei tudo com WinHTTrack, depois carreguei e recebo este erro:
http://pdfjs.eu.pn/pdf.js/web/viewer.html
ou "InvalidPDFException". É estranho, no entanto, que eu pudesse abri-lo offline (sem o servidor instalado) usando o Safari, embora não totalmente correto.

2- Recebo este erro (nenhuma mensagem de aviso), mas a página não exibe
http://pdfjs.eu.pn/pdf2.js/web/viewer.html

3- Se eu fizer upload de toda a pasta compactada (todos os arquivos), recebo este erro:
[um erro ocorreu no processamento desta diretiva]
e então, o design se perde, tudo o que mostra são alguns botões e campos.

Eu realmente aprecio sua ajuda.
Esperando por suas sugestões - Muito obrigado
AliND

Olhando para http://pdfjs.eu.pn/pdf.js/build/pdf.js , há "GET" substituído por "GET.html" em seu servidor (provavelmente programa de espelhamento), por exemplo:

      };

      xhr.open('GET.html', this.url);
      for (var property in this.httpHeaders) {
        var value = this.httpHeaders[property];

O http://mozilla.github.io/pdf.js/build/pdf.js está sem ".html". Fechando o problema como inválido.

use git para puxar o gh-pages brach com o código de produção: git clone -b gh-pages https://github.com/mozilla/pdf.js.git pdfjs-gh-pages

Muito obrigado @yurydelendik - Agradeço muito a sua contribuição.

No entanto, sou um novato com php e javascript.

Tentei seu conselho (GET), e é realmente útil. Agora, o carregador mostra, mas não o documento. Na verdade, quando fiz o upload das pastas web e src pela primeira vez, fiz isso com base na sua dica no seguinte tópico:
https://github.com/mozilla/pdf.js/issues/2371 (observe que o erro que recebi neste caso foi: [ocorreu um erro ao processar esta diretiva])

Não conheço Yury, mas parece que muitos iniciantes enfrentam o mesmo problema. Quer dizer, eu acredito fortemente que existe uma maneira fácil como no exemplo a seguir (mencionado antes), onde você apenas carrega as pastas para fazer funcionar, será muito útil para mim, assim como para muitos outros.
http://www.worldwidewhat.net/2011/08/render-pdf-files-with-html5/

Não quero parecer que estou colocando meu ruído no negócio de outras pessoas, mas fornecer um tutorial muito curto sobre isso para iniciantes, na página principal do Pdf.js, seria muito útil.

Independentemente de meu problema estar resolvido ou não, agradeço a todos pela gentil ajuda.
Tudo de bom//
AliND

Para iniciantes, muitas coisas podem dar errado. A primeira coisa que recomendo aos iniciantes é seguir o arquivo README, FAQs e conselhos fornecidos nas edições. Você conseguiu configurar o node.js, clonar o projeto usando git e compilá-lo? Você tentou seguir meu conselho para usar o comando git acima?

A implantação do pdf.js na plataforma personalizada está fora do escopo deste projeto, no entanto, ficaremos satisfeitos em aceitar as instruções passo a passo detalhadas dos contribuidores / especialistas para uma plataforma específica (na forma de página wiki). Se você acha que está faltando alguma coisa e sabe como resolver o caso comum, crie uma página wiki.

@AliND Parece que estão faltando alguns arquivos. O visualizador em http://pdfjs.eu.pn/pdf.js/web/viewer.html parece bom para mim, mas o console afirma que:

 "NetworkError: 404 Not Found - http://pdfjs.eu.pn/pdf.js/build/compressed.tracemonkey-pldi-09.pdf"

ou seja, o arquivo PDF não existe nesse local. Coloque lá, e deve ficar bem.

O segundo link não está funcionando porque estão faltando os seguintes arquivos:

 "NetworkError: 404 Not Found - http://pdfjs.eu.pn/pdf2.js/external/webL10n/l10n.js"
 l10n.js
 "NetworkError: 404 Not Found - http://pdfjs.eu.pn/pdf2.js/external/jpgjs/jpg.js"
 jpg.js
 "NetworkError: 404 Not Found - http://pdfjs.eu.pn/pdf2.js/external/webL10n/l10n.js"
 l10n.js
 "NetworkError: 404 Not Found - http://pdfjs.eu.pn/pdf2.js/external/jpgjs/jpg.js"

Verifique e certifique-se de que os arquivos mencionados podem ser encontrados nesse caminho. Pelo que posso dizer, isso deve bastar. Dica: use o console do Firefox ( CTRL + Shift + K ) para ver os erros que mencionei acima; eles o ajudarão a rastrear quaisquer problemas.

@AliND http://pdfjs.eu.pn/pdf.js/web/viewer.html agora está parcialmente funcionando porque adicionei o arquivo PDF ao diretório de compilação. O fato de isso ser necessário pode indicar que algo suspeito aconteceu durante o processo de construção. Vou analisar isso um pouco mais para você e espero dar um feedback melhor.

@AliND Aqui está: http://pdfjs.eu.pn/pdf3.js/web/viewer.html

O que eu fiz:

1. Baixe https://github.com/mozilla/pdf.js/archive/master.zip.
2. Extraia.
3. Carregue a pasta inteira para a pasta pdf3.js em sua conta de FTP (deixei de fora dois grandes arquivos PDF de teste, pois não são necessários e o servidor FTP gratuito estava tendo alguns problemas com eles).

Nada de especial, tão estranho que está funcionando para mim. Definitivamente, faltam algumas pastas no segundo link, por isso não funcionou. Não tenho ideia de por que o primeiro link não está funcionando da maneira que deveria, mas acho que a construção do PDF.js não foi totalmente bem-sucedida.

Embora isso funcione muito bem, concordo que é melhor compilá-lo em vez de apenas descompactá-lo. Espero que você possa trabalhar com isso por enquanto. Nesse ínterim, tentarei construir o PDF.js sozinho e testarei em seu servidor. Se eu conseguir fazer isso funcionar, também postarei as etapas e, com sorte, todos os problemas serão corrigidos :-)

@AliND A versão construída também está funcionando para mim, embora eu admita que tive que descobrir um pouco como funcionava. Nunca criei PDF.js antes, então comecei com https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website-%28Debian-Ubuntu%29#wiki -Setup_testing_environnement, mas isso não me deu um bom resultado. Fiz o seguinte para fazê-lo funcionar no seu servidor (link aqui: http://pdfjs.eu.pn/pdf.js-build/web/viewer.html):

1. Defina o final de linha correto se você estiver no Windows como eu: git config --global core.autocrlf input (antes da próxima etapa, ou a etapa 3 falhará!).
2. Clone o repositório do meu fork, usando git clone https://github.com/timvandermeij/pdf.js.git (mas você deve usar o repositório https://github.com/mozilla/pdf.js sempre atualizado).
3. Execute o comando make: node make generic .
4. Depois disso, ignorei o resto de https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website-%28Debian-Ubuntu%29#wiki -Setup_testing_environnement, desde não funcionou para mim. Não estava copiando os arquivos certos. O que fiz foi ir para a pasta build/generic que foi criada na etapa 3 e enviar a pasta build e web para o servidor web. Isso foi o suficiente.

Espero que seus problemas sejam resolvidos seguindo as etapas que forneci aqui e em meu comentário anterior. Boa sorte (e desculpe pela parede de texto!). :-)

@yurydelendik Eu também acho o manual em https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website-%28Debian-Ubuntu%29#wiki -Setup_testing_environnement um pouco confuso. Na seção From build to production por exemplo, você copia alguns arquivos para um diretório de produção, mas pdf.js si não é copiado, causando um diretório de produção com apenas os arquivos do visualizador e não os arquivos principais. Tenho a sensação de que faltam passos aí. Você poderia verificar isso? Também posso reescrever a página wiki usando as etapas acima, se você quiser, porque acho que isso ficará mais claro para os iniciantes (ou precisamos estender a página wiki atual com mais etapas para incluir os arquivos principais).

@timvandermeij , então você seguiu as instruções do ubuntu para configurá-lo no Windows? sim, você precisará de um ambiente especial para o Windows fazer isso (não é fácil de configurar para iniciantes, por exemplo, https://github.com/mozilla/pdf.js/wiki/Setting-up-pdf.js-Development-Environment-for -Janelas). Sim, o wiki é confuso, mas um interesse em "ambiente de teste" já indica que não é um iniciante. Mas sim, se você achar confuso e encontrar o caminho certo, por favor, faça uma mudança (mas no caso do windows ele merece outra página wiki)

Entrada adicionada às Perguntas frequentes: https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#wiki -gh-pages

@yurydelendik Obrigado. Praticamente fiz no Windows o mesmo que faria no Arch Linux, por exemplo, mas tentarei estender o wiki. :)

@yurydelendik Estendi a página de instruções do Linux em https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website-%28Linux%29 para corrigir os problemas que experimentei com e também para corrigir alguns erros textuais. Essa página parece boa para mim agora. Mais tarde neste dia, farei o mesmo tipo de página, mas depois focarei no Windows (que atualmente é um item de tarefa). Esperançosamente, adicionar mais instruções causará menos confusão entre os usuários. :)

Editar: aqui está a versão do Windows: https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website-%28Windows%29

Espero que você esteja feliz com as mudanças feitas nas páginas Linux e Windows do wiki. Acho que são mais fáceis de entender agora, e agora também temos documentação para Windows :)

@timvandermeij obrigado por fazer isso.

@timvandermeij : O que você fez é excelente; obrigado por cada segundo que você passou lá. Estou 100% certo de que isso será útil para muitos outros também. A verificação está em andamento, eu voltarei com o resultado em breve.

@yurydelendik : Muito obrigado pela contribuição, parece que Tim fez tudo!

Obrigado novamente e tudo de bom //
AliND

@AliND , @yurydelendik Muito feliz em ajudar! Eu realmente gostaria de ouvir o resultado. :-)

@timvandermeij
Inacreditável, tudo o que precisava ser feito era inserir o arquivo pdf na pasta de construção!

As únicas pastas necessárias são a web! e a construção (com apenas o pdf.js e o arquivo pdf a serem construídos). Além disso, a pasta locale (com locale.properties dentro dela, se copiarmos o arquivo do github para o servidor local) deve ser incluída na pasta web.

Por este método bastante fácil e direto, o crédito vai para você @timvandermeij pela orientação sobre onde colocar o arquivo pdf (dentro da pasta de compilação), e para @yurydelendik por descobrir o problema GET.html.

http://pdfjs.eu.pn/pdffinal/web/viewer.html

Mas ainda há um problema, ele vê perfeitamente no Firefox, Chrome e Opera. Para Explorer e Opera, no entanto, existem dois erros:
Safari: PDF ausente "sample.pdf". Mesmo assim, o carregador funciona bem!
Explorer: apenas o estilo, nada carrega!

Quer dizer, eu sinto que é estranho porque o compatible.js está lá, e eu me pergunto o que pode causar esse comportamento para esses navegadores. De qualquer forma, também carreguei todos os outros arquivos e pastas, mas não tive sorte !.

@timvandermeij : Se eu usar seu método e carregar a pasta inteira como fiz antes, recebo o seguinte erro no link a seguir. Observe que, independentemente de eu extrair e fazer upload ou fazer upload e extrair -> mesmo problema. Além disso, pdf.js-master.zip & mozilla-pdf.js-v0.5.5-1283-gc682c25.zip são os mesmos arquivos, então eu me pergunto por que dois de cada vez.

Eu simplesmente não entendo o porquê! Eu até baixei a pasta pdf3.js que você carregou e carreguei novamente! e ainda assim, não funciona!

Quer dizer, o que realmente me preocupa é o motivo pelo qual ele não está funcionando com os outros dois navegadores!

Alguma ideia?

@timvandermeij Instalei o GIT e
1- Existe algum motivo pelo qual o link que postei no meu post anterior não está funcionando no IE e Safari?
2- Quando você carregou a pasta master, você fez alguma modificação depois?

Obrigado novamente - agradeço sua ajuda e também a ajuda de @yurydelendik .

Tudo de bom,
AliND

@timvandermeij @yurydelendik

Consegui fazer funcionar, obrigado Tim - usei o inspetor de elementos do Safari desta vez e, por alguns motivos, ele está direcionando para web / sample.pdf em vez de build / sample.pdf. O mesmo vale para o Internet Explorer! Observe que os links internos no arquivo pdf não funcionam no IE, mas isso não é um problema.

Sem dúvidas, o método de construção é o correto, embora seja possível criar viewer.js separado para cada arquivo pdf.

Agora, se você for para http://pdfjs.eu.pn/pdffinal/web/viewer.html , ele funciona em todos os 5 navegadores mencionados. (nota: às vezes, os navegadores não conseguem encontrar alguns arquivos neste servidor gratuito, mas no servidor pago - funciona sem problemas).

Para futuros usuários, uma maneira fácil é:
1- Clone http://mozilla.github.io/pdf.js/web/viewer.html (você pode usar HTTrack).
2- Você terá duas pastas: web & build (a última terá pdf.js que é o mais importante - HTTrack neste caso, combine todas as ações de construção neste arquivo)
2- Abra o pdf.js (pasta de compilação) e altere GET.html para GET
3- Abra viewer.js (pasta da web) e altere o nome do arquivo pdf para o seu próprio.
4- Coloque seu arquivo pdf nas pastas web (Safari e IE) e build (outros navegadores) (você pode alterar um pouco, coloque o pdf.js na pasta web, então não haverá necessidade de incluir o mesmo pdf duas vezes, mas isso pode exigir algum trabalho!)
5- Upload
6- Deve estar funcionando agora! note que esse método pode ter falhas que eu não conheço.

@timvandermeij Só não entendo porque não funciona quando

De qualquer forma, muito obrigado pela sua ajuda e suporte, e eu diria novamente, de acordo com as instruções de @timvandermeij , "o método correto" é o de compilar; mas, como sou pesquisador de finanças, não consigo me aprofundar no assunto por questões de tempo.

Obrigado novamente e tudo - tudo de bom //
Todos

@AliND Bom que você fez funcionar! Na verdade, o modo de construção é o melhor caminho a seguir, mas o outro método também deve funcionar bem. Eu não fiz nada além de baixar o arquivo ZIP e extraí-lo no servidor. Nenhuma outra modificação. Funcionou perfeitamente, por isso é estranho que não funcione para você. No entanto, o mais importante é que ele funcione em todos os navegadores para o seu propósito.

Também obrigado por colocar seus passos aqui. Pode ajudar futuros usuários que ainda tenham problemas com as páginas wiki atualizadas. O caminho descrito nas páginas wiki é definitivamente o caminho a seguir e é um método de trabalho, mas se por algum motivo não funcionar para alguém, seus passos podem servir de ajuda.

Não sei como um link errado para um arquivo PDF só pode quebrar o Safari e o IE, e não os outros navegadores. Talvez haja um problema com essa conta gratuita, não sei dizer.

Que bom que você fez funcionar e tudo de melhor! :-)

@AliND Além disso, observe que adaptar viewer.js não é a melhor maneira de fazer. Você pode carregar outros arquivos usando o parâmetro file no URL, conforme descrito em https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website-% 28Linux% 29 # abrindo -pdf-files-from-your-website. Dessa forma, você pode usar um arquivo viewer.js e ainda abrir todos os arquivos PDF que desejar.

@timvandermeij Muito obrigado novamente :)

Na verdade, seu método funciona perfeitamente no servidor gratuito; Acabei de experimentar, mas parece que desta vez tenho um problema com o servidor pago! Acabei de abrir um tíquete de suporte para que eles possam investigar o problema.

Portanto, também para futuros usuários, e além do método de construção, o que @timvandermeij fez funciona perfeitamente e é muito mais fácil do que o método mencionado anteriormente. Para referência:
1- Basta fazer o download do arquivo zip master, extraí-lo e fazer upload ou fazer upload e extrair se o painel de controle permitir (o segundo método é muito mais rápido). Claro, existem alguns arquivos e / ou pastas que não são necessários, mas basta fazer o upload do arquivo completo: D.
2- Abra o viewer.js (na pasta web) e mude o nome do arquivo pdf para o seu próprio. Carregue (recarregue) este viewer.js
3- Carregue seu arquivo pdf (com o nome especificado na etapa 2) para a pasta da web.
4- Pronto (se não funcionar, significa que há um problema com o seu host; experimente um host gratuito e veja por si mesmo).

Obrigado novamente Tim :)
Tudo de bom//
Todos

Uau, o método de arquivo é realmente muito útil! :)

@timvandermeij, você forneceu uma solução completa e completa :)

Obrigado novamente e tudo de bom //
AliND

Oi
Em meu projeto, preciso carregar a página pdf em um iframe, então usei a função php file_get_contents para obter o conteúdo do viewer.html. Mas há um erro ao carregar o pdf
PDF.js v? (Construir: ?)
Mensagem: InvalidPDFException
o console é tão abaixo,
Erro: cabeçalho de fluxo XRef inválido util.js: 186
em erro (http://bacchus.weibo.com:8080/js/pdfjs/src/shared/util.js:188:15)
em Object.XRef_readXRef como readXRef
em Object.XRef_parse as parse
em Object.PDFDocument_setup como configuração
em Object.PDFDocument_parse as parse
em http://bacchus.weibo.com : 8080 / js / pdfjs / src / core / pdf_manager.js: 106: 26
em LocalPdfManager_ensure como garanta
em LocalPdfManager.BasePdfManager_ensureDoc como garantaDoc
em http://bacchus.weibo.com : 8080 / js / pdfjs / src / core / worker.js: 54: 22
como ainda estou no javascript, não consigo entender por que isso aconteceu, alguém pode me ajudar?

@xiaotun O arquivo PDF parece estar corrompido. Abra um novo problema e forneça mais detalhes, como nome / versão do sistema operacional, versão do PDF.js e nome / versão do navegador.

Estou recebendo Aviso: TT: função indefinida: 32 no console.

Não foi possível carregar a origem 'VM_Unknown': não foi possível recuperar o conteúdo. VM_ Desconhecido: 1
@ types / pdfjs-dist pode ser o problema, mas aparece no meu aplicativo angular como um arquivo tgz em uma url !!!

O pdf é renderizado no navegador ok, mas as entradas do formulário não estão lá!

Tentei seguir este tutorial:
https://medium.com/factory-mind/angular-pdf-forms-fa72b15c3fbd