PDF Reader
Overview
The theme supports embedding PDF files in markdown, enabling direct PDF reading within the page.
This feature is powered by vuepress-plugin-md-power.
Configuration
This feature is disabled by default. You need to enable it in the theme configuration.
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
markdown: {
pdf: true,
},
}),
})Syntax
The simplest syntax is as follows:
@[pdf](url)Specifying the Page Number
To open a specific page, use the page option to specify the page number. For backward compatibility, the shorthand form of writing the page number directly after pdf, @[pdf 2](url), is also supported.
@[pdf page="2"](url) <!-- recommended form -->
@[pdf 2](url)More Options
Additional options can be added to @[pdf] for more flexible control:
@[pdf page="2" no-toolbar width="100%" height="600px" zoom="75" ratio="16:9"](url)Page number.
Hide the PDF.js toolbar
Zoom level (percentage number)
Width
Height. Treated as auto when not specified
Aspect ratio. Only effective when height is not specified
Browser does not support the built-in PDF reader?
The theme uses the <embed> tag to render PDF files, but some browsers do not support the built-in PDF reader (usually limited in mobile browsers).
For unsupported browsers, the theme uses PDF.js as a fallback, which is loaded from https://static.pengzhanbo.cn/pdfjs/ by default.
For offline builds, intranet deployments, or cases with compliance requirements on third-party resources, you can point markdown.pdf.pdfjsUrl to a self-hosted address:
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
markdown: {
pdf: { pdfjsUrl: '/pdfjs/' },
},
}),
})Examples
Default
Input:
@[pdf](https://plume.pengzhanbo.cn/files/sample-1.pdf)Output:
Set Page Number to 2
Input:
@[pdf page="2"](https://plume.pengzhanbo.cn/files/sample-1.pdf)Output:
Fixed Height
Input:
@[pdf height="400px"](https://plume.pengzhanbo.cn/files/sample-1.pdf)Output:
21:29 Aspect Ratio
Input:
@[pdf ratio="21:29"](https://plume.pengzhanbo.cn/files/sample-1.pdf)Output:
