在e lectron+Vue3中使用PDFObject预览PDF文件

最近在开发客户端，前端使用electron+vite+vue3,要加入pdf预览功能。 网上搜索了一圈，大部分都是pdf.js来实现。 但是我自己尝试了一圈用pdfjs。最后选用PDFObject这个库实现pdf预览，并把它添加electron-egg的项目中。

安装PDFObject

官方介绍：PDFObject是一个开源标准友好的JavaScript实用程序，用于将PDF文件嵌入HTML文档中。

安装PDFObject：

# 安装PDFObject
cd frontend/
npm i pdfobject

在Vue3中使用

废话不多说，直接贴代码，核心代码几行就实现了，比网上那些乱七八糟的方案简洁多了。

<template>
    <div id="mypdf"></div>
</template>

<script setup>
//导入PDFObject
import PDFObject from 'pdfobject'
import {ref,onMounted} from 'vue'

onMounted(()=>{
    let url = "https://soft.xiaoz.org/office/hee%20hee.pdf";
    PDFObject.embed(url, "#mypdf");
})
</script>

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

效果

实测在electron项目中正常预览，效果还不错。

参考

# 前端实现 PDF 预览的常见方案 #在Vue3中使用PDFObject预览PDF文件