React-pdf: Visualize a primeira página antes que todo o documento seja carregado - cabeçalho de intervalo de suporte
Antes de começar - lista de verificação
- [x] Eu li a documentação no README
- [x] Eu verifiquei amostras e suítes de teste para ver a implementação básica da vida real
- [X] Eu verifiquei se esta pergunta ainda não foi feita
O que você está tentando alcançar?
Em nosso projeto ( edição , demonstração ), gostaria de carregar apenas as páginas que estou visualizando e renderizar a primeira página antes de carregar todo o documento.
No meu entendimento, PDF.js suporta cabeçalhos de intervalo e o react-pdf API descreve que é possível incluir um PDFDataRangeTransport objeto no file propriedade. Eu não consigo ver o que fazer para realmente enviar esses cabeçalhos Range!
Descreva as soluções que você tentou
- [x] Verifique se o PDF de origem está otimizado para a web
- [x] Verifique se o serviço de hospedagem suporta cabeçalhos de intervalo HTTP
Meio Ambiente
- Chrome 75
- MacOS 10.14.5
- React-PDF 4.0.5
- React-scripts 3.0.1
- Reagir 16.8.6
joepio
Todos 3 comentários
Oi,
Sim, PDFDataRangeTransport deve ser suportado, já que React-PDF apenas passa para pdf.js, não faz muito mais com ele. Encontrei este tópico na criação de objetos PDFDataRangeTransport.
Parece que a maneira mais fácil de obter o comportamento desejado é simplesmente passar um URL como file prop. Isso deve funcionar bem: https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#range
wojtekmaj
em 4 jul. 2019
Obrigado pela resposta (e pela biblioteca incrível, por falar nisso) @wojtekmaj!
Infelizmente, eu passo a URL como um arquivo de suporte ( fonte , demo ), mas ela só renderiza depois que todo o documento é obtido.
Além disso, a solicitação do arquivo PDF não parece ter cabeçalhos de intervalo.
Talvez esta condicional nunca seja realmente verdadeira se eu passar uma string?
// File is PDFDataRangeTransport
if (file instanceof PDFDataRangeTransport) {
return { range: file };
}
De acordo com os desenvolvedores do PDF.js, o PDF.js não oferece suporte à codificação gzip de respostas de intervalo , portanto, precisa ser definido explicitamente. De acordo com os documentos PDF.js, você pode definir cabeçalhos personalizados . Como o documento passa o objeto options para PDFjs.getDocument , isso deve funcionar:
<Document
options={{
httpHeaders: {
'Accept-Encoding': 'Identity',
}
}}
file={"https://example.com/some.pdf"}
>
No entanto, isso não acontece, então ainda estou investigando o que está acontecendo. Parece provável que seja um problema do pdf.js.
joepio
em 5 ago. 2019
Questões relacionadas
Solitaryo
·
5Comentários
Waize
·
4Comentários
wangzhidavid
·
4Comentários
nnnikolay
·
4Comentários
shivekkhurana
·
4Comentários
Comentários muito úteis
De acordo com os desenvolvedores do PDF.js, o PDF.js não oferece suporte à codificação
gzipde respostas de intervalo , portanto, precisa ser definido explicitamente. De acordo com os documentos PDF.js, você pode definir cabeçalhos personalizados . Como o documento passa o objetooptionsparaPDFjs.getDocument, isso deve funcionar:No entanto, isso não acontece, então ainda estou investigando o que está acontecendo. Parece provável que seja um problema do pdf.js.