如何在Azure部署的Django站点免费实现Excel浏览器在线预览？

本方案完全基于自有服务实现，无需调用SharePoint或其他第三方外部服务，满足内部文件安全要求。

后端（Django）改造 #

• 修改文件响应头，将原触发下载的attachment属性改为inline，同时指定正确的Excel文件MIME类型，让浏览器识别为可内联打开的内容。
  示例视图代码：

  from django.http import HttpResponse, HttpResponseForbidden
  import os
  from .models import CompanyFile
  
  def excel_preview(request, file_id):
      # 内部权限校验，确认当前用户属于公司内部且有文件访问权限
      if not request.user.is_authenticated or not request.user.is_company_internal:
          return HttpResponseForbidden("无访问权限")
      
      # 读取内部文件，可适配本地存储、Azure Blob/File存储
      file_obj = CompanyFile.objects.get(id=file_id)
      file_ext = os.path.splitext(file_obj.file_name)[-1].lower()
  
      content_type_map = {
          '.xls': 'application/vnd.ms-excel',
          '.xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      }
      file_content = file_obj.read_file_content() # 自行实现对应存储的文件读取逻辑
      
      response = HttpResponse(
          file_content, 
          content_type=content_type_map.get(file_ext, 'application/octet-stream')
      )
      # 核心配置：inline表示内联打开而非下载
      response['Content-Disposition'] = f'inline; filename="{file_obj.file_name}"'
      return response
  

• 路由配置：新增预览接口路由，指向上述视图

  # urls.py
  urlpatterns = [
      # 其他原有路由
      path('excel/preview/<int:file_id>/', excel_preview, name='excel_preview'),
  ]
  

• 若文件存储在Azure Blob Storage，可在生成SAS访问令牌时指定content-disposition=inline参数，无需代理文件流也可实现内联打开。

前端（JS）改造 #

• 调整文件列表的链接逻辑，Excel文件链接指向预览接口，新增target="_blank"属性实现新标签页打开：

  // 生成Excel文件DOM节点示例
  function createExcelFileDom(file) {
      const link = document.createElement('a');
      link.href = `/excel/preview/${file.id}/`;
      link.target = '_blank'; // 新标签页打开
      link.textContent = file.name;
      // 可自定义添加xls图标样式
      link.classList.add('excel-file-link');
      return link;
  }
  

• 若需要实现类SharePoint的美化预览界面，可使用开源的xlsx前端解析库，在预览页将Excel内容直接渲染为HTML表格，所有解析操作在用户本地浏览器完成，不会泄露内部文件：

  // 预览页代码示例
  import * as XLSX from 'xlsx';
  
  async function renderExcelPreview(fileId) {
      const res = await fetch(`/excel/preview/${fileId}/`);
      const fileBuffer = await res.arrayBuffer();
      const workbook = XLSX.read(fileBuffer, { type: 'array' });
      // 渲染第一个工作表
      const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
      const tableHtml = XLSX.utils.sheet_to_html(firstSheet);
      document.getElementById('preview-area').innerHTML = tableHtml;
  }
  

Azure 部署适配 #

• 若使用Azure App Service部署，在服务配置的CORS规则中添加站点域名，避免跨域拦截预览请求。
• 存储内部文件的Azure存储账号关闭公共访问权限，仅允许Django后端服务访问，所有文件请求必须经过Django的权限校验，符合内部安全要求。

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