vue-pdf实现预览pdf文件以及含有电子印章的pdf文件

话不多说，上代码~

1.页面：

<template><el-dialog:title="title":visible.sync="openViewPdf"width="1000px":before-close="close"append-to-body:close-on-click-modal="false":close-on-press-escape="false":destroy-on-close="true"><div class="global"><div class="preview"><el-button type="success" @click="click">开始预览</el-button></div><div class="pdfContainer" v-if="isShow"><div class="button"><el-button type="success" @click="prev()">上一页</el-button><el-button type="success" @click="next()">下一页</el-button><el-button type="success" @click="scaleD()">放大</el-button><el-button type="success" @click="scaleX()">缩小</el-button><el-button type="success" @click="clockwise()">顺时针</el-button><el-button type="success" @click="antiClockwise()">逆时针</el-button><el-button type="success" @click="print()">打印</el-button></div><div class="pdf"><pdfref="pdf":src="src":page="currentPage":rotate="pageRotate"@num-pages="pageCount = $event"@page-loaded="currentPage = $event"@loaded="loadPdfHandler"></pdf></div><div class="page"><span class="pageNum">{{ currentPage }}</span><span class="pageNum">/</span><span class="pageNum">{{ pageCount }}</span></div></div></div></el-dialog></template>

2.js相关代码

    click() {this.isShow= trueconst name = this.file.name.substr(0, this.file.name.lastIndexOf('.'))// http://10.20.61.94:81/dev-api/seal/batchStamp/download?filePath=/ofd/20220509/f7cc4fdb82431d356e8145fdd483405fb5043a9d.ofd&remotePath=N/A&fileName=0const baseURL = process.env.VUE_APP_BASE_APIconst baseUrl = baseURL + '/seal/batchStamp/download' + '?filePath=' + encodeURI(this.file.fileSignPath) + '&remotePath=' + 'N/A' + '&fileName=' + name//const baseUrl = baseURL + '/seal/batchStamp/download' + '?filePath=' + encodeURI('/ofd/20220509/f7cc4fdb82431d356e8145fdd483405fb5043a9d.ofd') + '&remotePath=' + 'N/A' + '&fileName=' + '0'var xhr = new XMLHttpRequest()xhr.open('get', baseUrl, true) // get、post都可xhr.responseType = 'blob' // 转换流xhr.setRequestHeader('Authorization', 'Bearer ' + getToken()) // token键值对let that = thisxhr.onload = function() {if (this.status == 200) {var blob = this.responsethat.src = window.URL.createObjectURL(blob)// const binaryData = [];// binaryData.push(this.response);// let url = window.URL.createObjectURL(new Blob(binaryData, {type: 'application/pdf'}));// that.src = url}}xhr.send()},// pdf加载时loadPdfHandler(e) {this.currentPage = 1; // 加载的时候先加载第一页this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";this.$refs.pdf.$el.style.height = parseInt(this.scale) + "%";},//  上一页prev() {if (this.currentPage > 1) {this.currentPage--;}},// 下一页next() {if (this.currentPage < this.pageCount) {this.currentPage++;}},//放大scaleD() {if(this.scale == 100) return this.$message.warning('已经是最大喽~~')this.scale += 10;this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";this.$refs.pdf.$el.style.height = parseInt(this.scale) + "%";},//缩小scaleX() {if(this.scale == 40) return this.$message.warning('已经是最小喽~~')this.scale += -10;this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";this.$refs.pdf.$el.style.height = parseInt(this.scale) + "%";},// 顺时针clockwise() {this.pageRotate += 90;},// 逆时针antiClockwise() {this.pageRotate -= 90;},print() {this.$refs.pdf.print()},

注意啦：如果想预览带电子签章的pdf，还需改一些代码：

1.找到node_modules/pdfjs-dist/build/pdf.worker.js注释一行代码

2.找到node_modules/pdfjs-dist/es5/pdf.worker.js注释一行代码

注意，注意！！！

预览pdf时，总会遇到pdf中的中文无法显示的问题，多见于票据、合同之类的pdf,如何解决这个问题，以下为解决办法：

1.复制cmap文件到/static，直接引用。

this.url= pdf.createLoadingTask({ url: 'http://localhost/11.pdf',cMapUrl: '../../../../static/cmaps/', cMapPacked: true})

cmap的路径为：node_modules\vue-pdf\node_modules\pdfjs-dist\cmaps

但是这种方式我貌似没试成功，或许还是因为我的pdfjs-dist的版本问题

2.访问固定的cMap地址

但是这样，如果内网环境下是无法访问的，访问这个官网，也没提供下载功能，所以我觉得可以按照这个版本，下载对应的pdfjs-dist,然后再引入对应的cMap，或许就可以啦

ps:为了避免高版本语法的不兼容性，可以使用无草案版本的pdfjs-dist：2.0.943

vue-pdf实现预览pdf文件以及含有电子印章的pdf文件相关推荐

vue3中将base64的pdf文件流转换成pdf并预览（三）——base64数据转pdf pdf工具栏不显示 vue3-seamless-scroll组件的使用-事件捕获给接口追加数据
vue3中将base64的pdf文件流转换成pdf并预览(三)--接口base64数据转pdf的处理 & pdf工具栏不显示 & vue3-seamless-scroll组件的使用-事 ...
搭建自己的pdf在线预览工具
文章首发于我的个人博客 1.前言在日常工作学习过程中,我们常常将自己的学习笔记和成果记录下来, 之后想通过网络将这些资料分享给其他人.如果你有个人博客,那么可以将你的总结用markdown写下来 ...
❤️强烈推荐！Word、Excel、PPT、PDF在线预览解决方案
大家好,我是锋哥: 平时大伙开发项目的时候,经常遇到业务需求Word.Excel.PPT.PDF在线预览功能: 市面上这方面的解决方案也有一些,不做过多评价.今天主要推荐的是一个特定提前下的永久免费解 ...
vue项目中预览pdf文件
一.利用浏览器自带的预览pdf // [pdfUrl] 获取pdf地址 eg:http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pl ...
vue中将base64的pdf文件流转换成pdf并预览（二）——base64转PDF工具的使用
vue中将base64的pdf文件流转换成pdf并预览(二)--base64转PDF工具的使用 Base64 to PDF官网 1.官网官网--https://www.ipvoid.com/base ...
vue中将base64的pdf文件流转换成pdf并预览（一）——vue-pdf组件的基本使用
vue中将base64的pdf文件流转换成pdf并预览(一)--vue-pdf组件的基本使用 vue-pdf组件官网--https://www.npmjs.com/package/vue-pdf 1. ...
在线文件（Word、Excel、PPT、PDF）预览
Go File View 是基于 Golang 的在线文件(Word.Excel.PPT.PDF)预览程序,受 kkFileView 启发并基于其 Web 前端开发. 使用spring boot打造文 ...
预览word，excel，ppt，pdf、图片————使用vue实现
预览word,excel,ppt,pdf.图片----使用vue实现需要下载的依赖: template模板实现: 方法的实现: 需要下载的依赖: npm i xlsx // 预览excel插件 np ...
Vue Cli项目使用PDF.js预览pdf无法访问到viewer.html
今天在开发移动端项目中有个需求是手机端预览pdf,ios可以直接在浏览器预览,安卓不行,所以使用pdf.js来解决,之前项目用过该插件很好用,但是今天使用的时候发现根本没有访问到viewer.html ...

vue-pdf实现预览pdf文件以及含有电子印章的pdf文件

vue-pdf实现预览pdf文件以及含有电子印章的pdf文件相关推荐

最新文章

热门文章