Question

我无法显示PDF的所有页面，而不是使用pdf.js的页面

这是显示pdf的代码我从Traversy Media的教程中复制了此代码，但是当前它仅打印出第一页，并且仅当您单击下一页按钮时才转到下一页。但是我想显示PDF的所有页面，而用户不必单击下一页

 <div class="top-bar">
                                          <button class="btn" id="prev-page">
                                            <i class="fas fa-arrow-circle-left"></i> Prev Page
                                          </button>
                                          <button class="btn" id="next-page">
                                            Next Page <i class="fas fa-arrow-circle-right"></i>
                                          </button>
                                          <span class="page-info">
                                            Page <span id="page-num"></span> of <span id="page-count"></span>
                                          </span>
                                        </div>

                                        <canvas id="pdf-render"></canvas>

                                        <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>

                                        <script>
                                          const url = 'pdfname.pdf';

                                          let pdfDoc = null,
                                            pageNum = 1,
                                            pageIsRendering = false,
                                            pageNumIsPending = null;

                                          const scale = 1.5,
                                            canvas = document.querySelector('#pdf-render'),
                                            ctx = canvas.getContext('2d');

                                          // Render the page
                                          const renderPage = num => {
                                            pageIsRendering = true;

                                            // Get page
                                            pdfDoc.getPage(num).then(page => {
                                              // Set scale
                                              const viewport = page.getViewport({ scale });
                                              canvas.height = viewport.height;
                                              canvas.width = viewport.width;

                                              const renderCtx = {
                                                canvasContext: ctx,
                                                viewport
                                              };

                                              page.render(renderCtx).promise.then(() => {
                                                pageIsRendering = false;

                                                if (pageNumIsPending !== null) {
                                                  renderPage(pageNumIsPending);
                                                  pageNumIsPending = null;
                                                }
                                              });

                                              // Output current page
                                              document.querySelector('#page-num').textContent = num;
                                            });
                                          };

                                          // Check for pages rendering
                                          const queueRenderPage = num => {
                                            if (pageIsRendering) {
                                              pageNumIsPending = num;
                                            } else {
                                              renderPage(num);
                                            }
                                          };

                                          // Show Prev Page
                                          const showPrevPage = () => {
                                            if (pageNum <= 1) {
                                              return;
                                            }
                                            pageNum--;
                                            queueRenderPage(pageNum);
                                          };

                                          // Show Next Page
                                          const showNextPage = () => {
                                            if (pageNum >= pdfDoc.numPages) {
                                              return;
                                            }
                                            pageNum++;
                                            queueRenderPage(pageNum);
                                          };

                                          // Get Document
                                          pdfjsLib
                                            .getDocument(url)
                                            .promise.then(pdfDoc_ => {
                                              pdfDoc = pdfDoc_;

                                              document.querySelector('#page-count').textContent = pdfDoc.numPages;

                                              renderPage(pageNum);
                                            })
                                            .catch(err => {
                                              // Display error
                                              const div = document.createElement('div');
                                              div.className = 'error';
                                              div.appendChild(document.createTextNode(err.message));
                                              document.querySelector('body').insertBefore(div, canvas);
                                              // Remove top bar
                                              document.querySelector('.top-bar').style.display = 'none';
                                            });

                                          // Button Events
                                          document.querySelector('#prev-page').addEventListener('click', showPrevPage);
                                          document.querySelector('#next-page').addEventListener('click', showNextPage);
                                              </script> 
                                              <style>
                                                * {
                                            margin: 0;
                                            padding: 0;
                                          }

                                          .top-bar {
                                            background: #333;
                                            color: #fff;
                                            padding: 1rem;
                                          }

                                          .btn {
                                            background: coral;
                                            color: #fff;
                                            border: none;
                                            outline: none;
                                            cursor: pointer;
                                            padding: 0.7rem 2rem;
                                          }

                                          .btn:hover {
                                            opacity: 0.9;
                                          }

                                          .page-info {
                                            margin-left: 1rem;
                                          }

                                          .error {
                                            background: orangered;
                                            color: #fff;
                                            padding: 1rem;
                                          }
                                        </style>
                                           <link
                                              rel="stylesheet"
                                              href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
                                              integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
                                              crossorigin="anonymous"
                                            />
                                            <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>

任何帮助将不胜感激

谢谢

阿纳夫

Answer 1

弄清楚结果是一个非常简单的答案但这是整个页面的代码

.mat-paginator.paginator--centered {
  display: flex;
  justify-content: center;
}

谢谢

阿纳夫

Answer 2

我可以。

const pdfjsLib = require("pdfjs-dist");
const pdfWorker =  `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`;
const pdfPath = "/teste.pdf";

pdfjsLib.GlobalWorkerOptions.workerSrc = pdfWorker;

const loadingTask = pdfjsLib.getDocument(pdfPath);
loadingTask.promise
    .then(function (pdfDocument) {
        // Request a first page
        const viewer = document.getElementById("the-canvas");
        let renderTask;
        for(let page = 1; page <= pdfDocument.numPages; page++) {
            pdfDocument.getPage(page).then(function (pdfPage) {
                const viewport = pdfPage.getViewport({ scale: 1.0 });
                const canvas = document.createElement("canvas");
                canvas.width = viewport.width;
                canvas.height = viewport.height;
                const ctx = canvas.getContext("2d");
                viewer.appendChild(canvas);
                renderTask = pdfPage.render({
                    canvasContext: ctx,
                    viewport,
                });
            });
        }
        return renderTask.promise;
    })
    .catch(function (reason) {
        console.error("Error: " + reason);
    });

如何显示pdf的所有页面而不是pdf.js中的仅一个页面

2 个答案: