plugin - show pdf javascript

PDF de la escala PDF.js en ancho fijo

Question

Tengo un cuadro fijo donde quiero mostrar mis PDF en renderizado por PDF.js. Como la documentación PDF.js no es realmente accesible (escupiendo a través de sus archivos fuente), me gustaría saber si es posible escalar un PDF renderizado en un ancho fijo. Cuando configuro como CSS: canvas { width: 600px; } canvas { width: 600px; } para el lienzo que muestra el PDF, el PDF se estira y la calidad es mala.

Answer 1

Actualicé el ejemplo de Pdf.js github http://jsbin.com/pdfjs-prevnext-v2/edit#html,live para escalar correctamente a un ancho de lienzo fijo. Ver http://jsfiddle.net/RREv9/ para mi código.

La línea importante es

var viewport = page.getViewport(canvas.width / page.getViewport(1.0).width);

porque la expresión canvas.width / page.getViewport(1.0).width nos da el factor de escala apropiado.

Debe cambiar el ancho de su lienzo no con CSS, sino con el width del lienzo. Consulte Ancho y alto de lienzo en HTML5

Answer 2

Para garantizar que la escala funcione con todos los tamaños de página (Carta, A4, A5, etc.), debe tener en cuenta que las relaciones entre altura y ancho varían cuando cambian los tamaños de página. Por ejemplo, los tamaños de página populares (en pulgadas) son:

• Carta: relación de 8.5 x 11 .. de 0.772
• A4: relación de 8.27 × 11.7 .. de 0.706
• A5: relación de 5.83 × 8.27 .. de 0.704

Puede calcular la escala correcta considerando tanto la altura como el ancho y solo escalando la cantidad que es más pequeña. Esto asegurará que todo se ajuste a su lienzo. Además, si cambia el ancho o alto de su lienzo, no romperá nada.

var unscaledViewport = page.getViewport(1);
var scale = Math.min((canvas.height / unscaledViewport.height), (canvas.width / unscaledViewport.width));
var viewport = page.getViewport(scale);