JOJO/agent-Specialization
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(chat): 自研 pdfjs-dist canvas 渲染器替换 vue-pdf-embed，实现 PDF 卡片内联滚动预览

Browse Source
This commit is contained in:
JOJO 2026-06-24 13:18:31 +08:00
parent bd9af317e4
commit bb2b98fc82
5 changed files with 153 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
package-lock.json generated
View File

@ -22,6 +22,7 @@
"html2canvas": "^1.4.1",
"katex": "^0.16.9",
"marked": "^11.1.0",
"pdfjs-dist": "^6.0.227",
"pinia": "^3.0.4",
"prismjs": "^1.29.0",
"rehype-raw": "^7.0.0",
@ -35,7 +36,6 @@
"socket.io-client": "^4.7.5",
"unified": "^11.0.5",
"vue": "^3.4.15",
"vue-pdf-embed": "^2.1.5",
"vue-stick-to-bottom": "^1.0.0",
"xterm": "^5.3.0"
},
@ -868,9 +868,9 @@
"license": "MIT"
},
"node_modules/@napi-rs/canvas": {
"version": "0.1.100",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-0.1.100.tgz",
"integrity": "sha512-xglYA6q3XO5P3BNJYxVZ1IV7DLVjp1Py6nwag88YntrS+3vKHyYcMqXVS4ZztJmwz2uGvz1FWhI/4LgbR5uQDA==",
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-1.0.0.tgz",
"integrity": "sha512-Jqxcy1XOIqj+lH9sl1GT+il6GR3uQv13vI2mrwubP3uT8Olak2ClDrK2RnxlQKjwv8BRr4b3ug0YR7c6hBX8wg==",
"license": "MIT",
"optional": true,
"workspaces": [
@ -884,23 +884,23 @@
"url": "https://github.com/sponsors/Brooooooklyn"
},
"optionalDependencies": {
"@napi-rs/canvas-android-arm64": "0.1.100",
"@napi-rs/canvas-darwin-arm64": "0.1.100",
"@napi-rs/canvas-darwin-x64": "0.1.100",
"@napi-rs/canvas-linux-arm-gnueabihf": "0.1.100",
"@napi-rs/canvas-linux-arm64-gnu": "0.1.100",
"@napi-rs/canvas-linux-arm64-musl": "0.1.100",
"@napi-rs/canvas-linux-riscv64-gnu": "0.1.100",
"@napi-rs/canvas-linux-x64-gnu": "0.1.100",
"@napi-rs/canvas-linux-x64-musl": "0.1.100",
"@napi-rs/canvas-win32-arm64-msvc": "0.1.100",
"@napi-rs/canvas-win32-x64-msvc": "0.1.100"
"@napi-rs/canvas-android-arm64": "1.0.0",
"@napi-rs/canvas-darwin-arm64": "1.0.0",
"@napi-rs/canvas-darwin-x64": "1.0.0",
"@napi-rs/canvas-linux-arm-gnueabihf": "1.0.0",
"@napi-rs/canvas-linux-arm64-gnu": "1.0.0",
"@napi-rs/canvas-linux-arm64-musl": "1.0.0",
"@napi-rs/canvas-linux-riscv64-gnu": "1.0.0",
"@napi-rs/canvas-linux-x64-gnu": "1.0.0",
"@napi-rs/canvas-linux-x64-musl": "1.0.0",
"@napi-rs/canvas-win32-arm64-msvc": "1.0.0",
"@napi-rs/canvas-win32-x64-msvc": "1.0.0"
}
},
"node_modules/@napi-rs/canvas-android-arm64": {
"version": "0.1.100",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-0.1.100.tgz",
"integrity": "sha512-hjhCKhntPv9+t4ckHymdx0phYNcVW+GKQR6Lzw2zE+pOVjOplSmtx9nNNknTjbEDLcuLZqA1y8ufKg1XfgftzQ==",
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-1.0.0.tgz",
"integrity": "sha512-3hNKJObUK7JsCF9aJlVCs1J0/KE/gGfZNeK8MO1ge6bB3aicr5walGme9t9No1f/oyk9GgvdAT/rjSdsx3gbIw==",
"cpu": [
"arm64"
],
@ -918,9 +918,9 @@
}
},
"node_modules/@napi-rs/canvas-darwin-arm64": {
"version": "0.1.100",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-0.1.100.tgz",
"integrity": "sha512-2PcswRaC7Ly645DGt88///zuFDhJxJYdKAs1uU3mfk1atYkXufgcgLfBpk6Tm12nCQBaNt1wpybuPZ4qOhTo8A==",
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-1.0.0.tgz",
"integrity": "sha512-ZIja19/BiGz2puhki+WUYSRriwFeFJ8Mi9eK3hZdSS85w4Y60cuEAJVhMCfKwswQkKkUtrnzdKMBuO7TupvexA==",
"cpu": [
"arm64"
],
@ -938,9 +938,9 @@
}
},
"node_modules/@napi-rs/canvas-darwin-x64": {
"version": "0.1.100",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-0.1.100.tgz",
"integrity": "sha512-ePNZtj7pNIva/siZMg+HmbeozkIjqUIYdoymH8HaA3qK7LfzFN4WMBM8G6HQ9ZC+H3+Dnn5pqtiXpgLykaPOhw==",
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-1.0.0.tgz",
"integrity": "sha512-hImggWc82jqZVpEsFR9S7PE9OQYjq/H/D7vwCGB6X1jRH+UVBP1+1niJTPBOat1B154T6GKK7/kcFtoWgjgFzQ==",
"cpu": [
"x64"
],
@ -958,9 +958,9 @@
}
},
"node_modules/@napi-rs/canvas-linux-arm-gnueabihf": {
"version": "0.1.100",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-0.1.100.tgz",
"integrity": "sha512-d5cDB48oWFGU8/XPhUOFAlySgb/VAu7D+s8fi55K1Pcfg8aPplHWqMgibhVLU8ky7Pyg/fuiVLz4Nf3JrSTuUA==",
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-1.0.0.tgz",
"integrity": "sha512-hlJRy6d+kWLKVOG/+1rEvNQVURZ0DxxRPJsLmEWwhwiXZUJc0BF5o9esALHSEP4CoJK4wChRtj3hnyBgVx2oWA==",
"cpu": [
"arm"
],
@ -978,9 +978,9 @@
}
},
"node_modules/@napi-rs/canvas-linux-arm64-gnu": {
"version": "0.1.100",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-0.1.100.tgz",
"integrity": "sha512-rDxgxRu69RvDlX/bh9o22DxLsGr8EqsNgotL9+RwQE1S0b0cqeatqsw6aW45mukm0B42DIAaAacKaYQ8cqS1nw==",
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-1.0.0.tgz",
"integrity": "sha512-5Hru4T3RXkosRQafcjelv7AUzw9mXqmGYsxnzeDDOWveFCJyEPMSJltvGCM+jfH98seOCbfwm9KyFg6Jm5FhAA==",
"cpu": [
"arm64"
],
@ -998,9 +998,9 @@
}
},
"node_modules/@napi-rs/canvas-linux-arm64-musl": {
"version": "0.1.100",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-0.1.100.tgz",
"integrity": "sha512-K3mDW66N+xT2/V439u1alFANiBUjdEx2gLiNYnCmUsva5jZMxWTjafBYwTzYK+EMFMHrUoabuU+T1BIP5CgbYQ==",
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-1.0.0.tgz",
"integrity": "sha512-LTUl9jS8WsLSUGaxQZKQkxfluOJRpgvBuxxdM4pYcjib+di8AU4OzQc6+L6SzGMLcKc9H0RAjojRatBhTMqYdg==",
"cpu": [
"arm64"
],
@ -1018,9 +1018,9 @@
}
},
"node_modules/@napi-rs/canvas-linux-riscv64-gnu": {
"version": "0.1.100",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-0.1.100.tgz",
"integrity": "sha512-mooqUBTIsccZpnoQC4NgrC1v6C1vof39etLNMnBwCY+p0gajWJvAHLGQ6g/gGyS5YrpDW+GefSN4+Cvcr08UWw==",
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-1.0.0.tgz",
"integrity": "sha512-Iz931SAZf+WVDzpjk52Q3ffW3zw0YflFwEZMgs036Wfu1kX/LrwT9wGjsuSqyduqefUkl91/vTdAjn8hQu5ezA==",
"cpu": [
"riscv64"
],
@ -1038,9 +1038,9 @@
}
},
"node_modules/@napi-rs/canvas-linux-x64-gnu": {
"version": "0.1.100",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-0.1.100.tgz",
"integrity": "sha512-1eCvkDCazm7FFhsT7DfGOdSaHgZVK3bt/dSBl5EWHOWmnz+I7j8tPseJqqD81NF+MH21jKUK4wQSDjN0mdhnTg==",
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-1.0.0.tgz",
"integrity": "sha512-pFEQ5eFK4JusgN1K6KkO9DKP/Hi1WMJOkF8Ch03/khTc4bFbCKkCCsJG4YcOMOW9bI4XbT2/eMAWxhO0xaWgPA==",
"cpu": [
"x64"
],
@ -1058,9 +1058,9 @@
}
},
"node_modules/@napi-rs/canvas-linux-x64-musl": {
"version": "0.1.100",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-0.1.100.tgz",
"integrity": "sha512-20arT6lnI19S68qNlii73TSEDbECNgzMz2EpldC1V3mZFuRkeujXkcebRk0LRJe9SEUAooYiLokfMViY8IX7yA==",
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-1.0.0.tgz",
"integrity": "sha512-jnvr8NrLHiZ3NCiOKWqDbkI4Ah+QDrqtZ+sddPZBltEb1mQ2coSvCSJYfict+oAwcm0c970oTmVySpjKP/lnaA==",
"cpu": [
"x64"
],
@ -1078,9 +1078,9 @@
}
},
"node_modules/@napi-rs/canvas-win32-arm64-msvc": {
"version": "0.1.100",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-arm64-msvc/-/canvas-win32-arm64-msvc-0.1.100.tgz",
"integrity": "sha512-DZFFT1wIAg37LJw37yhMRFfjATd3vTQzjZ1Yki8u2vhO6Hi5VE6BVaGQ1aaDu7xb4iMErz+9EOwjpS7xcxFeBw==",
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-arm64-msvc/-/canvas-win32-arm64-msvc-1.0.0.tgz",
"integrity": "sha512-y2j9/Gfd5joqiqxdP/L1smqjQ+uAx3C4N0EC7bDHrnZEEH8ToM/OC5p3uHvtj4Lq591aHj+ArL01UDLNwT5HgQ==",
"cpu": [
"arm64"
],
@ -1098,9 +1098,9 @@
}
},
"node_modules/@napi-rs/canvas-win32-x64-msvc": {
"version": "0.1.100",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-0.1.100.tgz",
"integrity": "sha512-MyT1j3mHC2+Lu4pBi9mKyMJhtP6U7k7EldY7sj/uS5gJA65gTXt8MefJQXLJo5d/vZbuWmfxzkEUNc/urV3pHA==",
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-1.0.0.tgz",
"integrity": "sha512-qwdhh9N6Gge/hC4pL9S1tQp0iKwhSl/dYjg7+RGp9k26iRGRi5MqqUyKGOXIWli0zOcuy5Y2wIH/jk2ry6i/jA==",
"cpu": [
"x64"
],
@ -5967,15 +5967,15 @@
}
},
"node_modules/pdfjs-dist": {
"version": "5.7.284",
"resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-5.7.284.tgz",
"integrity": "sha512-h4EdYQczmGhbOlqc3PPZwxevn7ApdWPbovAuWXOB/DjIyigSnwfy2oze7c6mRcSr9XgLp3eN3EeL4DyySTPMFw==",
"version": "6.0.227",
"resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-6.0.227.tgz",
"integrity": "sha512-/P6M4SXw+70waMVLUM7rdRtvo+dEzqE1t6W/zQNvBETo2MaRa5rrvCcAYdfWGiUzadTgM0lJmRApUrW0d9zgKg==",
"license": "Apache-2.0",
"engines": {
"node": ">=22.13.0 || >=24"
},
"optionalDependencies": {
"@napi-rs/canvas": "^0.1.100"
"@napi-rs/canvas": "^1.0.0"
}
},
"node_modules/perfect-debounce": {
@ -7569,18 +7569,6 @@
"eslint": ">=6.0.0"
}
},
"node_modules/vue-pdf-embed": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/vue-pdf-embed/-/vue-pdf-embed-2.1.5.tgz",
"integrity": "sha512-IGFVBYlnOz2zSql1zk4YJyBu584EZa6RUykk5f8wkHF/AR31khCa+ruJoRag+Ff2UyntkWu0brENIKoikQ7F8g==",
"license": "MIT",
"dependencies": {
"pdfjs-dist": "^5.7.284"
},
"peerDependencies": {
"vue": "^3.3.0"
}
},
"node_modules/vue-stick-to-bottom": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/vue-stick-to-bottom/-/vue-stick-to-bottom-1.0.0.tgz",

