PDF.jsでPDFビュワーを作っています。
PDF1ページを読み込む処理は非同期処理で書かれていて、これをドキュメント全てのページを表示できるように書き換えたいです。
元のコード:
javascript
1pdfDocument.getPage(i) 2.then(function (p) { 3 page = p; 4 console.log('page #: ' + i); 5 viewport = page.getViewport({ scale: PAGE_SCALE, }); 6 return page.getTextContent() 7}).then(function (textContent) { 8 // building SVG and adding that to the DOM 9 var svg = buildSVG(viewport, textContent); 10 document.getElementById('pageContainer').appendChild(svg); 11});
for文で回してうまくいかなかったコード:
javascript
1let promise = Promise.resolve(); 2for (let i = 1; i <= pdfDocument.numPages; i++) { 3 promise.then(function () { 4 pdfDocument.getPage(i) 5 .then(function (p) { 6 page = p; 7 console.log('page #: ' + i); 8 viewport = page.getViewport({ scale: PAGE_SCALE, }); 9 return page.getTextContent() 10 }).then(function (textContent) { 11 // building SVG and adding that to the DOM 12 var svg = buildSVG(viewport, textContent); 13 document.getElementById('pageContainer').appendChild(svg); 14 }); 15 }) 16}
コンソールに出力される順番は1, 2, 3, ... となりましたが、ページのロードは以前として順番通りになりません。
おそらく二つめのthenがあることが原因だと思いますが、どのように ...then()... で繋がっているコードをループで回せるように書き換えたらいいかわかりません。
追記: async/awaitを使って書いてみましたが、結果は変わりませんでした
javascript
1async function renderPage(pageNum) { 2 var page = await pdfDocument.getPage(pageNum); 3 console.log('page #: ' + pageNum); 4 viewport = page.getViewport({ scale: PAGE_SCALE, }); 5 var textContent = await page.getTextContent(); 6 var svg = buildSVG(viewport, textContent); 7 document.getElementById('pageContainer').appendChild(svg); 8 } 9 10 for (let i = 1; i <= pdfDocument.numPages; i++) { 11 renderPage(i); 12 } 13}
回答2件
あなたの回答
tips
プレビュー