😍Tính số trang của file pdf bằng thư viện pdf.js (ok)

https://mozilla.github.io/pdf.js

Chú ý sau khi clone về theo hướng dẫn nó bị thiếu một thư viện để có thể chạy tốt

$ git clone https://github.com/mozilla/pdf.js.git
$ cd pdf.js

Do đó chúng ta cài thêm thư viện pdfjs-dis bằng lệnh

yarn add pdfjs-dist

Hoặc có thể cài đặt thủ công như sau

pdf.js\package.json

```json
"dependencies": {
    "pdfjs-dist": "^4.7.76"
  },
```

Sau đó chạy lệnh sau để tạo server ảo

npx gulp server hoặc chúng ta có thể chạy live-server --port=82

Ở đây có chỉnh lại file gốc để phù hợp hơn việc lấy dữ liệu

C:\Users\Administrator\Desktop\pdf.js\examples\learning\prevnext.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Previous/Next example</title>
</head>
<body>
  <h1>'Previous/Next' example</h1>
  <div>
    <button id="prev" type="button">Previous 1</button>
    <button id="next" type="button">Next 2</button>
    &nbsp; &nbsp;
    <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
  </div>
  <div>
    <canvas id="the-canvas" style="border: 1px solid black; direction: ltr;"></canvas>
  </div>
  <script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script>
  <script id="script" type="module">
    //
    // If absolute URL from the remote server is provided, configure the CORS
    // header on that server.
    //
    var url = 'compressed.tracemonkey-pldi-09.pdf';
    var urls = [
      'compressed.tracemonkey-pldi-09.pdf',
      'test.pdf'
    ];
    //
    // In cases when the pdf.worker.js is located at the different folder than the
    // PDF.js's one, or the PDF.js is executed via eval(), the workerSrc property
    // shall be specified.
    //
    pdfjsLib.GlobalWorkerOptions.workerSrc =
      '../../node_modules/pdfjs-dist/build/pdf.worker.mjs';
    var pdfDoc = null,
      pageNum = 1,
      pageRendering = false,
      pageNumPending = null,
      scale = 0.8,
      canvas = document.getElementById('the-canvas'),
      ctx = canvas.getContext('2d');
    /**
     * Get page info from document, resize canvas accordingly, and render page.
     * @param num Page number.
     */
    function renderPage(num) {
      pageRendering = true;
      // Using promise to fetch the page
      pdfDoc.getPage(num).then(function (page) {
        var viewport = page.getViewport({ scale: scale, });
        // Support HiDPI-screens.
        var outputScale = window.devicePixelRatio || 1;
        canvas.width = Math.floor(viewport.width * outputScale);
        canvas.height = Math.floor(viewport.height * outputScale);
        canvas.style.width = Math.floor(viewport.width) + "px";
        canvas.style.height = Math.floor(viewport.height) + "px";
        var transform = outputScale !== 1
          ? [outputScale, 0, 0, outputScale, 0, 0]
          : null;
        // Render PDF page into canvas context
        var renderContext = {
          canvasContext: ctx,
          transform: transform,
          viewport: viewport,
        };
        var renderTask = page.render(renderContext);
        // Wait for rendering to finish
        renderTask.promise.then(function () {
          pageRendering = false;
          if (pageNumPending !== null) {
            // New page rendering is pending
            renderPage(pageNumPending);
            pageNumPending = null;
          }
        });
      });
      // Update page counters
      document.getElementById('page_num').textContent = num;
    }
    /**
     * If another page rendering in progress, waits until the rendering is
     * finished. Otherwise, executes rendering immediately.
     */
    function queueRenderPage(num) {
      if (pageRendering) {
        pageNumPending = num;
      } else {
        renderPage(num);
      }
    }
    /**
     * Displays previous page.
     */
    function onPrevPage() {
      if (pageNum <= 1) {
        return;
      }
      pageNum--;
      queueRenderPage(pageNum);
    }
    document.getElementById('prev').addEventListener('click', onPrevPage);
    /**
     * Displays next page.
     */
    function onNextPage() {
      if (pageNum >= pdfDoc.numPages) {
        return;
      }
      pageNum++;
      queueRenderPage(pageNum);
    }
    document.getElementById('next').addEventListener('click', onNextPage);
    /**
     * Asynchronously downloads PDF.
     */
    var books = [];
    var bookl = urls.forEach(async function (url, index) {
      var loadingTask = pdfjsLib.getDocument(url);
      pdfDoc = await loadingTask.promise;
      books.push(urls[index] + " " + pdfDoc.numPages);
      return books;
    });
    setTimeout(function () {
      console.log(books);
    }, 1000);
  </script>
