128 lines
3.4 KiB
HTML
128 lines
3.4 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>PDF Highlight Viewer</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html, body {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
#pdf-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
#pdf-container iframe {
|
||
width: 100%;
|
||
height: 100%;
|
||
border: none;
|
||
}
|
||
|
||
.loading, .error {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
font-family: system-ui, -apple-system, sans-serif;
|
||
color: #666;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.error {
|
||
color: #c00;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="pdf-container">
|
||
<div class="loading">Loading PDF...</div>
|
||
</div>
|
||
|
||
<script>
|
||
(function () {
|
||
const HEADERS = {
|
||
"x-user-id": "user1",
|
||
"x-user-name": "42tr",
|
||
"x-role": "admin",
|
||
};
|
||
|
||
const container = document.getElementById("pdf-container");
|
||
|
||
const showError = (msg) => {
|
||
container.innerHTML = `<div class="error">${msg}</div>`;
|
||
};
|
||
|
||
const params = new URLSearchParams(window.location.search);
|
||
const fileId = params.get("file_id") || params.get("fileId");
|
||
const sliceId = params.get("slice_id") || params.get("sliceId");
|
||
|
||
if (!fileId) {
|
||
showError("Missing file_id parameter");
|
||
return;
|
||
}
|
||
|
||
if (!sliceId) {
|
||
showError("Missing slice_id parameter");
|
||
return;
|
||
}
|
||
|
||
async function resolveTargetPage() {
|
||
try {
|
||
const res = await fetch(
|
||
`/api/v1/knowledge/files/${fileId}/slices/${sliceId}/highlight-page`,
|
||
{ headers: HEADERS }
|
||
);
|
||
if (!res.ok) {
|
||
return null;
|
||
}
|
||
const data = await res.json();
|
||
if (typeof data.page_idx === "number") {
|
||
// 后端返回 0-based 页码，PDF 查看器 #page= 需要 1-based
|
||
return data.page_idx + 1;
|
||
}
|
||
} catch (err) {
|
||
console.error("Failed to resolve highlight page:", err);
|
||
}
|
||
return null;
|
||
}
|
||
|
||
const pdfUrl = `/api/v1/knowledge/files/${fileId}/highlighted-pdf?slice_id=${encodeURIComponent(sliceId)}`;
|
||
|
||
(async () => {
|
||
const targetPage = await resolveTargetPage();
|
||
|
||
// 使用 fetch 获取 PDF（带认证 header），然后创建 blob URL 显示
|
||
fetch(pdfUrl, { headers: HEADERS })
|
||
.then((res) => {
|
||
if (!res.ok) {
|
||
throw new Error(`Request failed: ${res.status}`);
|
||
}
|
||
return res.blob();
|
||
})
|
||
.then((blob) => {
|
||
const blobUrl = URL.createObjectURL(blob);
|
||
const iframe = document.createElement("iframe");
|
||
iframe.src = targetPage ? `${blobUrl}#page=${targetPage}` : blobUrl;
|
||
iframe.title = "PDF Viewer";
|
||
container.innerHTML = "";
|
||
container.appendChild(iframe);
|
||
})
|
||
.catch((err) => {
|
||
showError(err.message || "Failed to load PDF");
|
||
});
|
||
})();
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|