PdfViewer
A PDF in the page with the browser's own viewer, a bar with its name, open and download links, and a fallback.
Demo
The browser's own viewer draws the PDF; where it cannot, the links remain.
Get it
It needs theme.qwe, as every component does; or take the whole kit, quillo-ui.qwe. Each component brings its own styles to the pages that show it.
$ curl -O https://quillolang.org/components/ui/theme.qwe$ curl -O https://quillolang.org/components/ui/pdf_viewer.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/pdf_viewer.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/pdf_viewer.qwe
// A one-page PDF written by hand, so the demo needs no files.let pdf_viewer_demo_src = "data:application/pdf;base64," + "JVBERi0xLjQKMSAwIG9iajw8L1R5cGUvQ2F0YWxvZy9QYWdlcyAyIDAgUj4+ZW5kb2JqCjIgMCBvYmo8PC9UeXBlL1BhZ2VzL0tpZHNbMyAwIFJdL0NvdW50IDE+PmVuZG9iagozIDAgb2JqPDwvVHlwZS9QYWdlL1BhcmVudCAyIDAgUi9NZWRpYUJveFswIDAgNDAwIDMwMF0vQ29udGVudHMgNCAwIFIvUmVzb3VyY2VzPDwvRm9udDw8L0YxIDUgMCBSPj4+Pj4+ZW5kb2JqCjQgMCBvYmo8PC9MZW5ndGggNjg+PnN0cmVhbQpCVCAvRjEgMjQgVGYgNDAgMTYwIFRkIChIZWxsbyBmcm9tIFF1aWxsbyBVSSkgVGogRVQKQlQgL0YxIDEyIFRmIDQwIDEzMCBUZCAoQSBvbmUtcGFnZSBQREYuKSBUaiBFVAplbmRzdHJlYW0KZW5kb2JqCjUgMCBvYmo8PC9UeXBlL0ZvbnQvU3VidHlwZS9UeXBlMS9CYXNlRm9udC9IZWx2ZXRpY2E+PmVuZG9iagp0cmFpbGVyPDwvUm9vdCAxIDAgUj4+Cg=="view PdfViewerDemo() = <div.demo-stack> <PdfViewer src={pdf_viewer_demo_src} title="Hello.pdf" height="360px" download="hello.pdf"/> <PdfViewer src={pdf_viewer_demo_src} title="Without the bar" bar={false} height="160px"/> <p.demo-note>The browser's own viewer draws the PDF; where it cannot, the links remain.</p> </div>Source
ui/pdf_viewer.qwe
// PdfViewer: a PDF shown in the page with the browser's own viewer, and a bar// above it with its name and links to open it in a tab or download it. Where// the browser cannot show PDFs (most phones), it says so and offers the links.//// <PdfViewer src="/docs/terms.pdf" title="Terms of service"/>// <PdfViewer src={invoice_url} title={`Invoice ${n}`} height="720px" download={`invoice-${n}.pdf`}/>//// src: the PDF. title: its name, in the bar and for screen readers ("Document").// height: as CSS ("520px"). bar: false hides the bar. download: the file name// the download link gives (the link is left out when null... no: when false).// text: what it says where the browser cannot show it ("This browser cannot// show the PDF here.").import ui/theme.qwe use ui_clslet pdf_viewer_css = css`.ui-pdf-viewer { display: grid; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.4 var(--ui-font); }.ui-pdf-viewer-bar { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--ui-border); background: var(--ui-subtle); }.ui-pdf-viewer-bar svg { flex: none; width: 18px; height: 18px; color: var(--ui-danger); }.ui-pdf-viewer-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }.ui-pdf-viewer-link { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); text-decoration: none; white-space: nowrap;}.ui-pdf-viewer-link:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }.ui-pdf-viewer-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }.ui-pdf-viewer object { display: block; width: 100%; height: var(--h, 520px); background: var(--ui-subtle); }.ui-pdf-viewer-fallback { display: grid; place-items: center; align-content: center; gap: 10px; height: 100%; padding: 24px; text-align: center; color: var(--ui-muted); }.ui-pdf-viewer-fallback p { margin: 0; }`view PdfViewer(src: str, title: str = "Document", height: str = "520px", bar: bool = true, download: str? = null, text: str = "This browser cannot show the PDF here.", class: str? = null) { style global pdf_viewer_css <div class={ui_cls(["ui-pdf-viewer", class])} style={`--h: ${height}`}> {bar && <div.ui-pdf-viewer-bar> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-7-7ZM13 2v7h7"/></svg> <span.ui-pdf-viewer-title>{title}</span> <a.ui-pdf-viewer-link href={src} target="_blank" rel="noopener">Open in a tab</a> <a.ui-pdf-viewer-link href={src} download={download ?? true}>Download</a> </div>} <object data={src} type="application/pdf" aria-label={title}> <div.ui-pdf-viewer-fallback> <p>{text}</p> <p><a.ui-pdf-viewer-link href={src} target="_blank" rel="noopener">Open {title}</a></p> </div> </object> </div>}Related
FilePreviewA look at a file before opening it: an image, a PDF in an object, the start of a text file, a player, or an icon, with name, size and a download link.5 views · 7 downloadsFileIconA file's icon by its extension, written on it and coloured by its kind: document, sheet, PDF, image, code and more.6 views · 9 downloadsEmailPreviewAn email as a client shows it: subject, labels and star, sender with picture, to and cc, the date, the message and attachments to download.6 views · 7 downloadsAudioPlayerAn audio clip with play, a seek bar that says the time, and a button cycling through playback speeds.6 views · 7 downloadsCameraCaptureTakes a photo with the camera into a hidden input as a data URL, with retake, and says so when there is no camera.6 views · 6 downloadsCoverImageA wide picture with a title, subtitle and actions over a gradient, in three heights.7 views · 7 downloads
Thread
Thread 0 posts
On PdfViewer: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.