vue3项目实现pdf预览功能

如何在vue3项目中利用pdfobject插件实现pdf预览的功能

首先我们先下载

npm i pdfobject

如何在vue3中使用

//封装的组件
<template>
    <div id="mypdf"></div>
</template>

<script setup>
//导入PDFObject
import PDFObject from 'pdfobject'
import {ref,onMounted} from 'vue'
const props = defineProps(['url'])
onMounted(()=>{
    PDFObject.embed(props.url, "#mypdf");
})
</script>

<style scoped>
/* 根据你的需要设置PDFObject样式，比如高度等 */
.pdfobject-container { height: 680px; border: 1rem solid rgba(0,0,0,.1); }
</style>

我们把这个功能封装成组件如PdfPreview，接着我们在父组件里面使用，我这里将组件在main.js全局注册

//父组件中使用
<template>
   <el-button type="primary" plain :disabled="single" @click="clickPreview">预览</el-button>
    <!-- 预览弹窗 -->
    <el-dialog v-model="dialogVisible" :append-to-body="true">
      <pdf-preview :url="ImgUrl"></pdf-preview>
    </el-dialog>
</template>
<script setup name="Index">
    import {ref} from 'vue'
    const ImgUrl = ref()//用来存放pdf地址
    const dialogVisible = ref(false)//控制弹窗
    const clickPreview = () => {
      dialogVisible.value = true
    }
    //这边imgurl就是pdf的url地址，根据自己后端返回数据而定，有可能就是一个url地址，也可能是文件流的形式。我这里做的是上传pdf后,有个返回pdf的接口，res里面返回的是url地址
</script>

这个插件里面的样式已经写好，也有下载的功能。之前用过类似的pdf.js，太简陋了，所以这里推荐使用pdfobject插件