Angular应用能否从内网共享文件夹打开并编辑DOCS/XLSX/PDF文件？

一、后端（Spring-MVC）处理逻辑 #

1. 文件存储与路径记录 #

• 部署Samba服务的Linux服务器需将共享目录挂载到本地路径（例如/mnt/samba_case_files/），确保Spring应用拥有读写权限。
• 上传接口接收文件时，将文件写入上述共享目录，同时在数据库中记录文件相对路径（如case_123/file2edit.doc）及关联的案例ID。
• 查询接口根据案例ID获取文件列表时，返回文件名称和拼接好的Windows客户端共享路径：file:///X:/TheShare/${relativePath}（假设企业内所有客户端统一将Samba共享映射为X盘的TheShare目录）。

2. 核心代码示例 #

上传接口

@PostMapping("/cases/{caseId}/files")
public ResponseEntity<String> uploadFile(@PathVariable Long caseId, MultipartFile file) throws IOException {
    // 构建共享目录下的文件路径
    String relativePath = String.format("case_%d/%s", caseId, file.getOriginalFilename());
    File targetFile = new File("/mnt/samba_case_files/", relativePath);
    // 确保父目录存在
    Files.createDirectories(targetFile.getParentFile().toPath());
    // 写入文件到共享目录
    file.transferTo(targetFile);
    // 保存路径到数据库（省略DB操作代码）
    fileRepository.save(new CaseFile(caseId, relativePath));
    return ResponseEntity.ok("文件上传成功");
}

文件列表查询接口

@GetMapping("/cases/{caseId}/files")
public ResponseEntity<List<FileDto>> getCaseFiles(@PathVariable Long caseId) {
    List<CaseFile> caseFiles = fileRepository.findByCaseId(caseId);
    List<FileDto> dtoList = caseFiles.stream().map(file -> {
        FileDto dto = new FileDto();
        dto.setFileName(file.getRelativePath().substring(file.getRelativePath().lastIndexOf("/") + 1));
        // 拼接Windows共享路径
        dto.setFileUrl(String.format("file:///X:/TheShare/%s", file.getRelativePath()));
        return dto;
    }).collect(Collectors.toList());
    return ResponseEntity.ok(dtoList);
}

// 对应的DTO类
class FileDto {
    private String fileName;
    private String fileUrl;
    // getter/setter 省略
}

二、前端（Angular 7）实现 #

1. 获取文件列表并渲染链接 #

在案例编辑组件中，请求后端接口获取文件列表，通过循环渲染可点击的文件链接。由于浏览器默认拦截HTTP页面访问file://协议的请求，需通过window.open处理点击事件，并添加拦截提示。

组件代码示例

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

interface FileDto {
  fileName: string;
  fileUrl: string;
}

@Component({
  selector: 'app-case-editor',
  template: `
    <h3>已上传文件</h3>
    <ul>
      <li *ngFor="let file of fileList">
        <a href="javascript:void(0)" (click)="openFile(file.fileUrl)">{{ file.fileName }}</a>
      </li>
    </ul>
  `
})
export class CaseEditorComponent implements OnInit {
  fileList: FileDto[] = [];
  caseId = 123; // 实际从路由或其他业务逻辑获取

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get<FileDto[]>(`/api/cases/${this.caseId}/files`).subscribe(data => {
      this.fileList = data;
    });
  }

  openFile(fileUrl: string): void {
    const win = window.open(fileUrl);
    if (!win) {
      alert('浏览器已阻止文件打开，请检查浏览器安全设置');
    }
  }
}

三、浏览器安全配置（关键） #

现代浏览器默认禁止从HTTPS/HTTP页面访问file://协议资源，需针对不同浏览器配置放行：

1. Chrome/Edge #

• 企业批量配置：使用组策略设置Allow file URLs，允许指定站点访问本地文件。
• 单用户临时配置：启动浏览器时添加启动参数：

  chrome.exe --allow-file-access-from-files --disable-web-security
  

  注：禁用Web安全性仅用于测试，生产环境建议使用组策略统一配置。

2. Firefox #

• 在地址栏输入about:config，搜索并设置：
  • security.fileuri.strict_origin_policy = false
  • security.fileuri.origin_policy_behavior = 0

四、注意事项 #

• 统一盘符映射：确保所有Windows客户端将Samba共享目录映射为同一个盘符（如X盘的TheShare），否则生成的file://路径无效。
• Samba权限配置：为用户分配Samba共享目录的读写权限，确保编辑后的文件可直接保存回服务器。
• 浏览器版本兼容：不同浏览器版本的安全策略可能有差异，需测试目标版本的兼容性。

内容的提问来源于stack exchange，提问作者OASE Software GmbH