pdf文件预览实现

pdf预览实现

1.文件上传处理：当用户上传 PDF 文件时，handleFileUpload 函数会检测文件类型，如果是 PDF，则创建一个 Blob URL：

js 复制代码

const handleFileUpload = async (e) => {
    const uploadedFile = e.target.files[0];
    
    if (!uploadedFile) return;

    setFile(uploadedFile);
    setLoading(true);
    setError(null);
    setSignatureImage(null); // 清除之前的签名
    
    // 获取文件类型
    const fileExtension = uploadedFile.name.split('.').pop().toLowerCase();
    setFileType(fileExtension);
    
    try {
      // 根据文件类型进行不同处理
      if (fileExtension === 'pdf') {
        // 为PDF创建一个blob URL
        const url = URL.createObjectURL(uploadedFile);
        setPdfUrl(url);
        setLoading(false);
      } else if (['xlsx', 'xls'].includes(fileExtension)) {
        
      } else if (['docx'].includes(fileExtension)) {
       
    } catch (err) {
      console.error('Error processing file:', err);
      setError('文件处理失败');
      setLoading(false);
    }
  };

Blob URL（也称为Object URL）是一种特殊的URL，它允许JavaScript代码在浏览器中创建一个指向内存中数据的URL引用。这种URL以"blob:"开头，用于直接引用内存中的文件或数据块（Blob对象），而不需要将数据上传到服务器。

这段代码的工作原理是：

URL.createObjectURL(uploadedFile) 方法接收一个Blob或File对象（在这里是用户上传的PDF文件），并返回一个临时的URL。
这个URL指向浏览器内存中的文件数据，形式类似于：blob:example.com/550e8400-e2...
setPdfUrl(url) 将这个URL保存到状态中，然后用于在iframe中显示PDF

Blob URL的主要优点：

无需服务器：可以在客户端直接处理和预览文件，无需上传到服务器
高效：不需要将文件数据编码为base64或其他格式
安全：文件数据不会离开用户的浏览器

注意事项：

Blob URL会占用内存资源，当不再需要时应该释放：

js 复制代码

React.useEffect(() => {
  return () => {
    // 组件卸载时释放blob URL
    if (pdfUrl) {
      URL.revokeObjectURL(pdfUrl);
    }
  };
}, [pdfUrl]);

URL.revokeObjectURL(pdfUrl) 方法用于通知浏览器不再需要保留对该文件的引用，可以释放占用的内存。

2.预览渲染：在 renderPdfPreview 函数中，使用 iframe 来显示 PDF：

js 复制代码

const renderPdfPreview = () => {
  if (!pdfUrl) return null;
  
  return (
    <div className="pdf-preview">
      <iframe
        src={pdfUrl}
        title="PDF预览"
        width="100%"
        height="600px"
        className="pdf-iframe"
      />
    </div>
  );
};