gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-03-01 10:03:37 +01:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

client/pdf viewer: add a rudimentary support for a read-only view

Browse Source
This commit is contained in:
Adorian Doran 2026-02-28 18:43:51 +02:00
parent 64d1b33a4c
commit 50301be093
4 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
apps/client/src/services/content_renderer.ts
View File

@ -16,6 +16,8 @@ import protectedSessionHolder from "./protected_session_holder.js";
import renderService from "./render.js";
import { applySingleBlockSyntaxHighlight } from "./syntax_highlight.js";
import utils, { getErrorMessage } from "./utils.js";
import PdfViewer from "../widgets/type_widgets/file/PdfViewer";
import { h, render } from "preact";
let idCounter = 1;
@ -195,10 +197,13 @@ function renderFile(entity: FNote | FAttachment, type: string, $renderedContent:
const $content = $('<div style="display: flex; flex-direction: column; height: 100%; justify-content: end;">');
if (type === "pdf") {
const $pdfPreview = $('<iframe class="pdf-preview" style="width: 100%; flex-grow: 100;"></iframe>');
$pdfPreview.attr("src", openService.getUrlForDownload(`pdfjs/web/viewer.html?file=../../api/${entityType}/${entityId}/open`));
const url = `../../api/${entityType}/${entityId}/open`;
const $viewer = $("<div>");
render(h(PdfViewer, {pdfUrl: url, editable: false}), $viewer.get(0)!);
$content.append($viewer);
$content.append($pdfPreview);
} else if (type === "audio") {
const $audioPreview = $("<audio controls></audio>")
.attr("src", openService.getUrlForDownload(`api/${entityType}/${entityId}/open-partial`))

1
apps/client/src/widgets/type_widgets/file/PdfViewer.tsx
View File

@ -36,6 +36,7 @@ export default function PdfViewer({ iframeRef: externalIframeRef, pdfUrl, onLoad
<iframe
ref={iframeRef}
class="pdf-preview"
style={{width: "100%", height: "100%"}}
src={`pdfjs/web/viewer.html?file=${pdfUrl}&lang=${locale}&sidebar=${newLayout ? "0" : "1"}&editable=${editable ? "1" : "0"}`}
onLoad={() => {
injectStyles();

8
packages/pdfjs-viewer/src/custom.css
View File

@ -20,6 +20,14 @@
font-size: 16px;
}
body.read-only-document {
/* TODO: find a more elegant way to display a PDF in a read only view */
--toolbar-height: 0;
.toolbar {
display: none;
}
}
:root button,
:root dialog,
:root #toolbarContainer,

3
packages/pdfjs-viewer/src/custom.ts
View File

@ -7,6 +7,9 @@ import { setupPdfLayers } from "./layers";
async function main() {
const urlParams = new URLSearchParams(window.location.search);
const isEditable = urlParams.get("editable") === "1";
document.body.classList.toggle("read-only-document", !isEditable);
if (urlParams.get("sidebar") === "0") {
hideSidebar();
}