dompdf.js 1.0.0

package/html2pdf-userscript.js

@@ -0,0 +1,936 @@
+// ==UserScript==
+// @name         HTML2PDF 网页元素转PDF
+// @namespace    http://tampermonkey.net/
+// @version      1.0
+// @description  在任意网站添加按钮，选择页面元素并生成PDF
+// @author       You
+// @match        *://*/*
+// @grant        none
+// @require      file:///D:/project-code/html2pdf/dist/html2pdf.js
+// @require      file:///D:/project-code/html2pdf/examples/SourceHanSansSC-Normal-Min-normal.js
+// ==/UserScript==
+
+(function () {
+    'use strict';
+
+    // 全局变量
+    let isSelecting = false;
+    let selectedElement = null;
+    let overlay = null;
+    let controlPanel = null;
+
+    // 创建控制面板
+    function createControlPanel() {
+        const panel = document.createElement('div');
+        panel.id = 'html2pdf-control-panel';
+        panel.style.cssText = `
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            z-index: 10000;
+            font-family: 'Arial', sans-serif;
+            transition: all 0.3s ease;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+        `;
+
+        // 创建主面板内容（默认隐藏）
+        const panelContent = document.createElement('div');
+        panelContent.id = 'html2pdf-panel-content';
+        panelContent.style.cssText = `
+            background: linear-gradient(145deg, #0F1C2E, #1E2A45);
+            border: 1px solid #3A86FF;
+            border-radius: 10px;
+            padding: 15px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 15px rgba(58, 134, 255, 0.4);
+            color: #e1e1e1;
+            min-width: 220px;
+            display: none;
+            backdrop-filter: blur(5px);
+            margin-top: 10px;
+        `;
+
+        panelContent.innerHTML = `
+            <div style="
+                margin-bottom: 15px; 
+                font-weight: bold; 
+                color: #5EEAD4; 
+                font-size: 16px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            ">
+                <span>HTML2PDF 工具</span>
+                <div style="
+                    width: 40px;
+                    height: 4px;
+                    background: linear-gradient(90deg, #5EEAD4, #3A86FF);
+                    border-radius: 2px;
+                    box-shadow: 0 0 8px rgba(94, 234, 212, 0.6);
+                "></div>
+            </div>
+            <button id="select-element-btn" style="
+                width: 100%;
+                padding: 8px 12px;
+                margin-bottom: 10px;
+                background: linear-gradient(90deg, #3A86FF, #5E60CE);
+                color: white;
+                border: none;
+                border-radius: 6px;
+                cursor: pointer;
+                font-size: 14px;
+                box-shadow: 0 2px 10px rgba(58, 134, 255, 0.4);
+                transition: all 0.2s ease;
+            ">选择元素</button>
+            <button id="generate-pdf-btn" style="
+                width: 100%;
+                padding: 8px 12px;
+                margin-bottom: 10px;
+                background: linear-gradient(90deg, #5EEAD4, #38BDF8);
+                color: white;
+                border: none;
+                border-radius: 6px;
+                cursor: pointer;
+                font-size: 14px;
+                box-shadow: 0 2px 10px rgba(94, 234, 212, 0.4);
+                opacity: 0.5;
+                transition: all 0.2s ease;
+                margin-left:0;
+                text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+            " disabled>生成PDF</button>
+            <button id="close-panel-btn" style="
+                width: 100%;
+                padding: 6px 12px;
+                background: linear-gradient(90deg, #F72585, #7209B7);
+                color: white;
+                border: none;
+                border-radius: 6px;
+                cursor: pointer;
+                font-size: 12px;
+                box-shadow: 0 2px 10px rgba(247, 37, 133, 0.4);
+                transition: all 0.2s ease;
+                margin-left: 0;
+                text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+            ">关闭</button>
+            <div id="selected-info" style="
+                margin-top: 10px;
+                padding: 10px;
+                background: rgba(14, 23, 38, 0.6);
+                border-radius: 6px;
+                font-size: 12px;
+                color: #e1e1e1;
+                display: none;
+                border-left: 3px solid #5EEAD4;
+                box-shadow: 0 2px 8px rgba(0,0,0,0.2) inset;
+            "></div>
+        `;
+
+        // 创建触发按钮（默认显示）
+        const triggerButton = document.createElement('div');
+        triggerButton.id = 'html2pdf-trigger-button';
+        triggerButton.style.cssText = `
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background: linear-gradient(145deg, #3A86FF, #5E60CE);
+            box-shadow: 0 4px 15px rgba(58, 134, 255, 0.5), 0 0 20px rgba(58, 134, 255, 0.3);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        `;
+
+        // 添加PDF图标
+        triggerButton.innerHTML = `
+            <div style="
+                color: white;
+                font-size: 20px;
+                font-weight: bold;
+                text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+            ">PDF</div>
+            <div style="
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                border-radius: 50%;
+                border: 2px solid rgba(94, 234, 212, 0.4);
+                animation: pulse 2s infinite;
+            "></div>
+        `;
+
+        // 添加脉冲动画样式
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes pulse {
+                0% {
+                    transform: scale(1);
+                    opacity: 0.8;
+                }
+                70% {
+                    transform: scale(1.1);
+                    opacity: 0;
+                }
+                100% {
+                    transform: scale(1);
+                    opacity: 0;
+                }
+            }
+            #select-element-btn:hover, #generate-pdf-btn:not([disabled]):hover, #close-panel-btn:hover {
+                transform: translateY(-2px);
+                box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+                filter: brightness(1.1);
+            }
+            #html2pdf-trigger-button:hover {
+                transform: scale(1.05);
+                box-shadow: 0 4px 20px rgba(58, 134, 255, 0.6), 0 0 30px rgba(58, 134, 255, 0.4);
+            }
+            .html2pdf-highlight {
+                outline: 3px solid #5EEAD4 !important;
+                outline-offset: 2px !important;
+                box-shadow: 0 0 15px rgba(94, 234, 212, 0.4) !important;
+            }
+        `;
+        document.head.appendChild(style);
+
+        // 将触发按钮和面板内容添加到主面板
+        panel.appendChild(triggerButton);
+        panel.appendChild(panelContent);
+        document.body.appendChild(panel);
+
+        // 添加触发按钮点击事件
+        triggerButton.addEventListener('click', () => {
+            const content = document.getElementById('html2pdf-panel-content');
+            if (content.style.display === 'none') {
+                content.style.display = 'block';
+                triggerButton.style.transform = 'scale(0.9)';
+            } else {
+                content.style.display = 'none';
+                triggerButton.style.transform = 'scale(1)';
+            }
+        });
+
+        return panel;
+    }
+
+    // 创建选择覆盖层
+    function createOverlay() {
+        const overlay = document.createElement('div');
+        overlay.id = 'html2pdf-overlay';
+        overlay.style.cssText = `
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 123, 186, 0.1);
+            z-index: 9999;
+            cursor: crosshair;
+            pointer-events: none;
+        `;
+        document.body.appendChild(overlay);
+        return overlay;
+    }
+
+    // 高亮元素
+    function highlightElement(element) {
+        // 移除之前的高亮
+        const prevHighlight = document.querySelector('.html2pdf-highlight');
+        if (prevHighlight) {
+            prevHighlight.classList.remove('html2pdf-highlight');
+        }
+
+        // 添加高亮样式
+        if (element && element !== document.body) {
+            element.classList.add('html2pdf-highlight');
+
+            // 添加高亮CSS
+            if (!document.querySelector('#html2pdf-highlight-style')) {
+                const style = document.createElement('style');
+                style.id = 'html2pdf-highlight-style';
+                // style.textContent = `
+                //     .html2pdf-highlight {
+                //         outline: 3px solid #007cba !important;
+                //         outline-offset: 2px !important;
+                //     }
+                // `;
+                document.head.appendChild(style);
+            }
+        }
+    }
+
+        // 高亮元素
+    function highlightElement(element) {
+        // 移除之前的高亮
+        const prevHighlight = document.querySelector('.html2pdf-highlight');
+        if (prevHighlight) {
+            prevHighlight.classList.remove('html2pdf-highlight');
+        }
+
+        // 添加高亮样式
+        if (element && element !== document.body) {
+            element.classList.add('html2pdf-highlight');
+
+            // 添加高亮CSS
+            if (!document.querySelector('#html2pdf-highlight-style')) {
+                const style = document.createElement('style');
+                style.id = 'html2pdf-highlight-style';
+                style.textContent = `
+                    .html2pdf-highlight {
+                        outline: 3px solid #007cba !important;
+                        outline-offset: 2px !important;
+
+                    }
+                `;
+                document.head.appendChild(style);
+            }
+        }
+    }
+
+    // 开始选择模式
+    function startSelection() {
+        isSelecting = true;
+        overlay = createOverlay();
+        document.body.style.cursor = 'crosshair';
+
+        // 更新按钮状态
+        const selectBtn = document.getElementById('select-element-btn');
+        selectBtn.textContent = '取消选择';
+        selectBtn.style.background = '#dc3545';
+
+        // 添加事件监听
+        document.addEventListener('mouseover', onMouseOver);
+        document.addEventListener('click', onElementClick);
+        document.addEventListener('keydown', onKeyDown);
+    }
+
+    // 停止选择模式
+    function stopSelection() {
+        isSelecting = false;
+        document.body.style.cursor = '';
+
+        if (overlay) {
+            overlay.remove();
+            overlay = null;
+        }
+
+        // 更新按钮状态
+        const selectBtn = document.getElementById('select-element-btn');
+        selectBtn.textContent = '选择元素';
+        selectBtn.style.background = 'linear-gradient(90deg, #4cc9f0, #4361ee)';
+
+        // 移除事件监听
+        document.removeEventListener('mouseover', onMouseOver);
+        document.removeEventListener('click', onElementClick);
+        document.removeEventListener('keydown', onKeyDown);
+    }
+
+    // 鼠标悬停事件
+    function onMouseOver(e) {
+        if (!isSelecting) return;
+        e.preventDefault();
+
+        const element = e.target;
+        if (element !== controlPanel && !controlPanel.contains(element)) {
+            highlightElement(element);
+        }
+    }
+
+    // 元素点击事件
+    function onElementClick(e) {
+        if (!isSelecting) return;
+        e.preventDefault();
+        e.stopPropagation();
+
+        const element = e.target;
+        if (element !== controlPanel && !controlPanel.contains(element)) {
+            selectedElement = element;
+            stopSelection();
+            updateSelectedInfo(element);
+            enablePdfGeneration();
+        }
+    }
+
+    // 键盘事件（ESC取消选择）
+    function onKeyDown(e) {
+        if (e.key === 'Escape' && isSelecting) {
+            stopSelection();
+        }
+    }
+
+    // 更新选中元素信息
+    function updateSelectedInfo(element) {
+        const info = document.getElementById('selected-info');
+        const tagName = element.tagName.toLowerCase();
+        const className = element.className ? `.${element.className.split(' ').join('.')}` : '';
+        const id = element.id ? `#${element.id}` : '';
+
+        // info.innerHTML = `
+        //     <strong>已选择元素:</strong><br>
+        //     标签: ${tagName}${id}${className}<br>
+        //     尺寸: ${element.offsetWidth} × ${element.offsetHeight}px
+        //     ${element.parentElement && element.parentElement !== document.body ? 
+        //         `<button id="select-parent-btn" style="
+        //             margin-top: 8px;
+        //             padding: 4px 8px;
+        //             background: linear-gradient(90deg, #5E60CE, #7209B7);
+        //             color: white;
+        //             border: none;
+        //             border-radius: 4px;
+        //             cursor: pointer;
+        //             font-size: 12px;
+        //             box-shadow: 0 2px 6px rgba(94, 96, 206, 0.4);
+        //             transition: all 0.2s ease;
+        //             display: block;
+        //             width: 100%;
+        //         ">选择父元素</button>` : 
+        //         ''
+        //     }
+        // `;
+        info.style.display = 'block';
+
+        // 如果有父元素且不是body，添加选择父元素按钮事件
+        // if (element.parentElement && element.parentElement !== document.body) {
+        //     document.getElementById('select-parent-btn').addEventListener('click', () => {
+        //         selectParentElement(element);
+        //     });
+        // }
+    }
+
+    // 选择父元素
+    // function selectParentElement(element) {
+    //     if (element && element.parentElement && element.parentElement !== document.body) {
+    //         // 更新选中元素为父元素
+    //         selectedElement = element.parentElement;
+
+    //         // 高亮显示父元素
+    //         highlightElement(selectedElement);
+
+    //         // 更新选中信息
+    //         updateSelectedInfo(selectedElement);
+    //     }
+    // }
+
+    // 启用PDF生成按钮
+    function enablePdfGeneration() {
+        const pdfBtn = document.getElementById('generate-pdf-btn');
+        pdfBtn.disabled = false;
+        pdfBtn.style.opacity = '1';
+    }
+
+    // 生成PDF
+    async function generatePDF() {
+        if (!selectedElement) {
+            alert('请先选择要转换的元素');
+            return;
+        }
+
+        try {
+            // 显示加载状态
+            const pdfBtn = document.getElementById('generate-pdf-btn');
+            const originalText = pdfBtn.textContent;
+            pdfBtn.textContent = '生成中...';
+            pdfBtn.disabled = true;
+
+            // 使用html2canvas截图
+            html2pdf(selectedElement, {
+                useCORS: true,
+                scale: 1,
+                fontConfig: {
+                    fontFamily: 'SourceHanSansCN-Medium',
+                    fontBase64: window.fontBase64, //
+                    fontUrl: '',
+                    fontWeight: 400,
+                    fontStyle: 'normal'
+                },
+            }).then(function (canvas) {
+                const link = document.createElement('a');
+                link.download = 'output.png';
+                link.href = canvas.toDataURL('image/png');
+                link.click();
+                // 恢复按钮状态
+                pdfBtn.textContent = originalText;
+                pdfBtn.disabled = false;
+
+                alert('PDF生成成功！');
+            }).catch(function (err) {
+                console.log('creacterr', err);
+
+            });;
+
+
+
+
+
+        } catch (error) {
+            console.error('PDF生成失败:', error);
+            alert('PDF生成失败，请检查控制台错误信息');
+
+            // 恢复按钮状态
+            const pdfBtn = document.getElementById('generate-pdf-btn');
+            pdfBtn.textContent = '生成PDF';
+            pdfBtn.disabled = false;
+        }
+    }
+
+
+    // 关闭面板
+    function closePanel() {
+        if (isSelecting) {
+            stopSelection();
+        }
+
+        // 移除高亮
+        const highlight = document.querySelector('.html2pdf-highlight');
+        if (highlight) {
+            highlight.classList.remove('html2pdf-highlight');
+        }
+
+        // 移除样式
+        const style = document.querySelector('#html2pdf-highlight-style');
+        if (style) {
+            style.remove();
+        }
+
+        // 移除面板
+        if (controlPanel) {
+            controlPanel.remove();
+            controlPanel = null;
+        }
+
+        selectedElement = null;
+    }
+
+    // 初始化
+    function init() {
+        // 等待页面加载完成
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', init);
+            return;
+        }
+
+        // 创建控制面板
+        controlPanel = createControlPanel();
+
+        // 绑定事件
+        document.getElementById('select-element-btn').addEventListener('click', () => {
+            if (isSelecting) {
+                stopSelection();
+            } else {
+                startSelection();
+            }
+        });
+
+        document.getElementById('generate-pdf-btn').addEventListener('click', generatePDF);
+        document.getElementById('close-panel-btn').addEventListener('click', closePanel);
+
+        // 让面板可拖拽
+        let isDragging = false;
+        let dragOffset = {
+            x: 0,
+            y: 0
+        };
+
+        controlPanel.addEventListener('mousedown', (e) => {
+            if (e.target.tagName !== 'BUTTON') {
+                isDragging = true;
+                dragOffset.x = e.clientX - controlPanel.offsetLeft;
+                dragOffset.y = e.clientY - controlPanel.offsetTop;
+                controlPanel.style.cursor = 'move';
+            }
+        });
+
+        document.addEventListener('mousemove', (e) => {
+            if (isDragging) {
+                controlPanel.style.left = (e.clientX - dragOffset.x) + 'px';
+                controlPanel.style.top = (e.clientY - dragOffset.y) + 'px';
+                controlPanel.style.right = 'auto';
+            }
+        });
+
+        document.addEventListener('mouseup', () => {
+            isDragging = false;
+            controlPanel.style.cursor = '';
+        });
+
+        console.log('HTML2PDF 用户脚本已加载');
+    }
+
+    // 启动脚本
+    init();
+
+})();
+
+
+
+// (function () {
+//     'use strict';
+
+//     // 全局变量
+//     let isSelecting = false;
+//     let selectedElement = null;
+//     let overlay = null;
+//     let controlPanel = null;
+
+//     // 创建控制面板
+//     function createControlPanel() {
+//         const panel = document.createElement('div');
+//         panel.id = 'dompdf-control-panel';
+//         panel.style.cssText = `
+//             position: fixed;
+//             top: 20px;
+//             right: 20px;
+//             z-index: 10000;
+//             background: #fff;
+//             border: 2px solid #007cba;
+//             border-radius: 8px;
+//             padding: 15px;
+//             box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+//             font-family: Arial, sans-serif;
+//             min-width: 200px;
+//         `;
+
+//         panel.innerHTML = `
+//             <div style="margin-bottom: 10px; font-weight: bold; color: #333;">dompdf 工具</div>
+//             <button id="select-element-btn" style="
+//                 width: 100%;
+//                 padding: 8px 12px;
+//                 margin-bottom: 8px;
+//                 background: #007cba;
+//                 color: white;
+//                 border: none;
+//                 border-radius: 4px;
+//                 cursor: pointer;
+//                 font-size: 14px;
+//             ">选择元素</button>
+//             <button id="generate-pdf-btn" style="
+//                 width: 100%;
+//                 padding: 8px 12px;
+//                 margin-bottom: 8px;
+//                 background: #28a745;
+//                 color: white;
+//                 border: none;
+//                 border-radius: 4px;
+//                 cursor: pointer;
+//                 font-size: 14px;
+//                 opacity: 0.5;
+//                 margin-left:0
+//             " disabled>生成PDF</button>
+//             <button id="close-panel-btn" style="
+//                 width: 100%;
+//                 padding: 6px 12px;
+//                 background: #dc3545;
+//                 color: white;
+//                 border: none;
+//                 border-radius: 4px;
+//                 cursor: pointer;
+//                 font-size: 12px;
+//                 margin - left: 0
+//             ">关闭</button>
+//             <div id="selected-info" style="
+//                 margin-top: 10px;
+//                 padding: 8px;
+//                 background: #f8f9fa;
+//                 border-radius: 4px;
+//                 font-size: 12px;
+//                 color: #666;
+//                 display: none;
+//             "></div>
+//         `;
+
+//         document.body.appendChild(panel);
+//         return panel;
+//     }
+
+//     // 创建选择覆盖层
+//     function createOverlay() {
+//         const overlay = document.createElement('div');
+//         overlay.id = 'dompdf-overlay';
+//         overlay.style.cssText = `
+//             position: fixed;
+//             top: 0;
+//             left: 0;
+//             width: 100%;
+//             height: 100%;
+//             background: rgba(0, 123, 186, 0.1);
+//             z-index: 9999;
+//             cursor: crosshair;
+//             pointer-events: none;
+//         `;
+//         document.body.appendChild(overlay);
+//         return overlay;
+//     }
+
+//     // 高亮元素
+//     function highlightElement(element) {
+//         // 移除之前的高亮
+//         const prevHighlight = document.querySelector('.dompdf-highlight');
+//         if (prevHighlight) {
+//             prevHighlight.classList.remove('dompdf-highlight');
+//         }
+
+//         // 添加高亮样式
+//         if (element && element !== document.body) {
+//             element.classList.add('dompdf-highlight');
+
+//             // 添加高亮CSS
+//             if (!document.querySelector('#dompdf-highlight-style')) {
+//                 const style = document.createElement('style');
+//                 style.id = 'dompdf-highlight-style';
+//                 style.textContent = `
+//                     .dompdf-highlight {
+//                         outline: 3px solid #007cba !important;
+//                         outline-offset: 2px !important;
+
+//                     }
+//                 `;
+//                 document.head.appendChild(style);
+//             }
+//         }
+//     }
+
+//     // 开始选择模式
+//     function startSelection() {
+//         isSelecting = true;
+//         overlay = createOverlay();
+//         document.body.style.cursor = 'crosshair';
+
+//         // 更新按钮状态
+//         const selectBtn = document.getElementById('select-element-btn');
+//         selectBtn.textContent = '取消选择';
+//         selectBtn.style.background = '#dc3545';
+
+//         // 添加事件监听
+//         document.addEventListener('mouseover', onMouseOver);
+//         document.addEventListener('click', onElementClick);
+//         document.addEventListener('keydown', onKeyDown);
+//     }
+
+//     // 停止选择模式
+//     function stopSelection() {
+//         isSelecting = false;
+//         document.body.style.cursor = '';
+
+//         if (overlay) {
+//             overlay.remove();
+//             overlay = null;
+//         }
+
+//         // 更新按钮状态
+//         const selectBtn = document.getElementById('select-element-btn');
+//         selectBtn.textContent = '选择元素';
+//         selectBtn.style.background = '#007cba';
+
+//         // 移除事件监听
+//         document.removeEventListener('mouseover', onMouseOver);
+//         document.removeEventListener('click', onElementClick);
+//         document.removeEventListener('keydown', onKeyDown);
+//     }
+
+//     // 鼠标悬停事件
+//     function onMouseOver(e) {
+//         if (!isSelecting) return;
+//         e.preventDefault();
+
+//         const element = e.target;
+//         if (element !== controlPanel && !controlPanel.contains(element)) {
+//             highlightElement(element);
+//         }
+//     }
+
+//     // 元素点击事件
+//     function onElementClick(e) {
+//         if (!isSelecting) return;
+//         e.preventDefault();
+//         e.stopPropagation();
+
+//         const element = e.target;
+//         if (element !== controlPanel && !controlPanel.contains(element)) {
+//             selectedElement = element;
+//             stopSelection();
+//             updateSelectedInfo(element);
+//             enablePdfGeneration();
+//         }
+//     }
+
+//     // 键盘事件（ESC取消选择）
+//     function onKeyDown(e) {
+//         if (e.key === 'Escape' && isSelecting) {
+//             stopSelection();
+//         }
+//     }
+
+//     // 更新选中元素信息
+//     function updateSelectedInfo(element) {
+//         const info = document.getElementById('selected-info');
+//         const tagName = element.tagName.toLowerCase();
+//         const className = element.className ? `.${element.className.split(' ').join('.')}` : '';
+//         const id = element.id ? `#${element.id}` : '';
+
+//         info.innerHTML = `
+//             <strong>已选择元素:</strong><br>
+//             标签: ${tagName}${id}${className}<br>
+//             尺寸: ${element.offsetWidth} × ${element.offsetHeight}px
+//         `;
+//         info.style.display = 'block';
+//     }
+
+//     // 启用PDF生成按钮
+//     function enablePdfGeneration() {
+//         const pdfBtn = document.getElementById('generate-pdf-btn');
+//         pdfBtn.disabled = false;
+//         pdfBtn.style.opacity = '1';
+//     }
+
+//     // 生成PDF
+//     async function generatePDF() {
+//         if (!selectedElement) {
+//             alert('请先选择要转换的元素');
+//             return;
+//         }
+
+//         try {
+//             // 显示加载状态
+//             const pdfBtn = document.getElementById('generate-pdf-btn');
+//             const originalText = pdfBtn.textContent;
+//             pdfBtn.textContent = '生成中...';
+//             pdfBtn.disabled = true;
+
+//             // 使用html2canvas截图
+//             dompdf(selectedElement, {
+//                 useCORS: true,
+//                 scale: 1,
+//                 fontConfig: {
+//                     fontFamily: 'SourceHanSansCN-Medium',
+//                     fontBase64: window.fontBase64, //
+//                     fontUrl: '',
+//                     fontWeight: 400,
+//                     fontStyle: 'normal'
+//                 },
+//             }).then(function (blob) {
+//                 const url = URL.createObjectURL(blob);
+//                 const a = document.createElement('a');
+//                 a.href = url;
+//                 a.download = "example.pdf";
+//                 document.body.appendChild(a);
+//                 a.click();
+
+//                 // 清理
+//                 setTimeout(() => {
+//                     document.body.removeChild(a);
+//                     URL.revokeObjectURL(url);
+//                 }, 100);
+//                 // 恢复按钮状态
+//                 pdfBtn.textContent = originalText;
+//                 pdfBtn.disabled = false;
+
+//                 alert('PDF生成成功！');
+//             }).catch(function (err) {
+//                 console.log('creacterr', err);
+
+//             });;
+
+
+
+
+
+//         } catch (error) {
+//             console.error('PDF生成失败:', error);
+//             alert('PDF生成失败，请检查控制台错误信息');
+
+//             // 恢复按钮状态
+//             const pdfBtn = document.getElementById('generate-pdf-btn');
+//             pdfBtn.textContent = '生成PDF';
+//             pdfBtn.disabled = false;
+//         }
+//     }
+
+//     // 关闭面板
+//     function closePanel() {
+//         if (isSelecting) {
+//             stopSelection();
+//         }
+
+//         // 移除高亮
+//         const highlight = document.querySelector('.dompdf-highlight');
+//         if (highlight) {
+//             highlight.classList.remove('dompdf-highlight');
+//         }
+
+//         // 移除样式
+//         const style = document.querySelector('#dompdf-highlight-style');
+//         if (style) {
+//             style.remove();
+//         }
+
+//         // 移除面板
+//         if (controlPanel) {
+//             controlPanel.remove();
+//             controlPanel = null;
+//         }
+
+//         selectedElement = null;
+//     }
+
+//     // 初始化
+//     function init() {
+//         // 等待页面加载完成
+//         if (document.readyState === 'loading') {
+//             document.addEventListener('DOMContentLoaded', init);
+//             return;
+//         }
+
+//         // 创建控制面板
+//         controlPanel = createControlPanel();
+
+//         // 绑定事件
+//         document.getElementById('select-element-btn').addEventListener('click', () => {
+//             if (isSelecting) {
+//                 stopSelection();
+//             } else {
+//                 startSelection();
+//             }
+//         });
+
+//         document.getElementById('generate-pdf-btn').addEventListener('click', generatePDF);
+//         document.getElementById('close-panel-btn').addEventListener('click', closePanel);
+
+//         // 让面板可拖拽
+//         let isDragging = false;
+//         let dragOffset = {
+//             x: 0,
+//             y: 0
+//         };
+
+//         controlPanel.addEventListener('mousedown', (e) => {
+//             if (e.target.tagName !== 'BUTTON') {
+//                 isDragging = true;
+//                 dragOffset.x = e.clientX - controlPanel.offsetLeft;
+//                 dragOffset.y = e.clientY - controlPanel.offsetTop;
+//                 controlPanel.style.cursor = 'move';
+//             }
+//         });
+
+//         document.addEventListener('mousemove', (e) => {
+//             if (isDragging) {
+//                 controlPanel.style.left = (e.clientX - dragOffset.x) + 'px';
+//                 controlPanel.style.top = (e.clientY - dragOffset.y) + 'px';
+//                 controlPanel.style.right = 'auto';
+//             }
+//         });
+
+//         document.addEventListener('mouseup', () => {
+//             isDragging = false;
+//             controlPanel.style.cursor = '';
+//         });
+
+//         console.log('dompdf 用户脚本已加载');
+//     }
+
+//     // 启动脚本
+//     init();
+
+// })();