vue显示PDF文件

小编最近接手的项目中，有个需求，前端显示后端返回的PDF格式的文件，经过小编两天的调研和试验，终于找到了一个比较好的插件方法，直接贴代码。
1、安装

npm i vue-pdf-signature --save-dev

2、pdfShow.vue

<template><div class="pdf-content"><!-- 显示所有页 --><div class="all-pdf" v-if="isShowAll"><pdf v-for="i in pageTotalNum" :key="i" :src="pdfUrl" :page="i"/></div><!-- 只显示第一页，进行翻页查看 --><div class="change-page-pdf" v-else><pdf ref="pdf":src="pdfUrl":page="currentPage"@progress="loadedRatio=$event"@page-loaded="pageLoaded($event)"@num-pages="pageTotalNum=$event"@link-clicked="page=$event"/>{{currentPage}}/{{pageTotalNum}}<div class="btn-box"><span class="prev-btn" @click.stop="changePdfPage('prev')">上一页</span><span class="next-btn" @click.stop="changePdfPage('next')">下一页</span></div></div>
</template>
<script>
import pdf from "vue-pdf-signature";
import CMapReaderFactory from "vue-pdf-signature/src/CMapReaderFactory";
export default {props: {//是否显示所有页isShowAll: {type: Boolean,default: true,},},components: {pdf,},data() {return {pdfUrl: "/static/test/pdf", //pdf文件路径currentPage: 1, //当前页码pageTotalNum: 1, //总页数loadedRatio: 0, //pdf是否已加载完成 0:未完成  1:完成};},mounted() {this.pdfTask(this.pdfUrl);},methods: {/*** pdf初始化* @param {pdfUrl} string pdf路径 - 若为静态文件，需放在static文件夹下*/pdfTask(pdfUrl) {const that = this;//该方法可以显示合同类型pdf中的印章、签名等，但字体较小的文案则无法显示var loadingTask = pdf.createLoadingTask(pdfUrl);//该方法可以完整显示文案，但无法显示合同类型pdf中的印章、签名var loadingTask = pdf.createLoadingTask({url: pdfUrl,CmapPacked: true,CMapReaderFactory,});loadingTask.promise.then((pdf) => {that.pdfUrl = loadingTask;that.pageTotalNum = pdf.numPages;}).catch((err) => {console.log("加载失败", err);});},/*** pdf加载*/pageLoaded(e) {this.currentPage = e;},/*** 翻页* @param {pageOperation} 翻页类型 prev:上一页  next:下一页*/changePdfPage(pageOperation) {let page = this.currentPage;if (pageOperation == "prev") {if (page == 1) return false;page--;}if (pageOperation == "next") {if (page == this.pageTotalNum) return false;page++;}this.currentPage = page;},},
};
</script>
<style lang="scss" scoped>
.pdf-content {width: 100%;.btn-box {width: 100%;display: flex;justify-content: space-between;span {display: block;width: 50%;height: 44px;text-align: center;line-height: 44px;color: #333;background: #fff;}.next-btn {color: #fff;background: #fa5050;}}
}
</style>

注意：该插件实际是使用canvas进行绘制，若同一个页面使用PDF显示的同时又使用canvas进行绘制，自制的canvas绘制会存在无法绘制的情况，小编还未有方案解决。

综上所述，由于小编的项目中PDF格式文件中的内容必会出现印章和签名，且询问了很多大佬都无解，所以该插件方法也被pass掉了，最后决定还是由后端将PDF文件格式转换成图片来实现。虽然该插件方案存在问题，如果PDF文件中无印章、签名等元素，纯文案的话，该插件文案还是给力的，中文也可以显示正常哦，所以小编还是在此将方案代码分享一下，希望对需要的童鞋有帮助。

vue显示PDF文件相关推荐

vue项目读取显示pdf文件
项目需求:展示pdf条款. 方法的实现:使用 iframe 标签代码段: 数据 data(){return{detail: [{name: '条款1',to: './public/pdf_tk.pd ...
前端vue实现pdf文件的在线预览
3.前端vue实现pdf文件的在线预览我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...
如何在 SAP UI5 应用里显示 PDF 文件试读版
一套适合 SAP UI5 初学者循序渐进的学习教程本专栏计划的文章数在 300 篇左右,到 2022年12月23日为止,目前已经更新了 155 篇,专栏完成度为 51.6%,完成度已经超过了一半了. ...
在html中加入pdf文件吗,如何在网页中显示PDF文件
我们是不是对百度文库能直接在网页上显示PDF文件感到好奇,你是否也想实现这样的功能?很多朋友认为可以直接在网页中插入代码就可以实现这个功能,其实要在网页中完整地显示PDF文件,需要把PDF文件转换成S ...
android APP内显示PDF文件
android APP内显示PDF文件最近公司要做一个小功能,显示在APP内部显示pdf文件,刚接到任务感觉非常简单的一小功能,做的时候才发现在真的很不好实现. 因为android的webView与 ...
ASP.NET 用 FlexPaper 在页面上显示 PDF 文件
必要条件演示 ASP.NET 用 FlexPaper 在页面上显示 PDF 文件软件环境解决方案结构简单显示 SWF 文件上传并显示 PDF 文件常见问题参考资料其实,虽说是显示 PD ...
【C# 基础】— 解决 winForm 引用 Adobe PDF Reader控件不显示pdf 文件问题
前言公司的CS 终端需要显示 PDF 文件 ,在换用了"Adobe PDF Reader" 这个控件后,运行程序不报错,窗体控件区显示一片空白,PDF 文件就是不显示,这是怎么回 ...
Asp.net Core 配合 PDFObject 和 pdf.js 在浏览器显示pdf文件
Asp.net Core 配合 PDFObject 和 pdf.js 在浏览器直接显示pdf文件测试环境的浏览器版本: Chrome :90.0.4430.93(64 位) FireFox :88. ...
【教程】PDF组件Spire.PDF 教程：在C＃中显示PDF文件的打印预览
本文演示如何使用Spire.PDF和c#在Windows窗体应用程序中显示PDF文件的打印预览. 在使用下面的代码之前,我们需要创建一个Windows窗体应用程序,在窗体中添加一个PrintPrevi ...
html如何跳转到pdf页面,使用PDF.js在网页显示pdf文件并跳转到指定页码
最近在做一个土地档案管理系统 ,有个需求是在前端网页展示土地档案扫描件的pdf文件,并根据目录跳转到指定页. 第一个问题,显示pdf文件.引入pdf.js.然后设定html地址,地址为http://l ...

vue显示PDF文件

vue显示PDF文件相关推荐

最新文章

热门文章