打工人的保发秘籍：Word 文档在线预览选型

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>OfficeWeb365 在线预览示例</title>
    <style>
        body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; }
        .preview-container { width: 100%; height: 100vh; border: none; }
    </style>
</head>
<body>

    <!-- 预览容器 -->
    <iframe id="preview-iframe" class="preview-container" src=""></iframe>

    <script>
        // 1. 定义你的 OfficeWeb365 域名（通常官方会提供分配的域名）
        const owServer = "https://officeweb365.com"; 
        
        // 2. 你的专属 AppId
        const appId = "YOUR_APP_ID"; 
        
        // 3. 需要预览的 Word 文档公网可下载地址（必须经过 URL 编码）
        const fileUrl = encodeURIComponent("https://yourdomain.com");
        
        // 4. 可选高级安全参数（根据官方 API 文档调整）
        const options = [
            `furl=${fileUrl}`,           // 文件地址
            `db=1`,                      // 限制下载 (1为禁止, 0为允许)
            `cv=1`,                      // 限制复制 (1为禁止, 0为允许)
            `w=1`,                       // 开启水印 (1为开启)
            `wn=${encodeURIComponent("机密文件请勿外传")}`, // 水印文字
            `wc=rgba(200,200,200,0.3)`   // 水印颜色及透明度
        ];

        // 5. 拼接最终的预览地址并赋值给 iframe
        const finalSrc = `${owServer}?${options.join('&')}`;
        document.getElementById('preview-iframe').src = finalSrc;
    </script>
</body>
</html>

npm install docx-preview

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>纯前端 docx-preview 预览示例</title>
    <!-- 引入 docx-preview 所需的 js-zip 依赖及自身（若是模块化项目可用 import） -->
    <script src="https://unpkg.com"></script>
    <script src="https://unpkg.com"></script>
    <style>
        .actions { padding: 10px; background: #f5f5f5; border-bottom: 1px solid #ddd; }
        /* 预览容器样式：必须指定宽度或高度，建议有滚动条 */
        #preview-body {
            width: 100%;
            height: calc(100vh - 60px);
            overflow-y: auto;
            background-color: #525659; /* 模拟 PDF 阅读器的深色背景 */
            padding: 20px 0;
        }
        /* 定制 docx-preview 渲染出的文档阴影，使其更像 Word 界面 */
        .docx-wrapper {
            background-color: transparent !important;
            padding: 0 !important;
        }
        .docx {
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            margin: 0 auto 20px auto !important;
        }
    </style>
</head>
<body>

    <div class="actions">
        <button onclick="previewRemoteFile()">预览远程服务器的 .docx</button>
        <input type="file" id="file-input" accept=".docx" onchange="previewLocalFile(this)">
        <span style="color: red; margin-left: 10px; font-size: 13px;">*仅支持 .docx 格式</span>
    </div>

    <!-- 渲染挂载的目标容器 -->
    <div id="preview-body"></div>

    <script>
        const container = document.getElementById('preview-body');

        // 配置参数：控制页边距、实验性功能等
        const docxOptions = {
            className: "docx",           // 默认页面的 className
            inWrapper: true,             // 是否使用 wrapper 包裹
            ignoreWidth: false,          // 禁止忽略 Word 设定的宽度
            ignoreHeight: false,         // 禁止忽略 Word 设定的高度
            debug: false                 // 开启调试模式
        };

        /**
         * 场景 A：预览远程服务器上的 Docx 文件流
         */
        function previewRemoteFile() {
            const fileUrl = 'https://example.com'; // 替换为真实的后端文件流/下载接口
            
            container.innerHTML = '<p style="color:white; text-align:center;">文件解析中，请稍候...</p>';

            // 使用 fetch 请求获取 Blob 数据流
            fetch(fileUrl)
                .then(response => {
                    if (!response.ok) throw new Error("文件下载失败");
                    return response.blob();
                })
                .then(blob => {
                    // 调用 docx-preview 核心渲染方法
                    return docx.renderAsync(blob, container, null, docxOptions);
                })
                .then(() => {
                    console.log("docx-preview: 远程文档渲染成功");
                })
                .catch(err => {
                    container.innerHTML = `<p style="color:red; text-align:center;">渲染失败: ${err.message}</p>`;
                });
        }

        /**
         * 场景 B：预览用户通过 <input type="file"> 本地上传的文档
         */
        function previewLocalFile(input) {
            const file = input.files;
            if (!file) return;

            container.innerHTML = '<p style="color:white; text-align:center;">本地文件解析中...</p>';

            // 直接将 File 对象传入渲染函数（File 继承自 Blob）
            docx.renderAsync(file, container, null, docxOptions)
                .then(() => {
                    console.log("docx-preview: 本地文档渲染成功");
                })
                .catch(err => {
                    container.innerHTML = `<p style="color:red; text-align:center;">渲染失败: ${err.message}</p>`;
                });
        }
    </script>
</body>
</html>