一、前言
在vue3中通过vue-pdf-embed实现pdf预览打印下载等功能,主要使用的第三方库vue-pdf-embed 该库同时也支持在vue2中使用,本文主要针对vue3项目中如何使用进行简单介绍。
ps:github地址:Issue with long PDF + pagination · hrynko/vue-pdf-embed · Discussion #166 · GitHub
二、安装vue-pdf-embed
npm i vue-pdf-embed
yarn add vue-pdf-embed
1、全局引入
安装完成后在main.js或main.ts文件中 引入vue-pdf-embed
import { createApp } from 'vue'
import VuePdfEmbed from 'vue-pdf-embed'
import 'vue-pdf-embed/dist/style/index.css'
import 'vue-pdf-embed/dist/style/annotationLayer.css'
import 'vue-pdf-embed/dist/style/textLayer.css'
import App from './App.vue'
const app = createApp(App)
// 全局组件 由于我需要多次使用所有注册了全局组件方便使用
app.component('VuePdfEmbed', VuePdfEmbed)
app.mount('#app')
2.局部引入
//在你要使用该功能的vue文件中直接引入
<script setup>
import VuePdfEmbed from 'vue-pdf-embed'
import 'vue-pdf-embed/dist/style/index.css'
import 'vue-pdf-embed/dist/style/annotationLayer.css'
import 'vue-pdf-embed/dist/style/textLayer.css'
</script>
三、使用vue-pdf-embed实现打印、下载等功能
示例demo1
<template>
<div class="pdf-content">
<div class="pdf-button">
<button @click="PDFPrint">打印</button>
<button @click="PDFDownload">下载</button>
</div>
<div class="pdf">
<VuePdfEmbed
ref="vuePdfRef"
height="800"
annotation-layer
text-layer
:source="pdfSource"
/>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import VuePdfEmbed from 'vue-pdf-embed'
import 'vue-pdf-embed/dist/style/index.css'
import 'vue-pdf-embed/dist/style/annotationLayer.css'
import 'vue-pdf-embed/dist/style/textLayer.css'
//引入pdf
import pdfUrl from './240704.pdf'
const pdfSource = pdfUrl
const vuePdfRef = ref(null)
//打印
const PDFPrint = () => {
//打印分辨率默认 300 text1:文件名 allPages:是否打印所有页,默认值 false
vuePdfRef.value?.print(200, 'text1', true)
}
//下载
const PDFDownload = () => {
vuePdfRef.value?.download('text1')
}
</script>
<style lang="scss">
.pdf-content {
width: 100%;
height: calc(100vh - 20px);
overflow: hidden;
display: flex;
.pdf-button {
text-align: center;
height: calc(100% - 10px);
background-color: #999;
}
.pdf {
width: 100%;
height: calc(100% - 10px);
overflow: auto;
background-color: #ccc;
}
}
//处理血染层cavers问题占位
.hiddenCanvasElement {
display: none !important ;
}
</style>
示例demo2
分装成一个单独的组件放在components下使用
// components/PdfPreviewer.vue文件
<template>
<div class="pdf-content">
<div v-if="showButtons" class="pdf-button">
<button @click="PDFPrint">打印</button>
<button @click="PDFDownload">下载</button>
</div>
<div class="pdf">
<VuePdfEmbed
ref="vuePdfRef"
:height="height"
:annotation-layer="annotationLayer"
:text-layer="textLayer"
:source="pdfSource"
/>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import VuePdfEmbed from 'vue-pdf-embed'
import 'vue-pdf-embed/dist/style/index.css'
import 'vue-pdf-embed/dist/style/annotationLayer.css'
import 'vue-pdf-embed/dist/style/textLayer.css'
const props = defineProps({
pdfSource: {
type: String,
required: true
},
height: {
type: Number,
default: 800
},
annotationLayer: {
type: Boolean,
default: true
},
textLayer: {
type: Boolean,
default: true
},
showButtons: {
type: Boolean,
default: true
}
})
const vuePdfRef = ref(null)
const PDFPrint = () => {
console.log('打印pdf')
vuePdfRef.value?.print(200, 'text1', true)
}
const PDFDownload = () => {
vuePdfRef.value?.download('text1')
}
</script>
<style lang="scss">
//此处代码与上一个demo一样
</style>
如何引入组件使用如下:
<template>
<div>
<PdfPreviewer :pdf-source="pdfSource" :height="800" show-buttons />
</div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
// 导入自己的文件
import pdfUrl from './240704.pdf'
import PdfPreviewer from './components/PdfPreviewer.vue'
const pdfSource = pdfUrl
</script>
<style lang="scss" scoped></style>
四、最终效果
预览pdf
打印pdf
下载pdf
以上是一些pdf的基本的操作,后期将继续完善分装成一个完整的组件该组件还支持缩放、翻页等功能可以参考以下文档
功能实现参考链接(转载)