Vue怎么使用pdfobject实现预览pdf

未分类 2024年05月09日 21:06

本篇内容主要讲解“Vue怎么使用pdfobject实现预览pdf”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue怎么使用pdfobject实现预览pdf”吧!

安装

pnpm add pdfobject

引入importpdffrom'pdfobject'使用

这里使用会借助于FileReader，FileReader用于读取文件

//点击文件上传回调handlePreview(file){const{raw}=file//预览pdf//FileReader用于读取文件letreader=newFileReader()reader.readAsDataURL(raw)//这里只需要将文件传进去就可以了reader.onload=e=>{//reader.result同e.target.result//1.文件名2.要将pdf渲染到的指定位置（dom元素）3.指定在embed标签中的显示的宽度pdf.embed(reader.result,'#previewPdfAndDocx',{width:'100%'})}},效果

我这里没在上传之前判断，这里是上传之后，点击文件的时候进行预览，也可以在上传文件之前进行预览，然后决定是否进行上传。根据具体项目需求来

补充

除了上文，还可以利用pdfobject实现其他功能，希望对大家有所帮助

效果1：在指定位置（当指定位置为全局时）浏览PDF

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>在指定div中浏览PDF</title><linkrel="stylesheet"href="css/bootstrap.min.css"/><style>/*添加样式是为了实现全屏效果*/html,body{height:100%;overflow:hidden;}#example1{height:100%;}.pdfobject-container{/*height:500px;*/}.pdfobject{/*border:1pxsolid#666;*/}</style></head><body><divid="example1"></div><scripttype="text/javascript"src="js/pdfobject.min.js"></script><script>//我的pdf文件放在项目的pdf文件夹下，名字叫做Java.pdfPDFObject.embed("pdf/Java.pdf","#example1");</script></body></html>

效果2：在指定位置（当指定位置为局部时）浏览PDF

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>在指定div中浏览PDF</title><linkrel="stylesheet"href="css/bootstrap.min.css"/><style>html,body{height:100%;overflow:hidden;/*添加背景颜色是为了方便查看整个body范围*/background-color:cornflowerblue;}#example1{/*设置放置PDF的div的样式*/height:50%;width:50%;}/*PDF容器样式*/.pdfobject-container{/*height:500px;*/}/*PDF样式*/.pdfobject{/*border:1pxsolid#666;*/}</style></head><body><divid="example1"></div><scripttype="text/javascript"src="js/pdfobject.min.js"></script><script>//我的pdf文件放在项目的pdf文件夹下，名字叫做Java.pdfPDFObject.embed("pdf/Java.pdf","#example1");</script></body></html>

效果3：指定从多少页开始阅读（必须同时指定显示PDF的div）

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>在指定div中浏览PDF</title><linkrel="stylesheet"href="css/bootstrap.min.css"/><style>/*添加样式是为了实现全屏效果*/html,body{height:100%;overflow:hidden;}#example1{height:100%;}.pdfobject-container{/*height:500px;*/}.pdfobject{/*border:1pxsolid#666;*/}</style></head><body><divid="example1"></div><scripttype="text/javascript"src="js/pdfobject.min.js"></script><script>//我的pdf文件放在项目的pdf文件夹下，名字叫做Java.pdf，指定PDF从20页开始阅读PDFObject.embed("pdf/Java.pdf","#example1",{page:"20"});</script></body></html>

到此，相信大家对“Vue怎么使用pdfobject实现预览pdf”有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！