Hugging Face's logo

Spaces:
quejing
/
yexingyangPDF
Running

App Files Community
yexingyangPDF
File size: 6,140 Bytes
4cbd2e8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF 预览</title>
<style>

*{margin:0;padding:0;box-sizing:border-box}

html,body{height:100%;overflow:hidden}

body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',sans-serif;background:#0f172a;color:#e2e8f0;display:flex;flex-direction:column}



.topbar{

    background:#1e293b;padding:0.5rem 1rem;

    display:flex;align-items:center;gap:0.6rem;border-bottom:1px solid #334155;

    flex-shrink:0;flex-wrap:wrap;min-height:48px;

}

.topbar .back-btn{

    color:#94a3b8;text-decoration:none;font-size:0.82rem;display:flex;align-items:center;gap:0.25rem;

    transition:color 0.15s;white-space:nowrap;

}

.topbar .back-btn:hover{color:white}

.topbar .sep{color:#475569;font-size:0.75rem}

.topbar .fname{

    font-size:0.85rem;color:#cbd5e1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:100px;

}

.topbar a.dl-btn{

    color:#fbbf24;text-decoration:none;font-size:0.78rem;font-weight:600;

    padding:0.3rem 0.7rem;border-radius:6px;border:1px solid rgba(251,191,36,0.35);transition:all 0.15s;white-space:nowrap;

}

.topbar a.dl-btn:hover{background:rgba(251,191,36,0.1)}



/* embed 全屏铺满 */

.embed-wrap{flex:1;position:relative;background:#1a1f2e}

.embed-wrap embed,.embed-wrap iframe{

    position:absolute;inset:0;width:100%;height:100%;border:none;

}



.loading-msg{

    display:flex;flex-direction:column;align-items:center;justify-content:center;

    text-align:center;color:#94a3b8;gap:0.75rem;height:100%;

}

.loading-msg .spinner{width:36px;height:36px;border:3px solid #334155;border-top-color:#6366f1;border-radius:50%;animation:spin 0.7s linear infinite}

@keyframes spin{to{transform:rotate(360deg)}}



.error-msg{

    display:flex;flex-direction:column;align-items:center;justify-content:center;

    text-align:center;color:#94a3b8;padding:2rem;gap:1rem;height:100%;

}

.error-msg .icon{font-size:3rem}

.error-msg p{max-width:420px;line-height:1.6;font-size:0.9rem}

.error-msg a{

    display:inline-block;padding:0.55rem 1.5rem;

    background:linear-gradient(135deg,#f59e0b,#d97706);color:white;text-decoration:none;

    border-radius:10px;font-weight:600;font-size:0.9rem;transition:all 0.15s;

}

.error-msg a:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(245,158,11,0.3)}

.error-msg .gdoc-link{

    background:linear-gradient(135deg,#6366f1,#4f46e5);

    font-size:0.82rem;padding:0.4rem 1rem;

}

.error-msg .gdoc-link:hover{box-shadow:0 4px 16px rgba(99,102,241,0.3)}

</style>
</head>
<body>
<div class="topbar">
    <a class="back-btn" href="javascript:history.back()">&larr; 返回列表</a>
    <span class="sep">|</span>
    <span class="fname" id="fileName">加载中...</span>
    <a class="dl-btn" id="downloadBtn" href="" target="_blank" rel="noopener">&#11015; 下载</a>
</div>
<div class="embed-wrap" id="embedWrap">
    <div class="loading-msg"><div class="spinner"></div><span>正在加载 PDF...</span></div>
</div>

<script>

const params = new URLSearchParams(window.location.search);

const url = params.get('url') || '';

const name = params.get('name') || '预览';



document.title = name + ' - 预览';

document.getElementById('fileName').textContent = name;

document.getElementById('downloadBtn').href = url;



if (!url) {

    document.getElementById('embedWrap').innerHTML = `

        <div class="error-msg">

            <span class="icon">&#9888;</span>

            <h2 style="color:#e2e8f0;font-weight:600;font-size:1.1rem;">无效的文件地址</h2>

            <p>请返回列表重新选择文件</p>

        </div>`;

} else {

    // 方案1: 直接用 <embed> 加载 PDF，和浏览器直接打开一样

    const embed = document.createElement('embed');

    embed.src = url;

    embed.type = 'application/pdf';

    embed.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;border:none;';



    // 超时回退（PDF 很大时 embed 可能加载慢）

    const timeout = setTimeout(() => {

        const wrap = document.getElementById('embedWrap');

        if (wrap.children.length === 1 && wrap.children[0] === embed) {

            // embed 还在加载中，显示回退按钮

            const gdocUrl = 'https://docs.google.com/viewer?url=' + encodeURIComponent(url) + '&embedded=true';

            wrap.innerHTML = `

                <div class="error-msg">

                    <span class="icon">&#9203;</span>

                    <h2 style="color:#e2e8f0;font-weight:600;font-size:1.1rem;">加载时间较长</h2>

                    <p>PDF 文件较大，加载可能需要一些时间。如果长时间没有显示，请尝试以下方式：</p>

                    <a href="${url}" target="_blank" rel="noopener">&#11015; 直接下载 PDF</a>

                    <a class="gdoc-link" href="${gdocUrl}" target="_blank" rel="noopener">&#127760; Google 预览</a>

                </div>`;

        }

    }, 15000);



    embed.addEventListener('load', () => {

        clearTimeout(timeout);

    });



    embed.addEventListener('error', () => {

        clearTimeout(timeout);

        const gdocUrl = 'https://docs.google.com/viewer?url=' + encodeURIComponent(url) + '&embedded=true';

        document.getElementById('embedWrap').innerHTML = `

            <div class="error-msg">

                <span class="icon">&#128196;</span>

                <h2 style="color:#e2e8f0;font-weight:600;font-size:1.1rem;">PDF 加载失败</h2>

                <p>可能由于浏览器限制或网络问题无法直接预览，请尝试以下方式：</p>

                <a href="${url}" target="_blank" rel="noopener">&#11015; 直接下载 PDF</a>

                <a class="gdoc-link" href="${gdocUrl}" target="_blank" rel="noopener">&#127760; Google 预览</a>

            </div>`;

    });



    document.getElementById('embedWrap').innerHTML = '';

    document.getElementById('embedWrap').appendChild(embed);

}

</script>
</body>
</html>