JS实现上传的PDF文件预览

在web开发中，我们经常需要处理文件的上传和预览。本文将介绍如何使用JavaScript实现上传的PDF文件的预览功能。

1. HTML部分

首先，我们需要在页面中加入一个用于选择和上传文件的输入框，以及用于显示预览的容器。在HTML的body标签中添加如下代码：

<input type="file" id="fileInput">
<div id="previewContainer"></div>

2. JS部分

接下来，我们使用JavaScript来实现文件的预览功能。在JavaScript的代码中，我们需要监听文件选择框的change事件，并获取到选中的文件。

const fileInput = document.getElementById('fileInput');
const previewContainer = document.getElementById('previewContainer');

fileInput.addEventListener('change', function() {
  const file = fileInput.files[0];
  
  if (file) {
    const reader = new FileReader();
    
    reader.onload = function(e) {
      const pdfData = new Uint8Array(e.target.result);
      
      // 调用pdf.js库的方法来渲染pdf文件
      renderPDF(pdfData);
    }
    
    reader.readAsArrayBuffer(file);
  }
});

3. 使用pdf.js库渲染PDF文件

在上面的代码中，我们使用了pdf.js库来渲染PDF文件。pdf.js是Mozilla开发的一个开源JavaScript库，用于在网页上渲染和显示PDF文件。

如果你还没有添加pdf.js库，可以通过以下方式引入：

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

定义renderPDF函数来渲染PDF文件：

function renderPDF(data) {
  pdfjsLib.getDocument(data).promise.then(function(pdf) {
    const numPages = pdf.numPages;
    
    for (let i = 1; i <= numPages; i++) {
      pdf.getPage(i).then(function(page) {
        const scale = 1.5;
        const viewport = page.getViewport({ scale });
        
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        previewContainer.appendChild(canvas);
        
        page.render({ canvasContext: context, viewport });
      });
    }
  });
}

上述代码中，我们使用pdfjsLib的getDocument方法获取到文件对应的PDF文档对象。pdf.numPages返回PDF中页面的总数，然后我们利用pdf.getPage(i)方法获取到每一页的页面对象，并将其渲染到一个空白的canvas上。

4. 预览效果和优化

尽管以上代码可以实现上传文件的PDF预览功能，但是默认情况下显示的PDF页面会有一些较大的间距。为了优化预览效果，可以添加一些CSS样式来适应预览容器的大小。

我们可以通过以下CSS样式来优化预览效果：

#previewContainer {
  display: flex;
  flex-wrap: wrap;
}

canvas {
  margin: 10px;
  border: 1px solid #CCC;
}

将上述CSS样式添加到标签内的