Word 預覽:修正手機只能看第一頁、載入中遮罩無法關閉
- 預覽面板新增「開新分頁」按鈕,手機可完整瀏覽所有頁面 - 修正 [hidden] 被 CSS display:flex 覆蓋導致載入中遮罩卡住的問題 - 改用 generation counter 取代 AbortController signal 判斷載入狀態 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -8,6 +8,7 @@ const resultTitle = document.querySelector('#resultTitle');
|
||||
const connectionStatus = document.querySelector('#connectionStatus');
|
||||
const previewFrame = document.querySelector('#previewFrame');
|
||||
const previewLoading = document.querySelector('#previewLoading');
|
||||
const previewOpenBtn = document.querySelector('#previewOpenBtn');
|
||||
|
||||
let currentPdfBlob = null;
|
||||
let currentPdfFileName = '租屋契約.pdf';
|
||||
@@ -168,6 +169,8 @@ async function loadPreview() {
|
||||
if (previewBlobUrl) URL.revokeObjectURL(previewBlobUrl);
|
||||
previewBlobUrl = URL.createObjectURL(blob);
|
||||
previewFrame.src = `${previewBlobUrl}#toolbar=0`;
|
||||
previewOpenBtn.href = previewBlobUrl;
|
||||
previewOpenBtn.hidden = false;
|
||||
} catch {
|
||||
// AbortError 或其他錯誤都忽略,交給 finally 處理
|
||||
} finally {
|
||||
|
||||
@@ -81,7 +81,10 @@
|
||||
|
||||
<div class="right-col">
|
||||
<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">
|
||||
<iframe id="previewFrame" src="about:blank" title="Word 範本預覽"></iframe>
|
||||
<div id="previewLoading" class="preview-loading" hidden>
|
||||
|
||||
@@ -218,10 +218,26 @@ h2 {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.preview-panel .eyebrow {
|
||||
.preview-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.preview-header .eyebrow {
|
||||
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 {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
Reference in New Issue
Block a user