PDF.js tỷ lệ PDF trên chiều rộng cố định

Question

Tôi có một hộp cố định nơi tôi muốn hiển thị tệp PDF của mình được hiển thị bằng PDF.js. Vì tài liệu PDF.js không thực sự có thể truy cập được (thông qua các tệp nguồn của chúng), tôi muốn biết liệu có thể mở rộng một tệp PDF được hiển thị trên một chiều rộng cố định hay không. Khi tôi đặt làm CSS: canvas { width: 600px; } cho canvas hiển thị tệp PDF, PDF bị kéo dài và chất lượng kém.

Answer 1

Tôi đã cập nhật ví dụ từ Pdf.js github http://jsbin.com/pdfjs-prevnext-v2/edit#html,live để chia tỷ lệ chính xác thành chiều rộng khung hình cố định. Xem http://jsfiddle.net/RREv9/ cho mã của tôi.

Điểm mấu quan trọng là

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

vì biểu thức canvas.width/page.getViewport(1.0).width cho chúng ta yếu tố rộng thích hợp.

Bạn nên thay đổi chiều rộng của canvas không bằng css nhưng thuộc tính width của canvas. Xem Canvas width and height in HTML5

Answer 2

Để đảm bảo quy mô hoạt động với tất cả kích thước trang (Letter, A4, A5, v.v.), bạn phải tính đến tỷ lệ giữa chiều cao và chiều rộng thay đổi khi kích thước trang thay đổi. Ví dụ một kích thước trang phổ biến (tính bằng inch) là:

• Letter: 8,5 x 11 .. tỷ lệ 0,772
• A4: 8,27 × 11,7 .. tỷ lệ 0,706
• A5: 5,83 × 8,27. Tỷ lệ 0.704

Bạn có thể tính tỷ lệ chính xác bằng cách xem xét cả chiều cao và chiều rộng và chỉ thu nhỏ số tiền nhỏ hơn. Điều này sẽ đảm bảo mọi thứ phù hợp với khung hình của bạn. Ngoài ra, bạn nên thay đổi chiều rộng hoặc chiều cao của canvas của bạn, bạn sẽ không phá vỡ bất cứ điều gì.

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