Rendering pdf with pdf.js — a promise returns unusable result

I reasearched and experimented quite a bit with rendering pdfs in html using pdf.js, a demanding task for a noob like me.

I thought a combination of the below html and JS might have been a good start, but I am still stuck.

Html part:

<!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>

plus this JS code:

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)

    }

}

(They run in the root directory of a pdf.js setup, which can be downloaded here)

I can't figure out if I am overlooking some promise-related issue, or understanding the use of pdf.js wrong.

The first page of the pdf will display correctly. As soon as I try to switch to a different page invoking rightOnePage() with the right button, it throws a "TypeError: pdfDocument.getPage is not a function" at me. pdfDocument.getPage makes use of the result of loadPdf().

Yet the loadPdf() function should return the pdf object correctly: it works when called from initialRenderPdf().

I tried also setting myPdf = initialRenderPdf()[1], which changed the error to TypeError: pdfDocument is undefined, but does not solve it. Neither does using a myPdf.then(renderPdf(myPdf,pageViewed)) version of the command inside the rightOnePage() function.

I would benefit significantly from a bit of guidance...

PS: I might also need some kind of clearing the canvas before invoking the new render of a page. I faced that issue on a different attempt at reaching the goal, but did not get that far yet.

asked Jan 1 at 18:10

Giampaolo Ferradini

509

1

It might help to realise that the thing you cache, myPdf, is a promise, which needs to be awaited every time it is used.

– Roamer-1888
Jan 1 at 20:33

It did! By making the call renderPdf(await myPdf,pageViewed) instead than renderPdf(myPdf,pageViewed), it worked perfectly. Thank you @Roamer-1888! I wonder why it works as is in the first call, but my problem is now gone. :)

– Giampaolo Ferradini
Jan 1 at 23:41

1

At first call, the promise is awaited at the point where it is cached, const pdfDoc = await loadPdf();, followed immediately, as you would expect, by a successful rendering. Your problem lay in the lack of awaits thereafter, on page changes.

– Roamer-1888
Jan 2 at 22:40

add a comment |

I reasearched and experimented quite a bit with rendering pdfs in html using pdf.js, a demanding task for a noob like me.

I thought a combination of the below html and JS might have been a good start, but I am still stuck.

Html part:

<!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>

plus this JS code:

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)

    }

}

(They run in the root directory of a pdf.js setup, which can be downloaded here)

I can't figure out if I am overlooking some promise-related issue, or understanding the use of pdf.js wrong.

Yet the loadPdf() function should return the pdf object correctly: it works when called from initialRenderPdf().

I would benefit significantly from a bit of guidance...

PS: I might also need some kind of clearing the canvas before invoking the new render of a page. I faced that issue on a different attempt at reaching the goal, but did not get that far yet.

asked Jan 1 at 18:10

Giampaolo Ferradini

509

1

It might help to realise that the thing you cache, myPdf, is a promise, which needs to be awaited every time it is used.

– Roamer-1888
Jan 1 at 20:33

It did! By making the call renderPdf(await myPdf,pageViewed) instead than renderPdf(myPdf,pageViewed), it worked perfectly. Thank you @Roamer-1888! I wonder why it works as is in the first call, but my problem is now gone. :)

– Giampaolo Ferradini
Jan 1 at 23:41

1

At first call, the promise is awaited at the point where it is cached, const pdfDoc = await loadPdf();, followed immediately, as you would expect, by a successful rendering. Your problem lay in the lack of awaits thereafter, on page changes.

– Roamer-1888
Jan 2 at 22:40

add a comment |

I reasearched and experimented quite a bit with rendering pdfs in html using pdf.js, a demanding task for a noob like me.

I thought a combination of the below html and JS might have been a good start, but I am still stuck.

Html part:

<!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>

plus this JS code:

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)

    }

}

(They run in the root directory of a pdf.js setup, which can be downloaded here)

I can't figure out if I am overlooking some promise-related issue, or understanding the use of pdf.js wrong.

Yet the loadPdf() function should return the pdf object correctly: it works when called from initialRenderPdf().

I would benefit significantly from a bit of guidance...

PS: I might also need some kind of clearing the canvas before invoking the new render of a page. I faced that issue on a different attempt at reaching the goal, but did not get that far yet.

asked Jan 1 at 18:10

Giampaolo Ferradini

509

I reasearched and experimented quite a bit with rendering pdfs in html using pdf.js, a demanding task for a noob like me.

I thought a combination of the below html and JS might have been a good start, but I am still stuck.

Html part:

<!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>

plus this JS code:

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)

    }

}

(They run in the root directory of a pdf.js setup, which can be downloaded here)

I can't figure out if I am overlooking some promise-related issue, or understanding the use of pdf.js wrong.

Yet the loadPdf() function should return the pdf object correctly: it works when called from initialRenderPdf().

I would benefit significantly from a bit of guidance...

PS: I might also need some kind of clearing the canvas before invoking the new render of a page. I faced that issue on a different attempt at reaching the goal, but did not get that far yet.

javascript pdf promise pdf.js

asked Jan 1 at 18:10

Giampaolo Ferradini

509

asked Jan 1 at 18:10

Giampaolo Ferradini

509

asked Jan 1 at 18:10

Giampaolo Ferradini

509

asked Jan 1 at 18:10

Giampaolo Ferradini

509

asked Jan 1 at 18:10

Giampaolo Ferradini

509

1

It might help to realise that the thing you cache, myPdf, is a promise, which needs to be awaited every time it is used.

