Strona główna Odkrywaj Pomoc
Zarejestruj się Zaloguj się
amazon
/
copywriting_production
2
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

新增单文件 html 加载 mhtml

mrh 1 rok temu
rodzic
245e138d9e
commit
3efae8aa35
2 zmienionych plików z 113 dodań i 0 usunięć
Zunifikowany widok Pokaż statystyki zmian
  1. 101 0
      docs/data_visualization/mhtml2html.html
  2. 12 0
      docs/data_visualization/show-mhtml.md

+ 101 - 0
docs/data_visualization/mhtml2html.html
Wyświetl plik 

@@ -0,0 +1,101 @@
 
+<!DOCTYPE html>
 
+<html>
 
+<head>
 
+    <meta charset="UTF-8"> 
+    <title>MHTML Renderer</title>
 
+    <script src="https://unpkg.com/mhtml2html@3.0.0/dist/mhtml2html.js"></script>
 
+    <style>
 
+        /* 保持原有样式不变 */
 
+        #loading { 
+            position: fixed; 
+            top: 50%; 
+            left: 50%; 
+            transform: translate(-50%, -50%);
 
+        }
 
+        iframe { 
+            width: 100%; 
+            height: 100vh; 
+            border: none;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="loading">加载中...</div>
 
+    <div id="content"></div>
 
+
 
+    <script>
 
+        document.addEventListener('DOMContentLoaded', () => {
 
+            const loader = document.getElementById('loading');
 
+            const contentDiv = document.getElementById('content');
 
+
 
+            // 新增：解析URL参数
 
+            function getUrlParameter(name) {
 
+                const params = new URLSearchParams(window.location.search);
 
+                return params.get(name);
 
+            }
 
+
 
+            async function renderMHTML(url) {
 
+                // 保持原有渲染逻辑不变
 
+                try {
 
+                    const res = await fetch(url);
 
+                    if (!res.ok) throw new Error(`HTTP ${res.status}`);
 
+                    const mhtml = await res.text();
 
+
 
+                    const windowProxy = mhtml2html.convert(mhtml, {
 
+                        convertIframes: true,
 
+                        parseDOM: html => {
 
+                            const frame = document.createElement('iframe');
 
+                            frame.style.display = 'none';
 
+                            document.body.appendChild(frame);
 
+                            frame.contentDocument.write(html);
 
+                            return frame.contentWindow;
 
+                        }
 
+                    });
 
+
 
+                    if (!windowProxy?.document?.documentElement) {
 
+                        throw new Error('文档结构解析失败');
 
+                    }
 
+
 
+                    const renderFrame = document.createElement('iframe');
 
+                    renderFrame.sandbox = 'allow-same-origin allow-scripts';
 
+                    Object.assign(renderFrame.style, {
 
+                        width: '100%',
 
+                        height: '100vh'
 
+                    });
 
+
 
+                    contentDiv.innerHTML = '';
 
+                    contentDiv.appendChild(renderFrame);
 
+                    loader.style.display = 'none';
 
+                    
+                    renderFrame.contentDocument.replaceChild(
 
+                        windowProxy.document.documentElement,
 
+                        renderFrame.contentDocument.documentElement
 
+                    );
 
+
 
+                } catch (error) {
 
+                    loader.innerHTML = `
 
+                        <div style="color: red; padding: 20px; text-align: center">
 
+                            <h3>渲染失败</h3>
 
+                            <p>${error.message}</p>
 
+                            <button onclick="location.reload()">点击重试</button>
 
+                        </div>`;
 
+                    console.error('[RENDER ERROR]', error);
 
+                }
 
+            }
 
+
 
+            // 修改：从URL参数获取mhtml地址
 
+            const mhtmlUrl = getUrlParameter('url');
 
+            if (mhtmlUrl) {
 
+                renderMHTML(mhtmlUrl);
 
+            } else {
 
+                loader.innerHTML = `
 
+                    <div style="padding: 20px; text-align: center">
 
+                        <h3>缺少URL参数</h3>
 
+                        <p>请使用 ?url= 参数指定MHTML文件地址</p>
 
+                        <p>示例：${window.location.href}?url=http://s3.vs1.lan/public/amazone/copywriting_production/output/B0B658JC22/B0B658JC22.mhtml</p>
 
+                    </div>`;
 
+            }
 
+        });
 
+    </script>
 
+</body>
 
+</html>

+ 12 - 0
docs/data_visualization/show-mhtml.md
Wyświetl plik 

@@ -0,0 +1,12 @@
 
+参考： https://github.com/msindwan/mhtml2html?tab=readme-ov-file#usage
 
+
 
+将 [mhtml2html.html](./mhtml2html.html) 上传到 s3 固定存储路径：
 
+https://minio.magong.site/browser/public/amazone%2Fcopywriting_production%2Fmhtml2html.html
 
+
 
+然后可以通过 s3 链接访问： http://s3.vs1.lan/public/amazone/copywriting_production/mhtml2html.html
 
+
 
+此时网页提示没有参数，因此无法加载。然后添加参数：
 
+
 
+http://s3.vs1.lan/public/amazone/copywriting_production/mhtml2html.html?url=http://s3.vs1.lan/public/amazone/copywriting_production/output/B0B658JC22/B0B658JC22.mhtml
 
+
 
+网页就能正常加载 mhtml 页面了。