<p>pdf.js não funciona com requirejs</p>

Criado em 3 mai. 2016  ·  18Comentários  ·  Fonte: mozilla/pdf.js

O seguinte HTML demonstra o problema:

<html> <head> <title>Flexpaper React/Require Sandbox</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.js"></script> <script> require(['pdf'], function(pdf) { console.log('PDFJS Module: ' + pdf); console.log('PDFJS Global: ' + window.PDFJS); }); </script> </head> </html>

pdf.js, detecta a existência das funções "exigir" e "definir" e, portanto, NÃO define a instância global do PDFJS. No entanto, ele também não retorna uma referência a essa instância por meio do carregador de módulo.

Como "pdf" e "window.PDFJS" são indefinidos no exemplo acima, a biblioteca não pode ser usada em aplicativos que usam require. Este é o caso, independentemente de require ser ou não usado para carregar o pdf.js.

Observe que isso funciona corretamente com a versão 1.0.1040, mas falha com 1.4.20 e 1.5.188. Não testei com outras versões além das 3. O comportamento foi consistente em todas as três versões entre Chrome e Safari.

Comentários muito úteis

Como também estava lutando um pouco com a referência correta no RequireJS, deixarei minha solução, que faz parte da configuração do RequireJS:

paths: {
    'pdfjs-dist/build/pdf': 'myfolder/pdf.min',
    'pdfjs-dist/build/pdf.worker': 'myfolder/pdf.worker.min'
}

Quando você faz assim, não precisa nem atribuir o caminho para o trabalhador a PDFJS.workerSrc , como sugerido nos exemplos , porque o trabalhador será encontrado automaticamente.

Todos 18 comentários

o que é 'pdf'? você pode fornecer um exemplo completo?

Claro, vou configurar um repositório Github para demonstrar de forma mais completa.

Aqui está o repo: https://github.com/MartinSnyder/pdfjs-with-requirejs

'pdf' é a referência de módulo que require está tentando retornar a essa função. Nesse cenário, Requirejs está carregando dinamicamente o pdf.js e tentando retornar a 'referência do módulo' para a função de retorno de chamada, no entanto, a referência do módulo não está definida. Você pode ver a carga dinâmica acontecer por meio do depurador de rede do navegador.

Normalmente, isso não seria um grande problema, exceto que algo dentro do pdf.js está detectando que um carregador de módulo está presente e, então, NÃO está definindo o objeto PDFJS global. Como nenhum deles está presente, você não pode usar a biblioteca quando requirejs estiver na página.

Observe que isso acontece mesmo se você não usar require para carregar o objeto. Eu coloquei uma referência de script comentada para pdf.js na página. Se for colocado antes de require, o global será definido corretamente. Se for colocado depois de require, o global NÃO será definido.

Existem dois problemas com o código:

  1. módulo não é referido por seu nome, use 'pdfjs-dist / build / pdf' (e se você estiver movendo pdfjs-dist em um lugar diferente, use require.config para alterar o local)
  2. você está usando document.write, que apaga o documento

Experimente algo como:

        require.config({paths: {'pdfjs-dist': './node_modules/pdfjs-dist'}});
        require(['pdfjs-dist/build/pdf'], function(pdf) {
            console.log('PDFJS Module: ' + pdf + '<br>');
            console.log('PDFJS Global: ' + window.PDFJS);
        });

Fechando conforme respondido.

Observe que isso funciona corretamente com a versão 1.0.1040

Trabalhar nesta versão é um efeito colateral de requirejs carregar um script como uma tag de script regular - não indica que seja compatível com require.js

definir a instância PDFJS global

PDFJS global será removido em versões futuras, então se você estiver usando requirejs, você pode usar o mesmo objeto via pdf.PDFJS /

Com relação ao ponto 1:
Não usei o node para incluir o pdf.js naquele exemplo. Baixei a distribuição oficial e copiei o pdf.js para o diretório raiz da amostra. Por esse motivo, referenciá-lo como 'pdf' é correto. Você pode verificar isso observando o exemplo no depurador de rede e verá que o arquivo foi baixado corretamente por require.

Com relação ao ponto 2:
Isso foi feito para simplificar o exemplo. Independentemente do que o exemplo faça, as referências são indefinidas e a biblioteca não pode ser usada. Especificamente, alternar para console.log também mostra as referências como indefinidas.

Com relação ao PDFJS Global sendo removido em versões futuras:
Estou bem com isso, mas como alguém deve fazer referência à biblioteca via pdf.PDFJS quando o pdf é indefinido?

Eu não usei o node para incluir pdf.js naquele exemplo

