Question

我进行了很多研究，并尝试了使用pdf.js在html中渲染pdf的工作，这对像我这样的菜鸟来说是一项艰巨的任务。

我认为以下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设置的根目录中运行，可以下载here）

我无法确定是忽略了与承诺有关的问题，还是理解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：在调用页面的新渲染之前，我可能还需要清除画布。我在尝试达到目标的另一种尝试中遇到了这个问题，但还没有解决。

Answer 1

问题应该出在您的手中：

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方法已经返回了一个Promise。为了从中获取数据，您只需执行以下操作：

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");
}

Answer 2

getDocument() 有一个需要等待的属性承诺：

const loadingPdfDocument = pdfjsLib.getDocument(typedArray);
const pdfDocumentInstance = await loadingPdfDocument.promise;

使用pdf.js渲染pdf-许诺返回无法使用的结果

2 个答案: