当前位置: 首页 > 软件编程 > 前端 > 在Vue3中使用PDFObject预览PDF文件

在Vue3中使用PDFObject预览PDF文件

发布于:2023-1-12 前端 0条评论 2,650 views
本站提供Linux服务器运维,自动化脚本编写等服务,如有需要请联系博主QQ:446199062

最近在开发Zdir 3的PDF预览功能,网上搜索了一圈,大部分都是pdf.js来实现,pdf.js对Vue3兼容性不太好,要自己写一大堆代码,对我这个前端小白而言非常不友好。那有没有那种几行代码就能搞定Vue3预览PDF的方案呢,答案是肯定的,那就是使用PDFObject这个库。

安装PDFObject

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

安装PDFObject:

# 安装PDFObject
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>

效果

实测在Chrome、Edge、Firefox浏览器都能正常预览,效果还不错。

PDFObject官网:https://pdfobject.com/


发表评论

邮箱地址不会被公开。 必填项已用*标注