【VuePdfEmbed】十行代码教会你在Vue3项目中完成PDF预览及下载-优快云博客

本文链接：https://blog.youkuaiyun.com/Web_chicken/article/details/148864235

时隔两年，我又发布了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, // 你的pdf文件总页码
});

const loaded = e => {
  // 获取pdf文件页码总数
  pdfSource.total = e._pdfInfo.numPages
}

const handlePreview = (type) => {
  if (type === 'next') return pdfSource.page += 1
  pdfSource.page -= 1
}

const pdfref = ref(null)
const downLoad = () => {
  pdfref.value.download()
}

<template>
  <vue-pdf-embed ref="pdfref" v-if="pdfSource.url" :source="pdfSource" :page="pdfSource.page" @loaded="loaded">
    <template v-slot:after-page>
      <div class="btn-footer">
        <div class="download-btn" @click="downLoad">下载</div>
        <div class="info-btn">{{ `当前第${pdfSource.page}页，共${pdfSource.total}页` }}</div>
        <div class="last-btn" v-if="pdfSource.page > 1" @click="handlePreview('last')">上一页</div>
        <div class="next-btn" v-if="pdfSource.page < pdfSource.total" @click="handlePreview('next')">下一页</div>
      </div>
    </template>
  </vue-pdf-embed>
</template>

官方给我们提供了两个插槽，具体需求可参考上方插槽格式修改

3.常用事件

Name	Value	Description
internal-link-clicked	destination page number	internal link was clicked
loaded	PDF document proxy	finished loading the document
loading-failed	error object	failed to load document
password-requested	object with `callback` function and `isWrongPassword` flag	password is needed to display the document
progress	object with number of `loaded` pages along with `total` number of pages	tracking document loading progress
rendered	–	finished rendering the document
rendering-failed	error object	failed to render document

4.公共方法，需调用ref

Name	Arguments	Description
download	filename (`string`)	download document
print	print resolution (`number`), filename (`string`), all pages flag (`boolean`)	print document via browser interface