vitepress-plugin-pdf

vitepress-plugin-pdf

Embed PDF files in your VitePress site.

在 VitePress 中嵌入 PDF 文件。

Usage

With Vitepress-tuck

Installation:

# npm
npm install -D vitepress-tuck vitepress-plugin-pdf
# pnpm
pnpm add -D vitepress-tuck vitepress-plugin-pdf
# yarn
yarn add -D vitepress-tuck vitepress-plugin-pdf

Configuration:

// .vitepress/config.ts
import pdf from 'vitepress-plugin-pdf'
import { defineConfig } from 'vitepress-tuck'

export default defineConfig({
  plugins: [pdf()],
})

// .vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import enhanceApp from 'virtual:enhance-app'
import DefaultTheme from 'vitepress/theme'

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    enhanceApp(ctx)
  },
} satisfies Theme

With Vitepress

Installation:

# npm
npm install -D vitepress-plugin-pdf
# pnpm
pnpm add -D vitepress-plugin-pdf
# yarn
yarn add -D vitepress-plugin-pdf

Configuration:

// .vitepress/config.ts
import { defineConfig } from 'vitepress'
import { pdfMarkdownPlugin } from 'vitepress-plugin-pdf'

export default defineConfig({
  markdown: {
    config: (md) => {
      md.use(pdfMarkdownPlugin)
    },
  },
})

// .vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import { enhanceAppWithPDF } from 'vitepress-plugin-pdf/client'
import DefaultTheme from 'vitepress/theme'

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    enhanceAppWithPDF(ctx)
  },
} satisfies Theme

Syntax

@[pdf](/path/to/file.pdf)

With Options

@[pdf page="3" no-toolbar width="80%" height="600px" zoom="100"](/demo.pdf)

Option	Type	Default	Description
page	number	1	Page number to display
no-toolbar	boolean	false	Hide PDF.js toolbar
width	string	"100%"	Embed width
height	string	""	Embed height
zoom	number	50	Zoom level
ratio	string	-	Aspect ratio (e.g. "16:9")

The plugin automatically uses native browser PDF embedding when supported, and falls back to PDF.js for unsupported browsers.