admin管理员组文章数量:1649170
话不多说,上代码~
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">
<pdf
ref="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= true
const 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=0
const baseURL = process.env.VUE_APP_BASE_API
const 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 = this
xhr.onload = function() {
if (this.status == 200) {
var blob = this.response
that.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,但是此版本不支持显示PDF文件中的印章图片
版权声明:本文标题:vue-pdf实现预览pdf文件以及含有电子印章的pdf文件 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1729505004a1203525.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论