Word 預覽:修正手機只能看第一頁、載入中遮罩無法關閉

- 預覽面板新增「開新分頁」按鈕,手機可完整瀏覽所有頁面
- 修正 [hidden] 被 CSS display:flex 覆蓋導致載入中遮罩卡住的問題
- 改用 generation counter 取代 AbortController signal 判斷載入狀態

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-15 23:11:41 +08:00
parent 89a4f891c2
commit ef70576f4b
3 changed files with 24 additions and 2 deletions

View File

@@ -8,6 +8,7 @@ const resultTitle = document.querySelector('#resultTitle');
const connectionStatus = document.querySelector('#connectionStatus'); const connectionStatus = document.querySelector('#connectionStatus');
const previewFrame = document.querySelector('#previewFrame'); const previewFrame = document.querySelector('#previewFrame');
const previewLoading = document.querySelector('#previewLoading'); const previewLoading = document.querySelector('#previewLoading');
const previewOpenBtn = document.querySelector('#previewOpenBtn');
let currentPdfBlob = null; let currentPdfBlob = null;
let currentPdfFileName = '租屋契約.pdf'; let currentPdfFileName = '租屋契約.pdf';
@@ -168,6 +169,8 @@ async function loadPreview() {
if (previewBlobUrl) URL.revokeObjectURL(previewBlobUrl); if (previewBlobUrl) URL.revokeObjectURL(previewBlobUrl);
previewBlobUrl = URL.createObjectURL(blob); previewBlobUrl = URL.createObjectURL(blob);
previewFrame.src = `${previewBlobUrl}#toolbar=0`; previewFrame.src = `${previewBlobUrl}#toolbar=0`;
previewOpenBtn.href = previewBlobUrl;
previewOpenBtn.hidden = false;
} catch { } catch {
// AbortError 或其他錯誤都忽略,交給 finally 處理 // AbortError 或其他錯誤都忽略,交給 finally 處理
} finally { } finally {

View File

@@ -81,7 +81,10 @@
<div class="right-col"> <div class="right-col">
<div class="preview-panel"> <div class="preview-panel">
<p class="eyebrow">Word 預覽</p> <div class="preview-header">
<p class="eyebrow">Word 預覽</p>
<a id="previewOpenBtn" class="secondary-button preview-open-btn" target="_blank" hidden>開新分頁</a>
</div>
<div class="preview-wrap"> <div class="preview-wrap">
<iframe id="previewFrame" src="about:blank" title="Word 範本預覽"></iframe> <iframe id="previewFrame" src="about:blank" title="Word 範本預覽"></iframe>
<div id="previewLoading" class="preview-loading" hidden> <div id="previewLoading" class="preview-loading" hidden>

View File

@@ -218,10 +218,26 @@ h2 {
min-height: 400px; min-height: 400px;
} }
.preview-panel .eyebrow { .preview-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.preview-header .eyebrow {
margin: 0; margin: 0;
} }
.preview-open-btn {
min-height: 32px;
padding: 0 12px;
font-size: 0.85rem;
text-decoration: none;
display: inline-flex;
align-items: center;
}
.preview-wrap { .preview-wrap {
flex: 1; flex: 1;
position: relative; position: relative;