基于docx-preview.js实现页面加载时自动渲染Word文档的需求

你需要改造原代码，去掉手动上传交互，改成页面加载时自动从数据库对应的Word地址拉取文件并渲染。下面是具体实现方案：

关键修改点： #

• 移除原有的文件上传输入框和预览按钮，无需手动操作
• 实现从URL中提取id参数的逻辑
• 页面加载完成后，自动根据id获取对应Word文档地址，通过请求获取文件Blob，再用docx-preview渲染到指定容器

修改后的完整代码： #

<html>
<head>
    <title>自动渲染Word文档</title>
</head>
<body>
    <div id="word-container" class=""></div>
    
    <script type="text/javascript" src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
    <script src="Scripts/docx-preview.js"></script>
    <script type="text/javascript">
        // 从URL中获取query参数的工具函数
        function getUrlParam(name) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(name);
        }

        // 页面加载完成后自动执行渲染
        window.addEventListener('DOMContentLoaded', async function() {
            const articleId = getUrlParam('id');
            if (!articleId) {
                document.getElementById('word-container').innerHTML = '<p>缺少文章ID参数</p>';
                return;
            }

            // 这里替换为实际逻辑：根据articleId从数据库获取Word文件地址
            // 示例：实际项目建议通过后端接口获取，此处仅做硬编码演示
            let docUrl;
            switch(articleId) {
                case '5':
                    docUrl = 'files/articles/new-method-in-raising-children.docx';
                    break;
                // 可添加更多ID与文档地址的映射
                default:
                    document.getElementById('word-container').innerHTML = '<p>未找到对应文档</p>';
                    return;
            }

            try {
                // 请求Word文档的Blob数据
                const response = await fetch(docUrl);
                if (!response.ok) {
                    throw new Error(`请求文档失败：${response.status}`);
                }
                const docBlob = await response.blob();

                // 设置渲染选项
                const docxOptions = Object.assign(docx.defaultOptions, {
                    useMathMLPolyfill: true
                });
                const container = document.querySelector("#word-container");

                // 渲染文档到容器
                await docx.renderAsync(docBlob, container, null, docxOptions);
            } catch (error) {
                document.getElementById('word-container').innerHTML = `<p>渲染文档出错：${error.message}</p>`;
            }
        });
    </script>
</body>
</html>

注意事项： #

• 文档地址获取：示例用switch硬编码ID与地址的映射，实际项目中请通过后端接口（如/api/get-doc-url?id=5）获取对应地址，避免前端暴露路径信息
• 跨域问题：若Word文件与页面不在同一域名，需后端配置CORS允许跨域请求
• 路径校验：确保docx-preview.js的路径与实际部署位置一致，示例中为Scripts/docx-preview.js，请根据情况调整
• 错误处理：代码包含基础错误处理逻辑，可根据需求优化提示样式或扩展处理场景

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