Não presumi que você esteja usando node.js.

baixou a distribuição oficial e copiou o pdf.js para o diretório raiz da amostra.

PDF.js é uma biblioteca e consiste em muitos arquivos, por exemplo, o módulo pdfjs-dist / build / pdf pode carregar o módulo pdfjs-dist / build / pdf.worker

Por esse motivo, referenciá-lo como 'pdf' é correto.

Você ainda precisa usar o nome AMD que estiver listado na definição, consulte https://github.com/MartinSnyder/pdfjs-with-requirejs/blob/master/pdf.js#L21

Você tentou o exemplo acima com require.config apontando para a biblioteca completa?

Você tentou o exemplo acima com require.config apontando para a biblioteca completa?

Acabei de concluir isso agora e funciona como você disse.

Isso significa que você não pode usar a distribuição "baixada" encontrada aqui para essa finalidade?
https://mozilla.github.io/pdf.js/getting_started/#download

Contanto que você use o pacote node 'pdfjs-dist', você está bem, mas a versão baixada não deveria funcionar com isso?

Contanto que você use o pacote node 'pdfjs-dist', você está bem, mas a versão baixada não deveria funcionar com isso?

Eu acho que não está relacionado ao assunto, mas você ainda pode usar os arquivos pdf.js / pdf.worker.js deste pacote, apontar requirejs 'pdfjs-dist' para o local compactado (vai funcionar desde pdf.js e pdf. os arquivos worker.js estão localizados na pasta build).

Você ainda precisa usar o nome AMD que estiver listado na definição, consulte https://github.com/MartinSnyder/pdfjs-with-requirejs/blob/master/pdf.js#L21

Essa era a parte-chave que estava faltando na minha compreensão. Obrigado por me explicar isso.

Olá, tenho um problema semelhante, então não vou abrir um novo, mas pergunte aqui, espero que esteja tudo bem.
Estou tentando implementar o visualizador com base em https://github.com/mozilla/pdf.js/blob/master/examples/components/simpleviewer.js usando require.js. Mas quando eu preciso dos arquivos pdf.js e pdf_viewer.js, o PDFJS.PDFViewer é indefinido.

Aqui está um repositório de amostra: https://github.com/Lazzi/pdfjs-bower-requirejs

@Lazzi seu módulo main.js parece muito estranho para AMD, tente:

define('main', ['pdfjs-dist/build/pdf', 'pdfjs-dist/web/pdf_viewer'], function(pdfjsLib, viewer, require) {

compatibilidade não é AMD, então não sei como vai funcionar.

Sim, não é AMD, mas require.js também suporta este tipo de definição de módulo: http://requirejs.org/docs/api.html#cjsmodule.

No entanto, a alteração proposta não corrigiu meu problema.

@Lazzi entendo, vamos tentar # 7332 (o nome AFAIK AMD é importante)

@yurydelendik Funciona! Você tem sido muito útil. Obrigada.

isso pode funcionar para você, além de ser colocado em seu require.config

    map: {
        '*': {
            'pdfjs-dist/build/pdf.worker' : 'path/to/your/install/pdf.worker'
        }
    },

A função de mapa é essencialmente uma substituição de string global e o '*' é para quais dependências usar a substituição de string - usado principalmente para incluir diferentes versões de libs para outras libs. Como ter 2 versões do JQuery rodando em paralelo. Tenha cuidado ao usar - uma vez que ele só faz a substituição de strings, você pode acabar substituindo caminhos em outras dependências se eles corresponderem.

O '*', neste caso, provavelmente será apenas a dependência principal do pdf.js.

Como também estava lutando um pouco com a referência correta no RequireJS, deixarei minha solução, que faz parte da configuração do RequireJS:

paths: {
    'pdfjs-dist/build/pdf': 'myfolder/pdf.min',
    'pdfjs-dist/build/pdf.worker': 'myfolder/pdf.worker.min'
}

Quando você faz assim, não precisa nem atribuir o caminho para o trabalhador a PDFJS.workerSrc , como sugerido nos exemplos , porque o trabalhador será encontrado automaticamente.

Obrigado @dmaxweiler! Eu tive o mesmo problema - estava tendo problemas para carregar o pdf.js corretamente ao usar o RequireJS também. Sua solução funcionou para mim! Incrível. Obrigado pela ajuda.

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

PeterNerlich picture PeterNerlich  ·  3Comentários

anggikolo11 picture anggikolo11  ·  3Comentários

liuzhen2008 picture liuzhen2008  ·  4Comentários

aaronshaf picture aaronshaf  ·  3Comentários

patelsumit5192 picture patelsumit5192  ·  3Comentários