oldli/html2pptx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: v2.0 — 插件改造，集成 PPTX 导出

Browse Source 
改造内容：
- 改名 Web to Pixso → Web to PPT
- 删除 pixso-plugin/、element-picker.js、popup-panel.js
- 新增 convert-browser.js（浏览器版转化逻辑）
- 新增 lib-pptxgen.js（pptxgenjs 浏览器 bundle）
- 重写 popup.js（触发捕获→转化→下载）
- 重写 background.js（缓存采集数据，支持 WEB_TO_PPT_GET_DATA）
- manifest.json 改名 + 添加 default_popup

流程：popup 点击导出 → background 抓取 DOM → popup 运行转化 → chrome.downloads 下载 PPTX
This commit is contained in:
李进
2026-07-27 13:54:11 +08:00
parent 330f4e96ce
commit e1c8b3d94e
16 changed files with 858 additions and 3214 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-to-pixso/popup.html
+15 -54
View File
@@ -1,86 +1,47 @@
<!doctype html>
<html lang="zh-CN" style="background: transparent;">
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web to Pixso</title>
<title>Web to PPT</title>
<link rel="stylesheet" href="popup.css">
</head>
<body style="background: transparent;">
<body>
<main class="shell">
<div class="header">
<div class="logo-title">
<img src="logo/plugin-logo.png" alt="" class="logo">
<span class="title">Web to Pixso</span>
<span class="version-badge">v1.1.1</span>
<span class="title">Web to PPT</span>
<span class="version-badge">v2.0</span>
</div>
<button class="close-btn" id="closeBtn" type="button" aria-label="关闭">x</button>
</div>
<div class="content">
<div class="setting-row">
<span class="setting-label">采集模式</span>
<select class="setting-select mode-select" id="captureMode">
<option value="mixed" selected>混合高保真</option>
<option value="editable">可编辑优先</option>
</select>
</div>
<div class="setting-row">
<span class="setting-label">跨域图片代理模式</span>
<label class="toggle-switch" for="proxyToggle">
<input type="checkbox" id="proxyToggle">
<span class="toggle-slider"></span>
</label>
</div>
<div class="setting-row">
<span class="setting-label">页面采集宽度</span>
<label class="width-input-wrap" for="captureWidth">
<input class="width-input" id="captureWidth" type="text" inputmode="numeric" autocomplete="off" aria-label="页面采集宽度">
<span class="setting-label">采集宽度</span>
<label class="width-input-wrap">
<input class="width-input" id="captureWidth" type="text" inputmode="numeric" placeholder="自动">
<span class="width-unit">px</span>
</label>
</div>
<div class="setting-row">
<span class="setting-label">图片采集并发</span>
<select class="setting-select" id="concurrency">
<option value="4">4</option>
<option value="6">6</option>
<option value="8" selected>8</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="16">16</option>
<option value="20">20</option>
<option value="infinite">无限</option>
</select>
</div>
<p class="description">页面采集宽度默认使用当前窗口宽度，可输入 320-3840px 触发响应式布局后采集。</p>
<button class="capture-btn" id="captureBtn" type="button">
<span id="btnText">开始采集</span>
</button>
<button class="select-btn" id="selectBtn" type="button">
<span id="selectBtnText">打开页面浮窗</span>
<button class="capture-btn" id="exportBtn" type="button">
<span id="btnText">导出 PPTX</span>
</button>
<div class="status" id="status" hidden>
<div class="progress-bar" aria-hidden="true">
<div class="progress-fill" id="progressFill"></div>
</div>
<div class="progress-bar"><div class="progress-fill" id="progressFill"></div></div>
<span class="status-text" id="statusText">准备中...</span>
</div>
<a class="help-link" id="helpLink" href="https://z8qrcvi3n5.feishu.cn/wiki/RV8TwlhFyiGsEekQXk8cX5SHn6f" target="_blank" rel="noopener noreferrer">使用说明</a>
</div>
<div class="footer">
<span class="author">by 大非</span>
<a class="support-email" href="mailto:270310136@qq.com">270310136@qq.com 给我发邮件哦，我光速改</a>
<span class="author">html2pptx engine</span>
</div>
</main>
<script src="lib-pptxgen.js"></script>
<script src="lib-jszip.js"></script>
<script src="convert-browser.js"></script>
<script src="popup.js"></script>
</body>
</html>