Рендеринг PDF с pdf.js - обещание возвращает непригодный результат - PullRequest
Новая
       7

Рендеринг PDF с pdf.js - обещание возвращает непригодный результат

0 голосов
/ 01 января 2019

Я заново начал и экспериментировал с рендерингом pdfs в html, используя pdf.js, сложную задачу для такого нуба, как я.

Я думал, что комбинация приведенного ниже html и JS могла бы быть хорошим началом, но я все еще застрял.

Часть HTML: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>PDF.js Example</title>
  <script src="build/pdf.js"></script>
  <script src="simple-g-SO.js"></script>

  <style media="screen">
  .button {
    background-color: #333;
    border: none;
    color: white;
    padding: 15px 25px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
  }

  li:hover {
    background-color: #111;
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
  }

  li {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border-right: 1px solid #bbb;
  }

  </style>
</head>
<body>
  <ul>
    <li><button onclick="leftOnePage()" type="button" class="button" id="left"><</button></li>
    <li><button onclick="rightOnePage()" type="button" class="button" id="right">></button></li>
  </ul>
  <br/>
  <canvas id="pdf"></canvas>
</body>
</html>

плюс этот JSкод: 

async function renderPdf(pdfDocument,pdfPageN) {
  // Load information from page pdfPageN
  const page = await pdfDocument.getPage(pdfPageN);

  const scale = 1.5;
  const viewport = page.getViewport(scale);

  // Apply page dimensions to the <canvas> element.
  const canvas = document.getElementById("pdf");
  const context = canvas.getContext("2d");
  canvas.height = viewport.height;
  canvas.width = viewport.width;

  // Render the page into the <canvas> element.
  const renderContext = {
    canvasContext: context,
    viewport: viewport
  };
  await page.render(renderContext);
};

async function loadPdf(){
  // load the pdf
  const loadingTask = pdfjsLib.getDocument("http://static.kjuicer.com/varie/fuffa/test.pdf");
  const pdf = await loadingTask.promise;
  return pdf
}

async function initialRenderPdf(){
  const pdfDoc = await loadPdf()
  const renderingPdf = await renderPdf(pdfDoc,pageViewed)
  return pdfDoc
}

pageViewed = 1
myPdf = initialRenderPdf()

//called on left button click
function leftOnePage(){
    if(pageViewed<=1){
        return
    } else {
    pageViewed -= 1
        renderPdf(myPdf,pageViewed)
    }
}

//called on right button click
async function rightOnePage(){
    if(pageViewed>=10){
        return
    } else {
    pageViewed += 1
        await renderPdf(myPdf,pageViewed)
    }
}
async function renderPdf(pdfDocument,pdfPageN) {
  // Load information from page pdfPageN
  const page = await pdfDocument.getPage(pdfPageN);

  const scale = 1.5;
  const viewport = page.getViewport(scale);

  // Apply page dimensions to the <canvas> element.
  const canvas = document.getElementById("pdf");
  const context = canvas.getContext("2d");
  canvas.height = viewport.height;
  canvas.width = viewport.width;

  // Render the page into the <canvas> element.
  const renderContext = {
    canvasContext: context,
    viewport: viewport
  };
  await page.render(renderContext);
};

async function loadPdf(){
  // load the pdf
  const loadingTask = pdfjsLib.getDocument("http://static.kjuicer.com/varie/fuffa/test.pdf");
  const pdf = await loadingTask.promise;
  return pdf
}

async function initialRenderPdf(){
  const pdfDoc = await loadPdf()
  const renderingPdf = await renderPdf(pdfDoc,pageViewed)
  return pdfDoc
}

pageViewed = 1
myPdf = initialRenderPdf()

//called on left button click
function leftOnePage(){
    if(pageViewed<=1){
        return
    } else {
    pageViewed -= 1
        renderPdf(myPdf,pageViewed)
    }
}

//called on right button click
async function rightOnePage(){
    if(pageViewed>=10){
        return
    } else {
    pageViewed += 1
        await renderPdf(myPdf,pageViewed)
    }
}

(они запускаются в корневом каталоге установки pdf.js, которую можно загрузить здесь )

Я не могу понять, еслиЯ пропускаю некоторые вопросы, связанные с обещаниями, или неправильно понимаю использование pdf.js.

Первая страница PDF будет отображаться правильно.Как только я пытаюсь переключиться на другую страницу, вызывая rightOnePage() правой кнопкой, он выдает «TypeError: pdfDocument.getPage не является функцией».pdfDocument.getPage использует результат loadPdf().

И все же функция loadPdf() должна правильно возвращать объект pdf: она работает при вызове из initialRenderPdf().

Я также пыталсяустановка myPdf = initialRenderPdf()[1], которая изменила ошибку на TypeError: pdfDocument is undefined, но не устраняет ее.Также не используется myPdf.then(renderPdf(myPdf,pageViewed)) версия команды внутри функции rightOnePage().

Я бы значительно выиграл от небольшого руководства ...

PS: Мне также может понадобиться какой-то видочистки холста перед вызовом нового рендера страницы.Я столкнулся с этой проблемой при другой попытке достичь цели, но пока не достиг этого.

1 Ответ

0 голосов
/ 01 января 2019

Проблема должна быть в вашем: 

async function loadPdf(){
  // load the pdf
  const loadingTask = pdfjsLib.getDocument("http://static.kjuicer.com/varie/fuffa/test.pdf");
  const pdf = await loadingTask.promise;
  return pdf
}

Метод getDocument уже возвращает обещание.Чтобы получить от него данные, вы можете просто сделать: 

const pdf = await pdfjsLib.getDocument("http://static.kjuicer.com/varie/fuffa/test.pdf");

Еще короче, ваш метод может быть что-то вроде: 

async function loadPdf(){
  return await pdfjsLib.getDocument("http://static.kjuicer.com/varie/fuffa/test.pdf");
}
...