【前端動手玩創意】讓你的PDF檔案更難被抓取(8)

前端

Oo_花之舞__oO 2023-04-25 08:04:41 ‧ 743 瀏覽

分享至

<!DOCTYPE html>
<html>
<head>
  <title>PDF Viewer</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
</head>
<body>
  <input type="file" id="pdf-file">
  <div id="pdf-viewer"></div>

  <script>
    const fileInput = document.getElementById('pdf-file');
    const pdfViewer = document.getElementById('pdf-viewer');

    fileInput.addEventListener('change', function() {
      const file = fileInput.files[0];

      // Load the PDF file using pdf.js library
      const fileReader = new FileReader();
      fileReader.onload = function() {
        const typedarray = new Uint8Array(this.result);
        pdfjsLib.getDocument(typedarray).promise.then(function(pdf) {
          // Get the first page of the PDF and render it
          pdf.getPage(15).then(function(page) {
            const canvas = document.createElement('canvas');
            const viewport = page.getViewport({scale: 1});
            const context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            page.render({canvasContext: context, viewport: viewport}).promise.then(function() {
              pdfViewer.appendChild(canvas);
            });
          });
        });
      };
      fileReader.readAsArrayBuffer(file);
    });
  </script>
</body>
</html>

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

【前端動手玩創意】讓你的PDF檔案更難被抓取(8)

目錄

【前端動手玩創意】等待的轉圈圈效果 (1)

【前端動手玩創意】google五星評分的星星(2)

【前端動手玩創意】CSS-3D卡片翻轉效果(3) (今天難度頗高，想挑戰再進來！)

【前端動手玩創意】一句CSS做出好看的hero section！(4)

【前端動手玩創意】創造一個Skill bar(5)

【前端動手玩創意】遮蔽廣告(D卡未登入)腳本、自定義新增名單(6)

【前端動手玩創意】前端canvas截圖的招式！竟然有三招，可存成SVG或PNG (7)

【前端動手玩創意】讓你的PDF檔案更難被抓取(8)

【前端動手玩創意】哇操！你敢信？花式寫todo-list，body裡面一行都沒有也能搞？(9)

【前端動手玩創意】卡片製作，才不是！是卡片製作器！(10)

尚未有邦友留言

【前端動手玩創意】讓你的PDF檔案更難被抓取(8)

目錄

尚未有邦友留言

標記使用者