VuePDF

在vue项目中预览pdf文件

提示

注意打包能否成功，部署看pdf能否正常预览pdf

打包失败，将node升级到v22；不要使用pnpm，改成npm

安装

bash

npm install vue-pdf-embed

使用

import导入

提示

将 pdf 文件放入 public 文件夹中，通过 import 导入

如果是 vitepress 项目的md文件内使用 vue-pdf 组件，将 pdf 文件 放入 项目根目录/docs/public 文件夹中，通过 import 导入

<script setup>
import VuePdfEmbed from 'vue-pdf-embed'
import 'vue-pdf-embed/dist/styles/annotationLayer.css'
import 'vue-pdf-embed/dist/styles/textLayer.css'
import pdfSource from '/pdf/01_深入JavaScript运行原理.pdf'
</script>

<template>
	<VuePdfEmbed annotation-layer text-layer :source="pdfSource" />
</template>

VuePDF ​

安装 ​

使用 ​

import导入 ​

VuePDF

安装

使用

import导入