前端如何读取pdf文件内容，把每页内容转为图片预览？

发布于
3 月 17 日俄罗斯

前端如何读取pdf文件内容，把每页内容转为图片预览？

前端 javascript

阅读 567

1 个回答

发布于
3 月 17 日俄罗斯

更新于
3 月 19 日

✓ 已被采纳

预览：http://43.143.65.230/demo/print.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PDF to Image</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.min.js"></script>
  </head>
  <body>
    <input type="file" id="file-input" />
    <div id="output"></div>

    <script>
      document.getElementById('file-input').addEventListener('change', function (event) {
        const file = event.target.files[0];

        if (file.type !== 'application/pdf') {
          alert('Please upload a PDF file.');
          return;
        }

        const reader = new FileReader();
        reader.onload = function (e) {
          const pdfData = e.target.result;
          renderPDFToImages(pdfData);
        };
        reader.readAsArrayBuffer(file);
      });

      async function renderPDFToImages(pdfData) {
        const pdf = await pdfjsLib.getDocument({ data: pdfData }).promise;
        const outputDiv = document.getElementById('output');
        outputDiv.innerHTML = '';

        for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
          const page = await pdf.getPage(pageNum);
          const viewport = page.getViewport({ scale: 1.5 });
          const canvas = document.createElement('canvas');
          const context = canvas.getContext('2d');
          canvas.height = viewport.height;
          canvas.width = viewport.width;

          await page.render({
            canvasContext: context,
            viewport: viewport,
          }).promise;

          const img = document.createElement('img');
          img.src = canvas.toDataURL();
          outputDiv.appendChild(img);
        }
      }
    </script>
  </body>
</html>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题