【VuePdfEmbed】十行代码教会你在Vue3项目中完成PDF预览及下载

原创

已于 2025-06-25 09:38:45 修改 · 982 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue3 #vue.js #vue-pdf-embed #前端 #javascript

于 2025-06-24 09:38:52 首次发布

该文章已生成可运行项目，

时隔两年，我又发布了blog，一文教会你使用VuePdfEmbed

Vue3项目使用vue-pdf-embed完成对pdf的预览和下载功能

废话不多说，直接实战

效果图

在这里插入图片描述

1.安装VuePdfEmbed

官方文档地址https://www.npmjs.com/package/vue-pdf-embed

npm i vue-pdf-embed或者yarn add vue-pdf-embed

或直接引入cdn地址 <script src="https://unpkg.com/vue-pdf-embed"></script>

2.在项目中使用VuePdfEmbed

import VuePdfEmbed from "vue-pdf-embed"; // 引入依赖

const route = useRoute()
const pdfSource = reactive({
   
   
  url: route.query.url, // 你的pdf地址 URL、Base64、二进制均可
  cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.16.105/cmaps/", //前缀不可修改
  cMapPacked: true,
  page: 1, //当前页码 如设置只会显示当前page 反之显示全部
  total: 0