暂无图片
暂无图片
暂无图片
暂无图片
暂无图片

当同事还在拼凑周报时,我用 AI 工具生成的报告被领导标红表扬了……

热衷于分享各种干货知识,大家有想看或者想学的可以评论区留言,秉承着“开源知识来源于互联网,回归于互联网”的理念,分享一些日常工作中能用到或者比较重要的内容,希望大家能够喜欢,不足之处请大家多提宝贵地意见,我们一起提升,守住自己的饭碗。

正文开始

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>周报编写工具</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #e0e7ff 0%, #d1e0fd 100%);
            min-height: 100vh;
            padding: 20px;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
            color: white;
            padding: 30px 40px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        header::before {
            content: "";
            position: absolute;
            transform: translateY( -50px;
            right: -50px;
            width: 150px;
            height: 150px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }
        
        header::after {
            content: "";
            position: absolute;
            bottom: -30px;
            left: -30px;
            width: 100px;
            height: 100px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }
        
        h1 {
            font-size: 2.5rem);
            margin-bottom: 12px;
            letter-spacing: 1px;
            position: relative;
            z-index: 1;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        
        .subtitle {
            opacity: 0.9;
            font-weight: 300;
            font-size: 1.2rem;
            max-width: 600px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }
        
        .app-description {
            padding: 20px 40px;
            background-color: #f0f5ff;
            border-bottom: 1px solid #d9e3ff;
            text-align: center;
            color: #4a6baf;
            font-size: 1.1rem;
            font-weight: 500;
        }
        
        .main-content {
            display: flex;
            flex-wrap: wrap;
            padding: 30px;
            gap: 25px;
        }
        
        .input-section {
            flex: 1;
            min-width: 300px;
            padding: 25px;
            background-color: #f8faff;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .preview-section {
            flex: 1;
            min-width: 300px;
            padding: 25px;
            background-color: white;
            border: 1px solid #e1e8ff;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            display: flex;
            flex-direction: column;
        }
        
        .section-title {
            margin-bottom: 22px;
            padding-bottom: 12px;
            border-bottom: 2px solid #4b6cb7;
            color: #182848;
            font-size: 1.6rem;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .section-title::before {
            content: "";
            display: block;
            width: 8px;
            height: 28px;
            background: #4b6cb7;
            border-radius: 4px;
        }
        
        .form-group {
            margin-bottom: 22px;
        }
        
        label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: #3a5a9e;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        label svg {
            width: 18px;
            height: 18px;
            fill: #4b6cb7;
        }
        
        input, textarea, select {
            width: 100%;
            padding: 14px;
            border: 1px solid #d0d9f0;
            border-radius: 8px;
            font-size: 1.05rem;
            transition: all 0.3s;
            background-color: white;
        }
        
        input:focus, textarea:focus, select:focus {
            outline: none;
            border-color: #4b6cb7;
            box-shadow: 0 0 0 3px rgba(75, 108, 183, 0.2);
        }
        
        textarea {
            min-height: 120px;
            resize: vertical;
            line-height: 1.5;
        }
        
        .actions {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-transform: translateY( 25px;
            padding: 0 20px 30px;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 14px 32px;
            border: none;
            border-radius: 8px;
            font-size: 1.1rem);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-width: 220px;
        }
        
        .btn-primary {
            background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
            color: white;
            box-shadow: 0 5px 18px rgba(75, 108, 183, 0.35);
        }
        
        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(75, 108, 183, 0.5);
        }
        
        .btn-secondary {
            background: linear-gradient(90deg, #6c757d 0%, #495057 100%);
            color: white;
            box-shadow: 0 5px 15px rgba(108, 117, 125, 0.3);
        }
        
        .btn-secondary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(108, 117, 125, 0.4);
        }
        
        .btn-sm {
            padding: 8px 16px;
            font-size: 0.95rem;
            min-width: auto;
        }
        
        .btn-success {
            background: linear-gradient(90deg, #28a745 0%, #1e7e34 100%);
            color: white;
            box-shadow: 0 4px 14px rgba(40, 167, 69, 0.35);
        }
        
        .btn-danger {
            background: linear-gradient(90deg, #dc3545 0%, #bd2130 100%);
            color: white;
            box-shadow: 0 4px 14px rgba(220, 53, 69, 0.35);
        }
        
        .preview-content {
            padding: 25px;
            background-color: #fafbff;
            border: 1px solid #e1e8ff;
            border-radius: 10px;
            flex-grow: 1;
            line-height: 1.7;
            overflow-y: auto;
            max-height: 600px;
        }
        
        .preview-content h2 {
            text-align: center;
            margin-bottom: 30px;
            color: #182848;
            font-size: 1.8rem;
            padding-bottom: 15px;
            border-bottom: 2px solid #e1e8ff;
        }
        
        .preview-content h3 {
            color: #4b6cb7;
            margin: 30px 0 18px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e1e8ff;
            font-size: 1.4rem;
        }
        
        .work-item {
            margin-bottom: 16px;
            padding-left: 24px;
            position: relative;
        }
        
        .work-item::before {
            content: "";
            position: absolute;
            left: 8px;
            transform: translateY( 10px;
            width: 8px;
            height: 8px;
            background: #4b6cb7;
            border-radius: 50%;
        }
        
        .date-display {
            text-align: center;
            margin-bottom: 25px;
            color: #666;
            font-style: italic;
            font-size: 1.1rem);
        }
        
        .signature {
            margin-transform: translateY( 40px;
            padding-top: 25px;
            border-top: 1px solid #e1e8ff;
            display: flex;
            justify-content: space-between;
        }
        
        .footer {
            text-align: center;
            padding: 25px;
            color: #6c7a9a;
            font-size: 0.95rem);
            background-color: #f0f5ff;
            border-transform: translateY( 1px solid #d9e3ff;
        }
        
        .entry-item) {
            display: flex;
            margin-bottom: 12px;
            gap: 10px;
            align-items: center;
        }
        
        .entry-item input {
            flex: 1;
            padding: 12px 15px;
        }
        
        .entries-container {
            margin-bottom: 18px;
        }
        
        .add-entry-btn {
            margin-bottom: 25px;
            width: 100%;
        }
        
        .preview-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .status-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
            color: #28a745;
            background: rgba(40, 167, 69, 0.1);
            padding: 6px 12px;
            border-radius: 20px;
        }
        
        .status-indicator::before {
            content: "";
            display: block;
            width: 10px;
            height: 10px;
            background: #28a745;
            border-radius: 50%;
        }
        
        @media (max-width: 768px) {
            .main-content {
                flex-direction: column;
            }
            
            .actions {
                flex-direction: column;
            }
            
            .btn {
                width: 100%;
            }
            
            .signature {
                flex-direction: column;
                gap: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>周报编写工具</h1>
            <p class="subtitle">高效创建专业周报,一键导出为Word文档</p>
        </header>
        
        <div class="app-description">
            填写下方表单,实时预览周报内容,完成后可导出为Word文档
        </div>
        
        <div class="main-content">
            <div class="input-section">
                <h2 class="section-title">填写周报内容</h2>
                
                <div class="form-group">
                    <label for="reportTitle">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M5 4v3h5.5v12h3V7H19V4z"/>
                        </svg>
                        周报标题
                    </label>
                    <input type="text"id="reportTitle" placeholder="例如:技术部周报" value="个人工作周报">
                </div>
                
                <div class="form-group">
                    <label for="authorName">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                        </svg>
                        姓名
                    </label>
                    <input type="text"id="authorName" placeholder="您的姓名" value="张三">
                </div>
                
                <div class="form-group">
                    <label for="department">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
                        </svg>
                        部门
                    </label>
                    <input type="text"id="department" placeholder="所在部门" value="技术研发部">
                </div>
                
                <div class="form-group">
                    <label for="reportDate">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
                        </svg>
                        周报日期
                    </label>
                    <input type="date"id="reportDate">
                </div>
                
                <div class="form-group">
                    <label>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
                        </svg>
                        本周总结
                    </label>
                    <div class="entries-container"id="weekSummaryEntries">
                        <div class="entry-item">
                            <input type="text" class="entry-input" placeholder="工作内容..." value="完成了项目A的需求分析和设计文档">
                            <button class="btn btn-sm btn-danger remove-entry-btn">删除</button>
                        </div>
                        <div class="entry-item">
                            <input type="text" class="entry-input" placeholder="工作内容..." value="开发了用户管理模块的核心功能">
                            <button class="btn btn-sm btn-danger remove-entry-btn">删除</button>
                        </div>
                    </div>
                    <button class="btn btn-sm btn-success add-entry-btn" data-section="weekSummary">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
                        </svg>
                        添加条目
                    </button>
                </div>
                
                <div class="form-group">
                    <label>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M21 11.01L3 11v2h18zM3 16h12v2H3zM21 6H3v2.01L21 8z"/>
                        </svg>
                        下周计划
                    </label>
                    <div class="entries-container"id="nextWeekPlanEntries">
                        <div class="entry-item">
                            <input type="text" class="entry-input" placeholder="工作计划..." value="完成项目A的用户管理模块测试">
                            <button class="btn btn-sm btn-danger remove-entry-btn">删除</button>
                        </div>
                        <div class="entry-item">
                            <input type="text" class="entry-input" placeholder="工作计划..." value="开始开发项目B的订单处理功能">
                            <button class="btn btn-sm btn-danger remove-entry-btn">删除</button>
                        </div>
                    </div>
                    <button class="btn btn-sm btn-success add-entry-btn" data-section="nextWeekPlan">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
                        </svg>
                        添加条目
                    </button>
                </div>
                
                <div class="form-group">
                    <label for="problems">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
                        </svg>
                        遇到的问题
                    </label>
                    <textarea id="problems" placeholder="工作中遇到的问题...">1. 项目A与第三方API集成时遇到认证问题
2. 部分旧系统文档缺失,影响功能理解
3. 测试环境资源紧张,影响测试进度</textarea>
                </div>
            </div>
            
            <div class="preview-section">
                <div class="preview-header">
                    <h2 class="section-title">周报预览</h2>
                    <div class="status-indicator">已保存</div>
                </div>
                <div class="preview-content"id="previewContent">
                    <!-- 预览内容将由JavaScript动态生成 -->
                </div>
            </div>
        </div>
        
        <div class="actions">
            <button class="btn btn-primary"id="exportBtn">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
                    <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
                </svg>
                导出Word文档
            </button>
            <button class="btn btn-secondary"id="clearBtn">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
                </svg>
                清空内容
            </button>
        </div>
        
        <div class="footer">
            <p>© 2023 周报编写工具 | 高效工作,清晰汇报 | 版本 2.0</p>
        </div>
    </div>

    <script>
        设置默认日期为当前日期
        document.addEventListener('DOMContentLoaded', function() {
            const today = new Date();
            const year = today.getFullYear();
            const month = String(today.getMonth() + 1).padStart(2, '0');
            const day = String(today.getDate()).padStart(2, '0');
            document.getElementById('reportDate').value = `${year}-${month}-${day}`;
            
            初始化预览
            updatePreview();
            
            添加输入事件监听器
            const inputs = document.querySelectorAll('input, textarea');
            inputs.forEach(input => {
                input.addEventListener('input', updatePreview);
            });
            
            导出按钮事件
            document.getElementById('exportBtn').addEventListener('click', exportToWord);
            
            清空按钮事件
            document.getElementById('clearBtn').addEventListener('click', clearForm);
            
            添加条目按钮事件
            document.querySelectorAll('.add-entry-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const section = this.getAttribute('data-section');
                    addEntry(section);
                });
            });
            
            初始删除按钮事件
            document.querySelectorAll('.remove-entry-btn').forEach(button => {
                button.addEventListener('click', function() {
                    this.parentElement.remove();
                    updatePreview();
                });
            });
        });
        
        添加条目
        function addEntry(section) {
            const container = document.getElementById(`${section}Entries`);
            const newEntry = document.createElement('div');
            newEntry.className = 'entry-item';
            newEntry.innerHTML = `
                <input type="text" class="entry-input" placeholder="${section === 'weekSummary' ? '工作内容...' : '工作计划...'}">
                <button class="btn btn-sm btn-danger remove-entry-btn">删除</button>
            `;
            container.appendChild(newEntry);
            
            添加事件监听器
            newEntry.querySelector('.entry-input').addEventListener('input', updatePreview);
            newEntry.querySelector('.remove-entry-btn').addEventListener('click', function() {
                this.parentElement.remove();
                updatePreview();
            });
            
            自动聚焦到新添加的输入框
            newEntry.querySelector('input').focus();
        }
        
        更新预览
        functionupdatePreview() {
            const title = document.getElementById('reportTitle').value || '个人工作周报';
            const author = document.getElementById('authorName').value || '张三';
            const department = document.getElementById('department').value || '技术研发部';
            const date = document.getElementById('reportDate').value;
            const problems = document.getElementById('problems').value;
            
            获取条目
            const summaryEntries = Array.from(document.querySelectorAll('#weekSummaryEntries .entry-input'))
                .map(input => input.value)
                .filter(val => val.trim() !== '');
                
            const planEntries = Array.from(document.querySelectorAll('#nextWeekPlanEntries .entry-input'))
                .map(input => input.value)
                .filter(val => val.trim() !== '');
            
            const formattedDate = date ? new Date(date).toLocaleDateString('zh-CN', {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                weekday: 'long'
            }) : new Date().toLocaleDateString('zh-CN', {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                weekday: 'long'
            });
            
            let previewHTML = `
                <h2>${title}</h2>
                <div class="date-display">${formattedDate}</div>
                <p><strong>姓名:</strong>${author} &nbsp;&nbsp;&nbsp; <strong>部门:</strong>${department}</p>
                
                <h3>本周工作总结</h3>
                <div>${formatEntries(summaryEntries)}</div>
                
                <h3>下周工作计划</h3>
                <div>${formatEntries(planEntries)}</div>
                
                <h3>遇到的问题</h3>
                <div>${formatText(problems)}</div>
                
                <div class="signature">
                    <div><strong>报告人:</strong>${author}</div>
                    <div><strong>日期:</strong>${formattedDate}</div>
                </div>
            `;
            
            document.getElementById('previewContent').innerHTML = previewHTML;
        }
        
        格式化条目
        function formatEntries(entries) {
            if (entries.length === 0) return'<p class="work-item">暂无内容</p>';
            
            return entries.map(entry => {
                return `<div class="work-item">${entry}</div>`;
            }).join('');
        }
        
        格式化文本(将换行转换为列表)
        function formatText(text) {
            if (!text) return'<p class="work-item">暂无内容</p>';
            
            const lines = text.split('\n').filter(line => line.trim() !== '');
            if (lines.length === 0) return'<p class="work-item">暂无内容</p>';
            
            return lines.map(line => {
                如果行以数字开头,去掉数字部分
                const trimmedLine = line.replace(/^\d+\.\s*/, '');
                return `<div class="work-item">${trimmedLine}</div>`;
            }).join('');
        }
        
        导出为Word文档 - 使用纯前端方式
        functionexportToWord() {
            try {
                const title = document.getElementById('reportTitle').value || '个人工作周报';
                const author = document.getElementById('authorName').value || '张三';
                const department = document.getElementById('department').value || '技术研发部';
                const date = document.getElementById('reportDate').value;
                const problems = document.getElementById('problems').value;
                
                获取条目
                const summaryEntries = Array.from(document.querySelectorAll('#weekSummaryEntries .entry-input'))
                    .map(input => input.value)
                    .filter(val => val.trim() !== '');
                    
                const planEntries = Array.from(document.querySelectorAll('#nextWeekPlanEntries .entry-input'))
                    .map(input => input.value)
                    .filter(val => val.trim() !== '');
                
                const formattedDate = date ? new Date(date).toLocaleDateString('zh-CN', {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric',
                    weekday: 'long'
                }) : new Date().toLocaleDateString('zh-CN', {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric',
                    weekday: 'long'
                });
                
                创建用于导出的HTML内容
                const exportHTML = `
                    <!DOCTYPE html>
                    <html>
                    <head>
                        <meta charset="UTF-8">
                        <style>
                            body { font-family: 'SimSun', '宋体', sans-serif; }
                            h1 { font-family: 'SimHei', '黑体', sans-serif; font-size: 22pt; text-align: center; }
                            h2 { font-family: 'SimHei', '黑体', sans-serif; font-size: 16pt; }
                            h3 { font-family: 'SimHei', '黑体', sans-serif; font-size: 14pt; }
                            p, li { font-size: 12pt; line-height: 1.8; }
                            .date { text-align: center; font-size: 12pt; margin-bottom: 20px; }
                            .info { margin-bottom: 30px; }
                            .section { margin-bottom: 25px; }
                            .signature { margin-transform: translateY( 40px; }
                        </style>
                    </head>
                    <body>
                        <h1>${title}</h1>
                        <p class="date">${formattedDate}</p>
                        <p class="info"><strong>姓名:</strong>${author} &nbsp;&nbsp;&nbsp; <strong>部门:</strong>${department}</p>
                        
                        <h2>一、本周工作总结</h2>
                        <div class="section">
                            ${formatEntriesForExport(summaryEntries)}
                        </div>
                        
                        <h2>二、下周工作计划</h2>
                        <div class="section">
                            ${formatEntriesForExport(planEntries)}
                        </div>
                        
                        <h2>三、遇到的问题</h2>
                        <div class="section">
                            ${formatProblem)sForExport(problems)}
                        </div>
                        
                        <div class="signature">
                            <p><strong>报告人:</strong>${author}</p>
                            <p><strong>日期:</strong>${formattedDate}</p>
                        </div>
                    </body>
                    </html>
                `;
                
                创建一个Blob对象
                const blob = new Blob([exportHTML], { type: 'application/msword' });
                
                生成文件名
                const fileName = `${title}_${formattedDate.replace(/[:\/]/g, '-')}.docx`;
                
                使用FileSaver.js保存文件
                saveAs(blob, fileName);
                
                显示成功消息
                alert('周报已成功导出为Word文档!');
            } catch (error) {
                console.error('导出失败:', error);
                alert('导出失败: ' + error.message);
            }
        }
        
        为导出格式化条目
        function formatEntriesForExport(entries) {
            if (entries.length === 0) return'<p>暂无内容</p>';
            
            return entries.map((entry, index) => {
                return `<p>${index + 1}. ${entry}</p>`;
            }).join('');
        }
        
        为导出格式化问题
        function formatProblemsForExport(text) {
            if (!text) return '<p>暂无内容</p>';
            
            const lines = text.split('\n').filter(line => line.trim() !== '');
            if (lines.length === 0) return '<p>暂无内容</p>';
            
            return lines.map((line, index) => {
                如果行已经以数字开头,保留原格式
                if (/^\d+\.\s*/.test(line)) {
                    return `<p>${line}</p>`;
                }
                // 否则添加序号
                return `<p>${index + 1}. ${line}</p>`;
            }).join('');
        }
        
        // 清空表单内容
        functionclearForm() {
            if (confirm('确定要清空所有内容吗?')) {
                // 清空基本信息
                document.getElementById('reportTitle').value = '';
                document.getElementById('authorName').value = '';
                document.getElementById('department').value = '';
                
                // 设置当前日期
                const today = new Date();
                const year = today.getFullYear();
                const month = String(today.getMonth() + 1).padStart(2, '0');
                const day = String(today.getDate()).padStart(2, '0');
                document.getElementById('reportDate').value = `${year}-${month}-${day}`;
                
                // 清空本周总结
                const summaryContainer = document.getElementById('weekSummaryEntries');
                summaryContainer.innerHTML = '';
                addEntry('weekSummary');
                
                // 清空下周计划
                const planContainer = document.getElementById('nextWeekPlanEntries');
                planContainer.innerHTML = '';
                addEntry('nextWeekPlan');
                
                // 清空问题
                document.getElementById('problems').value = '';
                
                // 更新预览
                updatePreview();
                
                // 显示提示
                alert('表单内容已清空!');
            }
        }
    </script>
</body>
</html>    

下载链接:

链接: https://pan.baidu.com/s/1-pHF8qFBJp-shNqd9HOyFw 
提取码: 7exg

 



END
往期文章回顾

文中的概念来源于互联网,如有侵权,请联系我删除。

欢迎关注公众号:小周的数据库进阶之路,一起交流AI、数据库、中间件和云计算等技术。如果觉得读完本文有收获,可以转发给其他朋友,大家一起学习进步!感兴趣的朋友可以加我微信,拉您进群与业界的大佬们一起交流学习。



文章转载自小周的数据库进阶之路,如果涉嫌侵权,请发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。

评论