</body>
</html>

PreviousLệnh copy folder bằng git scm :)NextRename a File in Linux – Bash Terminal Command mv part 1 (ok)

Last updated 1 month ago

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Previous/Next example</title> </head> <body> <h1>'Previous/Next' example</h1> <div> <button id="prev" type="button">Previous 1</button> <button id="next" type="button">Next 2</button>     <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span> </div> <div> <canvas id="the-canvas" style="border: 1px solid black; direction: ltr;"></canvas> </div> <script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script> <script id="script" type="module"> // // If absolute URL from the remote server is provided, configure the CORS // header on that server. // var url = 'compressed.tracemonkey-pldi-09.pdf'; var urls = [ 'compressed.tracemonkey-pldi-09.pdf', 'test.pdf' ]; // // In cases when the pdf.worker.js is located at the different folder than the // PDF.js's one, or the PDF.js is executed via eval(), the workerSrc property // shall be specified. // pdfjsLib.GlobalWorkerOptions.workerSrc = '../../node_modules/pdfjs-dist/build/pdf.worker.mjs'; var pdfDoc = null, pageNum = 1, pageRendering = false, pageNumPending = null, scale = 0.8, canvas = document.getElementById('the-canvas'), ctx = canvas.getContext('2d'); /** * Get page info from document, resize canvas accordingly, and render page. * @param num Page number. */ function renderPage(num) { pageRendering = true; // Using promise to fetch the page pdfDoc.getPage(num).then(function (page) { var viewport = page.getViewport({ scale: scale, }); // Support HiDPI-screens. var outputScale = window.devicePixelRatio || 1; canvas.width = Math.floor(viewport.width * outputScale); canvas.height = Math.floor(viewport.height * outputScale); canvas.style.width = Math.floor(viewport.width) + "px"; canvas.style.height = Math.floor(viewport.height) + "px"; var transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null; // Render PDF page into canvas context var renderContext = { canvasContext: ctx, transform: transform, viewport: viewport, }; var renderTask = page.render(renderContext); // Wait for rendering to finish renderTask.promise.then(function () { pageRendering = false; if (pageNumPending !== null) { // New page rendering is pending renderPage(pageNumPending); pageNumPending = null; } }); }); // Update page counters document.getElementById('page_num').textContent = num; } /** * If another page rendering in progress, waits until the rendering is * finished. Otherwise, executes rendering immediately. */ function queueRenderPage(num) { if (pageRendering) { pageNumPending = num; } else { renderPage(num); } } /** * Displays previous page. */ function onPrevPage() { if (pageNum <= 1) { return; } pageNum--; queueRenderPage(pageNum); } document.getElementById('prev').addEventListener('click', onPrevPage); /** * Displays next page. */ function onNextPage() { if (pageNum >= pdfDoc.numPages) { return; } pageNum++; queueRenderPage(pageNum); } document.getElementById('next').addEventListener('click', onNextPage); /** * Asynchronously downloads PDF. */ var books = []; var bookl = urls.forEach(async function (url, index) { var loadingTask = pdfjsLib.getDocument(url); pdfDoc = await loadingTask.promise; books.push(urls[index] + " " + pdfDoc.numPages); return books; }); setTimeout(function () { console.log(books); }, 1000); </script> </body> </html>