– Roamer-1888
Jan 1 at 20:33

It did! By making the call renderPdf(await myPdf,pageViewed) instead than renderPdf(myPdf,pageViewed), it worked perfectly. Thank you @Roamer-1888! I wonder why it works as is in the first call, but my problem is now gone. :)

– Giampaolo Ferradini
Jan 1 at 23:41

1

At first call, the promise is awaited at the point where it is cached, const pdfDoc = await loadPdf();, followed immediately, as you would expect, by a successful rendering. Your problem lay in the lack of awaits thereafter, on page changes.

– Roamer-1888
Jan 2 at 22:40

add a comment |

1

It might help to realise that the thing you cache, myPdf, is a promise, which needs to be awaited every time it is used.

– Roamer-1888
Jan 1 at 20:33

It did! By making the call renderPdf(await myPdf,pageViewed) instead than renderPdf(myPdf,pageViewed), it worked perfectly. Thank you @Roamer-1888! I wonder why it works as is in the first call, but my problem is now gone. :)

– Giampaolo Ferradini
Jan 1 at 23:41

1

At first call, the promise is awaited at the point where it is cached, const pdfDoc = await loadPdf();, followed immediately, as you would expect, by a successful rendering. Your problem lay in the lack of awaits thereafter, on page changes.

– Roamer-1888
Jan 2 at 22:40

It might help to realise that the thing you cache, myPdf, is a promise, which needs to be awaited every time it is used.

– Roamer-1888
Jan 1 at 20:33

It did! By making the call renderPdf(await myPdf,pageViewed) instead than renderPdf(myPdf,pageViewed), it worked perfectly. Thank you @Roamer-1888! I wonder why it works as is in the first call, but my problem is now gone. :)

– Giampaolo Ferradini
Jan 1 at 23:41

At first call, the promise is awaited at the point where it is cached, const pdfDoc = await loadPdf();, followed immediately, as you would expect, by a successful rendering. Your problem lay in the lack of awaits thereafter, on page changes.

– Roamer-1888
Jan 2 at 22:40

add a comment |

1 Answer
1

active

oldest

votes

The issue should be in your:

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

}

The getDocument method already returns a promise. In order to get back the data from it, you can simply do:

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

Even shorter, your method could directly be something like:

async function loadPdf(){

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

}

answered Jan 1 at 18:15

quirimmo

7,66811334

your code looks much prettier, but the result seems to be the same :/ i.e.: the first page loads properly, but the pdf object works fine only when called from inside initialRenderPdf(). When the object is returned from initialRenderPdf(), it then does not seem to perform properly.

– Giampaolo Ferradini
Jan 1 at 18:38

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53997773%2frendering-pdf-with-pdf-js-a-promise-returns-unusable-result%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

The issue should be in your:

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

}

The getDocument method already returns a promise. In order to get back the data from it, you can simply do:

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

Even shorter, your method could directly be something like:

async function loadPdf(){

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

}

answered Jan 1 at 18:15

quirimmo

7,66811334

your code looks much prettier, but the result seems to be the same :/ i.e.: the first page loads properly, but the pdf object works fine only when called from inside initialRenderPdf(). When the object is returned from initialRenderPdf(), it then does not seem to perform properly.

– Giampaolo Ferradini
Jan 1 at 18:38

add a comment |

The issue should be in your:

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

}

The getDocument method already returns a promise. In order to get back the data from it, you can simply do:

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

Even shorter, your method could directly be something like:

async function loadPdf(){

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

}

answered Jan 1 at 18:15

quirimmo

7,66811334

your code looks much prettier, but the result seems to be the same :/ i.e.: the first page loads properly, but the pdf object works fine only when called from inside initialRenderPdf(). When the object is returned from initialRenderPdf(), it then does not seem to perform properly.

– Giampaolo Ferradini
Jan 1 at 18:38

add a comment |

The issue should be in your:

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

}

The getDocument method already returns a promise. In order to get back the data from it, you can simply do:

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

Even shorter, your method could directly be something like:

async function loadPdf(){

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

}

answered Jan 1 at 18:15

quirimmo

7,66811334

The issue should be in your:

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

}

The getDocument method already returns a promise. In order to get back the data from it, you can simply do:

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

Even shorter, your method could directly be something like:

async function loadPdf(){

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

}

answered Jan 1 at 18:15

quirimmo

7,66811334

answered Jan 1 at 18:15

quirimmo

7,66811334

answered Jan 1 at 18:15

quirimmo

7,66811334

answered Jan 1 at 18:15

quirimmo

7,66811334

your code looks much prettier, but the result seems to be the same :/ i.e.: the first page loads properly, but the pdf object works fine only when called from inside initialRenderPdf(). When the object is returned from initialRenderPdf(), it then does not seem to perform properly.

– Giampaolo Ferradini
Jan 1 at 18:38

add a comment |

your code looks much prettier, but the result seems to be the same :/ i.e.: the first page loads properly, but the pdf object works fine only when called from inside initialRenderPdf(). When the object is returned from initialRenderPdf(), it then does not seem to perform properly.

– Giampaolo Ferradini
Jan 1 at 18:38

your code looks much prettier, but the result seems to be the same :/ i.e.: the first page loads properly, but the pdf object works fine only when called from inside initialRenderPdf(). When the object is returned from initialRenderPdf(), it then does not seem to perform properly.

– Giampaolo Ferradini
Jan 1 at 18:38

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu