У меня есть фиксированный ящик, в котором я хочу отобразить PDF в файле PDF.js. Поскольку документация PDF.js на самом деле недоступна (плюется через исходные файлы), я хотел бы знать, можно ли масштабировать рендеринг PDF по фиксированной ширине. Когда я устанавливаю CSS: canvas { width: 600px; } для холста, отображающего PDF, PDF растягивается, а качество становится неудовлетворительным.
PDF.js масштаб PDF на фиксированной ширине
Ответ 1
Я обновил пример из Pdf.js github http://jsbin.com/pdfjs-prevnext-v2/edit#html,live, чтобы правильно масштабировать до фиксированной ширины холста. См. http://jsfiddle.net/RREv9/ для моего кода.
Важная строка
var viewport = page.getViewport(canvas.width / page.getViewport(1.0).width);
потому что выражение canvas.width / page.getViewport(1.0).width дает нам подходящий масштабный коэффициент.
Вы должны изменить ширину вашего холста не с помощью css, а с помощью атрибута width на холсте. См. Ширина и высота холста в HTML5
Ответ 2
Чтобы гарантировать, что масштабирование работает со всеми размерами страниц (Letter, A4, A5 и т.д.), вы должны учитывать, что отношения между высотой и шириной варьируются при изменении размеров страниц. Например, популярные размеры страниц (в дюймах):
- Письмо: 8.5 x 11.. отношение 0.772
- A4: 8.27 × 11.7.. соотношение 0.706
- A5: 5.83 × 8.27.. отношение 0.704
Вы можете рассчитать правильное масштабирование, рассматривая как высоту, так и ширину и только уменьшая размер, который меньше. Это обеспечит все, что подходит вашему холсту. Кроме того, если вы измените ширину или высоту своего холста, вы ничего не сломаете.
var unscaledViewport = page.getViewport(1);
var scale = Math.min((canvas.height / unscaledViewport.height), (canvas.width / unscaledViewport.width));
var viewport = page.getViewport(scale);