使用 pdf.js 渲染 pdf -- 承諾返回不可用的結果
[英]Rendering pdf with pdf.js -- a promise returns unusable result
問題描述
我對使用 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 安裝程序的根目錄中運行，可以在此處下載）
我不知道我是否忽略了一些與承諾相關的問題，或者理解 pdf.js 的使用是錯誤的。
pdf 的第一頁將正確顯示。 一旦我嘗試切換到使用右鍵調用rightOnePage()的不同頁面，它就會向我拋出“TypeError: pdfDocument.getPage is not a function”。 pdfDocument.getPage使用loadPdf()的結果。
然而loadPdf()函數應該正確返回 pdf 對象：它在從initialRenderPdf()調用時工作。
我還嘗試設置myPdf = initialRenderPdf()[1] ，這將錯誤更改為TypeError: pdfDocument is undefined ，但沒有解決它。 在rightOnePage()函數中使用myPdf.then(renderPdf(myPdf,pageViewed))版本的命令rightOnePage() 。
我會從一些指導中受益匪淺......
PS：在調用頁面的新渲染之前，我可能還需要某種清除畫布。 我在實現目標的不同嘗試中遇到了這個問題，但還沒有走那么遠。
2 個解決方案
解決方案1
1 2019-01-01 18:15:22
問題應該出在您的：
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");
}
解決方案2
0 2021-06-29 14:33:05
getDocument() 有一個需要等待的屬性承諾：
const loadingPdfDocument = pdfjsLib.getDocument(typedArray);
const pdfDocumentInstance = await loadingPdfDocument.promise;
PDF.js無法在IE中正確呈現pdf
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.