从Azure Blob Storage获取Blob时如何在浏览器显示文件缩略图

先搞定URL触发下载的核心问题 #

你遇到的URL直接触发下载，核心原因有两个：

1. Blob的Content-Type设置错误：上传时如果没指定正确的MIME类型，Azure会默认设为application/octet-stream，浏览器识别为二进制文件就会直接下载。
2. SAS Token的响应头配置缺失：生成SAS时没有指定content_disposition: inline，即使Content-Type正确，浏览器也可能强制下载。

修复步骤（结合你的FastAPI代码） #

1. 上传Blob时设置正确的Content-Type

在上传文件到Azure Blob的代码里，根据文件扩展名自动设置对应的MIME类型：

from azure.storage.blob import BlobClient
import mimetypes
import os

# 上传逻辑中添加
file_ext = os.path.splitext(file.filename)[1].lower()
content_type, _ = mimetypes.guess_type(file.filename)
# 兜底处理：如果猜不到类型，手动指定
content_type = content_type or "application/octet-stream"

blob_client = BlobClient.from_connection_string(conn_str, container_name, blob_name)
blob_client.upload_blob(file.file, content_type=content_type)

2. 生成SAS Token时指定inline disposition

生成SAS的代码里，添加content_disposition参数：

from azure.storage.blob import generate_blob_sas, BlobSasPermissions
from datetime import datetime, timedelta

sas_token = generate_blob_sas(
    account_name=account_name,
    container_name=container_name,
    blob_name=blob_name,
    account_key=account_key,
    permission=BlobSasPermissions(read=True),
    expiry=datetime.utcnow() + timedelta(hours=1),
    content_disposition="inline"  # 关键：让浏览器尝试打开而非下载
)

这样处理后，图片URL可以直接用<img>标签显示，PDF URL也能被pdf-viewer类组件正常加载。

分类型实现缩略图 #

1. 图片类文件（JPG/PNG等） #

直接用React的<img>标签即可，不需要额外组件：

// React组件中渲染图片缩略图
const FileThumbnail = ({ sasUrl }) => {
  return (
    <img 
      src={sasUrl} 
      alt="文件缩略图" 
      style={{ width: 100, height: 100, objectFit: 'cover', borderRadius: 4 }} 
    />
  );
};

2. PDF文件 #

推荐用pdfjs-dist库渲染第一页作为缩略图：

安装依赖

npm install pdfjs-dist

React组件示例

import { useEffect, useRef, useState } from 'react';
import * as pdfjsLib from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';

pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

const PDFThumbnail = ({ sasUrl }) => {
  const canvasRef = useRef(null);
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    const renderThumbnail = async () => {
      try {
        const pdf = await pdfjsLib.getDocument(sasUrl).promise;
        const page = await pdf.getPage(1);
        const viewport = page.getViewport({ scale: 0.2 }); // 缩放比例控制缩略图大小

        const canvas = canvasRef.current;
        canvas.width = viewport.width;
        canvas.height = viewport.height;

        const ctx = canvas.getContext('2d');
        await page.render({ canvasContext: ctx, viewport }).promise;
        setIsLoaded(true);
      } catch (err) {
        console.error('PDF缩略图生成失败:', err);
      }
    };

    renderThumbnail();
  }, [sasUrl]);

  return isLoaded ? (
    <canvas 
      ref={canvasRef} 
      style={{ width: 100, height: 100, objectFit: 'cover', borderRadius: 4 }} 
    />
  ) : (
    <div style={{ width: 100, height: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#f5f5f5', borderRadius: 4 }}>
      加载中...
    </div>
  );
};

3. 办公文档（Word/Excel等） #

这类文件前端直接生成缩略图成本高，建议后端预生成缩略图：

• 用Python的libreoffice-convert或unoconv将文档转成PDF，再用pdf2image生成图片缩略图。
• 把生成的缩略图上传到Azure Blob（比如命名为原文件名_thumb.jpg），前端直接获取缩略图的SAS URL显示。

关于浏览器下载后生成缩略图的方案 #

如果一定要走这个路径，实现方式如下：

React端实现下载并生成缩略图 #

import { useEffect, useState } from 'react';
import * as pdfjsLib from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';

pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

const generateThumbnailFromFile = async (fileUrl) => {
  try {
    const response = await fetch(fileUrl);
    const blob = await response.blob();
    
    if (blob.type.startsWith('image/')) {
      return URL.createObjectURL(blob);
    } else if (blob.type === 'application/pdf') {
      const pdf = await pdfjsLib.getDocument(URL.createObjectURL(blob)).promise;
      const page = await pdf.getPage(1);
      const viewport = page.getViewport({ scale: 0.2 });
      const canvas = document.createElement('canvas');
      canvas.width = viewport.width;
      canvas.height = viewport.height;
      const ctx = canvas.getContext('2d');
      await page.render({ canvasContext: ctx, viewport }).promise;
      return canvas.toDataURL();
    }
    // 其他类型返回默认图标
    return '/default-document-thumb.png';
  } catch (err) {
    console.error('缩略图生成失败:', err);
    return '/error-thumb.png';
  }
};

// 在组件中使用
const FileItem = ({ file }) => {
  const [thumbnailUrl, setThumbnailUrl] = useState(null);
  
  useEffect(() => {
    generateThumbnailFromFile(file.sasUrl).then(url => setThumbnailUrl(url));
  }, [file.sasUrl]);
  
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: 8 }}>
      {thumbnailUrl ? (
        <img src={thumbnailUrl} alt="缩略图" style={{ width: 100, height: 100, objectFit: 'cover', borderRadius: 4 }} />
      ) : (
        <div style={{ width: 100, height: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#f5f5f5', borderRadius: 4 }}>
          加载中...
        </div>
      )}
      <span style={{ flex: 1 }}>{file.name}</span>
    </div>
  );
};

性能问题说明 #

• 如果文件数量多、单文件体积大（比如几十MB的PDF/文档），浏览器同时下载多个文件会占用大量带宽和内存，导致页面卡顿。
• 优化建议：分页加载文件，只渲染当前页面的缩略图；或者优先加载小文件的缩略图，大文件用默认图标占位，用户点击后再加载详细内容。

内容的提问来源于stack exchange，提问作者KingJac