2
package.json
View File

@ -29,6 +29,7 @@
"html2canvas": "^1.4.1",
"katex": "^0.16.9",
"marked": "^11.1.0",
"pdfjs-dist": "^6.0.227",
"pinia": "^3.0.4",
"prismjs": "^1.29.0",
"rehype-raw": "^7.0.0",
@ -42,7 +43,6 @@
"socket.io-client": "^4.7.5",
"unified": "^11.0.5",
"vue": "^3.4.15",
"vue-pdf-embed": "^2.1.5",
"vue-stick-to-bottom": "^1.0.0",
"xterm": "^5.3.0"
},

156
static/src/components/chat/PdfPreview.vue
View File

@ -1,29 +1,19 @@
<template>
<div ref="containerRef" class="pdf-preview">
<div v-if="error" class="pdf-preview-error">{{ error }}</div>
<div v-show="loading" class="pdf-preview-loading">
<div v-if="loading" class="pdf-preview-loading">
<span class="pdf-preview-spinner"></span>
<span>PDF 加载中...</span>
</div>
<VuePdfEmbed
:source="props.source"
:width="pageWidth"
:text-layer="false"
:annotation-layer="false"
@loaded="onLoaded"
@loading-failed="onLoadingFailed"
@rendered="onRendered"
@rendering-failed="onRenderingFailed"
/>
<div v-else-if="error" class="pdf-preview-error">{{ error }}</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import VuePdfEmbed, { GlobalWorkerOptions } from 'vue-pdf-embed/dist/index.essential.mjs';
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist/legacy/build/pdf.mjs';
import pdfWorkerUrl from 'pdfjs-dist/legacy/build/pdf.worker.min.mjs?url';
import type { PDFDocumentProxy, RenderTask } from 'pdfjs-dist';
GlobalWorkerOptions.workerSrc = pdfWorkerUrl;
@ -34,60 +24,105 @@ const props = defineProps<{
}>();
const containerRef = ref<HTMLDivElement | null>(null);
const pageWidth = ref<number | undefined>(undefined);
const loading = ref(true);
const error = ref('');
let resizeObserver: ResizeObserver | null = null;
let resizeHandler: (() => void) | null = null;
let pdfDoc: PDFDocumentProxy | null = null;
let renderTasks: RenderTask[] = [];
function updateWidth() {
const el = containerRef.value;
if (!el) return;
const rect = el.getBoundingClientRect();
pageWidth.value = rect.width > 0 ? Math.floor(rect.width) : undefined;
function clearPages() {
const container = containerRef.value;
if (!container) return;
container.querySelectorAll('canvas').forEach((c) => c.remove());
}
function cancelPendingRenders() {
renderTasks.forEach((task) => {
try { task.cancel(); } catch {}
});
renderTasks = [];
}
async function destroyDocument() {
cancelPendingRenders();
clearPages();
if (pdfDoc) {
try { await pdfDoc.destroy(); } catch {}
pdfDoc = null;
}
}
async function renderPdf() {
const container = containerRef.value;
if (!container || !props.source) return;
await destroyDocument();
loading.value = true;
error.value = '';
try {
const resp = await fetch(props.source, { credentials: 'same-origin' });
if (!resp.ok) {
throw new Error(resp.statusText || 'PDF 加载失败');
}
const data = await resp.arrayBuffer();
if (!data.byteLength) {
throw new Error('PDF 内容为空');
}
const loadingTask = getDocument({ data });
pdfDoc = await loadingTask.promise;
const numPages = pdfDoc.numPages;
const containerWidth = container.clientWidth;
for (let pageNum = 1; pageNum <= numPages; pageNum++) {
const page = await pdfDoc.getPage(pageNum);
const baseViewport = page.getViewport({ scale: 1 });
const scale = containerWidth > 0 ? containerWidth / baseViewport.width : 1;
const viewport = page.getViewport({ scale });
const canvas = document.createElement('canvas');
canvas.className = 'pdf-preview-page';
canvas.style.display = 'block';
canvas.style.width = '100%';
canvas.style.height = 'auto';
const dpr = window.devicePixelRatio || 1;
canvas.width = Math.floor(viewport.width * dpr);
canvas.height = Math.floor(viewport.height * dpr);
container.appendChild(canvas);
const ctx = canvas.getContext('2d');
if (!ctx) continue;
ctx.scale(dpr, dpr);
const renderTask = page.render({ canvasContext: ctx, viewport });
renderTasks.push(renderTask);
await renderTask.promise;
renderTasks = renderTasks.filter((t) => t !== renderTask);
}
loading.value = false;
} catch (e) {
const message = (e as Error)?.message || 'PDF 渲染失败';
if (message.toLowerCase().includes('cancel')) {
return;
}
error.value = message;
loading.value = false;
}
}
onMounted(() => {
updateWidth();
if (typeof ResizeObserver !== 'undefined' && containerRef.value) {
resizeObserver = new ResizeObserver(() => updateWidth());
resizeObserver.observe(containerRef.value);
} else {
resizeHandler = () => updateWidth();
window.addEventListener('resize', resizeHandler);
}
renderPdf();
});
onBeforeUnmount(() => {
if (resizeObserver) {
resizeObserver.disconnect();
resizeObserver = null;
}
if (resizeHandler) {
window.removeEventListener('resize', resizeHandler);
resizeHandler = null;
}
destroyDocument();
});
function onLoaded() {
loading.value = false;
}
function onRendered() {
loading.value = false;
}
function onLoadingFailed(e: unknown) {
loading.value = false;
error.value = (e as Error)?.message || 'PDF 加载失败';
}
function onRenderingFailed(e: unknown) {
loading.value = false;
error.value = (e as Error)?.message || 'PDF 渲染失败';
}
watch(() => props.source, () => {
renderPdf();
});
</script>
<style scoped lang="scss">
@ -125,4 +160,11 @@ function onRenderingFailed(e: unknown) {
transform: rotate(360deg);
}
}
.pdf-preview-page {
display: block;
width: 100%;
height: auto;
margin: 0;
}
</style>

2
static/src/components/chat/ShowFileCard.vue
View File

@ -69,7 +69,7 @@
</template>
<template v-else-if="fileType === 'pdf'">
<PdfPreview v-if="contentUrl" :key="contentUrl" :source="contentUrl" />
<PdfPreview :source="contentUrl" />
</template>
</div>

6
static/src/env.d.ts vendored
View File

@ -11,9 +11,3 @@ declare module '*.md' {
export default content;
}
declare module 'vue-pdf-embed/dist/index.essential.mjs' {
import type { DefineComponent } from 'vue';
const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, any>;
export default component;
export const GlobalWorkerOptions: any;
}