Kodbox 文件预览进化之路：集成 开源产品BaseMetas Fileview 打造私有化全格式预览

docker run -itd \
    --name fileview \
    -p 9000:80 \
    --restart=always \
    basemetas/fileview:latest

version: '3'
services:
  kodbox:
    image: kodcloud/kodbox:latest
    container_name: kodbox
    ports:
      - "8080:80"
    volumes:
      - ./kodbox-data:/var/www/html
    restart: always
    networks:
      - kodbox-net

  fileview:
    image: basemetas/fileview:latest
    container_name: fileview
    ports:
      - "9000:80"
    restart: always
    networks:
      - kodbox-net

networks:
  kodbox-net:
    driver: bridge

server {
    listen 443 ssl;
    server_name pan.example.com;

    # SSL 配置
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;

    client_max_body_size 1024m;  # 上传文件大小限制

    # Kodbox 主服务
    location / {
        proxy_pass http://kodbox:80;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # Fileview 预览服务
    location /fileview/ {
        proxy_pass http://fileview:80/;

        proxy_set_header X-Forwarded-Prefix /fileview;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Port $server_port;
        proxy_set_header X-Forwarded-Host $host;
    }
}

// Kodbox 分享链接通常格式为：
// https://pan.example.com/index.php/share/link/{shareToken}
// 下载地址：
// https://pan.example.com/index.php/share/file/download/{shareToken}

const shareDownloadUrl = "https://pan.example.com/index.php/share/file/download/abc123";
const fileName = "project-plan.docx";

const previewUrl = `https://pan.example.com/fileview/preview/view?url=${encodeURIComponent(shareDownloadUrl)}&fileName=${encodeURIComponent(fileName)}`;
window.open(previewUrl, '_blank');

// 获取文件下载地址
async function getKodboxFileUrl(filePath, token) {
    const response = await fetch('https://pan.example.com/index.php?user/file/download', {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ path: filePath })
    });
    return await response.json();
}

// 构造 Fileview 预览地址
function buildPreviewUrl(downloadUrl, fileName) {
    const url = encodeURIComponent(downloadUrl);
    const name = encodeURIComponent(fileName);
    return `https://pan.example.com/fileview/preview/view?url=${url}&fileName=${name}`;
}

import { Base64 } from "js-base64";

function buildPreviewUrlWithData(downloadUrl, fileName, displayName) {
    const opts = {
        url: downloadUrl,
        fileName: fileName,
        displayName: displayName || fileName
    };
    const base64Data = encodeURIComponent(Base64.encode(JSON.stringify(opts)));
    return `https://pan.example.com/fileview/preview/view?data=${base64Data}`;
}

<?php
// Kodbox 插件示例结构
// plugins/fileviewPreview/plugin.php

class fileviewPreviewPlugin extends PluginBase {
    
    public function regist() {
        // 注册文件打开事件
        $this->hookRegist(array(
            'user.commonJs.insert' => 'fileviewPreviewPlugin.insertJs',
        ));
    }
    
    public function insertJs() {
        // 注入前端 JavaScript
        return '<script src="' . $this->pluginUrl('static/preview.js') . '"></script>';
    }
}

// plugins/fileviewPreview/static/preview.js
// 前端脚本：拦截文件打开，对特定格式使用 Fileview 预览

(function() {
    const FILEVIEW_BASE = '/fileview';
    
    // 支持 Fileview 预览的格式列表
    const PREVIEW_EXTENSIONS = [
        // Office
        'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'wps', 'et', 'dps',
        // 版式文档
        'ofd',
        // CAD
        'dwg', 'dxf',
        // 3D
        'gltf', 'glb', 'obj', 'stl', 'fbx',
        // 流程图/思维导图
        'vsd', 'vsdx', 'bpmn', 'drawio', 'xmind',
        // 电子书
        'epub',
        // 压缩包
        'zip', 'rar', '7z', 'tar'
    ];
    
    function getFileExtension(fileName) {
        return fileName.split('.').pop().toLowerCase();
    }
    
    function openWithFileview(fileUrl, fileName) {
        const url = encodeURIComponent(fileUrl);
        const name = encodeURIComponent(fileName);
        const previewUrl = `${FILEVIEW_BASE}/preview/view?url=${url}&fileName=${name}&mode=embed`;
        window.open(previewUrl, '_blank');
    }
    
    // 监听文件打开事件（需根据 Kodbox 实际前端框架适配）
    // 以下为集成思路示意
    if (window.kodApp) {
        kodApp.event.on('file.open', function(fileInfo) {
            const ext = getFileExtension(fileInfo.name);
            if (PREVIEW_EXTENSIONS.includes(ext)) {
                openWithFileview(fileInfo.downloadUrl, fileInfo.name);
                return false; // 阻止默认行为
            }
        });
    }
})();

fileview:
  network:
    security:
      trusted-sites: pan.example.com
      untrusted-sites: ""

// 嵌入模式 - 无菜单栏，适合嵌入 Kodbox 界面
const previewUrl = `https://pan.example.com/fileview/preview/view?url=${fileUrl}&fileName=${fileName}&mode=embed`;

// 添加水印 - 适用于敏感文件预览
const watermark = encodeURIComponent("内部文件\n禁止外传");
const previewUrl = `https://pan.example.com/fileview/preview/view?url=${fileUrl}&fileName=${fileName}&watermark=${watermark}`;

// 嵌入模式 + 水印
const previewUrl = `https://pan.example.com/fileview/preview/view?url=${fileUrl}&fileName=${fileName}&mode=embed&watermark=${watermark}`;

# Docker Compose 配置 - 共享存储卷
services:
  kodbox:
    volumes:
      - ./kodbox-data:/var/www/html
      - ./shared-files:/shared-files

  fileview:
    volumes:
      - ./shared-files:/shared-files

// 直接使用本地文件路径预览（无需网络传输）
const filePath = encodeURIComponent("/shared-files/documents/report.docx");
const fileName = encodeURIComponent("report.docx");
const previewUrl = `https://pan.example.com/fileview/preview/view?path=${filePath}&fileName=${fileName}`;