Я использую pdfjs-dist для рендеринга файла PDF, ниже приведены мои коды:
часть шаблона:
<canvas
id="pdf-renderer"
class="pdf-content"
:width="viewRealSize.width"
:height="viewRealSize.height"></canvas>
часть javascript:
import PDFJS from 'pdfjs-dist'
const vm = this
const loadingTask = PDFJS.getDocument(this.model.pdfPageURL)
loadingTask.promise.then(function (pdf) {
pdf.getPage(1).then(function (page) {
const canvas = document.getElementById('pdf-renderer')
const context = canvas.getContext('2d')
const viewport = page.getViewport(1)
const scale = (vm.viewRealSize.width / viewport.width).toFixed(2)
const scaledViewport = page.getViewport(scale)
const renderContext = {
canvasContext: context,
viewport: scaledViewport
}
const renderTask = page.render(renderContext)
renderTask.then(function() {
})
})
}, function (reason) {
})
Исходная страница выглядит следующим образом: 
Но фактический результат показан ниже: 
As Вы можете видеть, здесь есть две проблемы. Сначала страница рендеринга переворачивается, формулировки находятся в верхней части оригинальной страницы, а в отрисованной странице - внизу. Во-вторых, формулировки грязные, они не являются оригинальными формулировками Engli sh, но я не знаю, что они из себя представляют. Все знают, почему?