<template>
<div class="h5pdf">
<div class="ljsx" v-if="!isSX">
<img class="ljsxtp" src="../../assets/h5sj/ljsx.png">
<div class="ljsxwz" v-html="yctip">
</div>
</div>
<div v-if="isSX">
<div class="catips">
<div class="catipswz">{{pdfToptips}}</div>
</div>
<canvas class="cvs" ref="img" :id="'the-canvas'+this.page" :key="this.page">></canvas>
<img class="img" :src="imgSrc">
<footer>
<el-button class="syyBut"
@click="subpage">上一页
</el-button>
<el-button class="ymxs">{{this.page+'/'+this.pdfList}}
</el-button>
<el-button class="xyyBut"
@click="addpage">下一页
</el-button>
</footer>
</div>
</div>
</template>
<script>
// eslint-disable-next-line import/no-duplicates
import PDFJS from 'pdfjs-dist'
// eslint-disable-next-line import/no-duplicates
import pdfjsLib from 'pdfjs-dist'
import html2canvas from 'html2canvas'
// eslint-disable-next-line no-unused-vars
import { zrrJfqdEwmPDF } from '../../api/jfzm/jfzm-api'
export default {
data () {
return {
pdfDoc: null,
pdfList: 0,
page: 1,
is_img_show: false,
imgSrc: null,
isEnlarge: false,
enlargeWidth: screen.availWidth,
isSX: false,
base64StrPDF: 'JVBERi0xLjMKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQgMSAwIFIKL1Jlc291cmNlcyAyIDAgUgovTWVkaWFCb3ggWzAgMCA1OTUuMjggODQxLjg5XQovQ29udGVudHMgNCAwIFI+PgplbmRvYmoKNCAwIG9iago8PC9MZW5ndGggMjcxPj4Kc3RyZWFtCjAuNTcgdwowIEcKQlQKL0YxIDE2IFRmCjE4LjQgVEwKMCBnCjU2LjY5IDc4NS4yMCBUZAooT2BZfQAgAEgAZQBsAGwAbwAgAHcAbwByAGwAZAAhKSBUagpFVApCVAovRjEgMTYgVGYKMTguNCBUTAowIGcKMTQxLjczIDc4NS4yMCBUZAooT2BZfQAgAEgAZQBsAGwAbwAgAHcAbwByAGwAZAAhKSBUagpFVApCVAovRjEgMTYgVGYKMTguNCBUTAowIGcKNTYuNjkgNzU2Ljg1IFRkCihUaGlzIGlzIGNsaWVudC1zaWRlIEphdmFzY3JpcHQsIHB1bXBpbmcgb3V0IGEgUERGLikgVGoKRVQKZW5kc3RyZWFtCmVuZG9iago1IDAgb2JqCjw8L1R5cGUgL1BhZ2UKL1BhcmVudCAxIDAgUgovUmVzb3VyY2VzIDIgMCBSCi9NZWRpYUJveCBbMCAwIDU5NS4yOCA4NDEuODldCi9Db250ZW50cyA2IDAgUj4+CmVuZG9iago2IDAgb2JqCjw8L0xlbmd0aCA3Nz4+CnN0cmVhbQowLjU3IHcKMCBHCkJUCi9GMSAxNiBUZgoxOC40IFRMCjAgZwo1Ni42OSA3ODUuMjAgVGQKKERvIHlvdSBsaWtlIHRoYXQ/KSBUagpFVAplbmRzdHJlYW0KZW5kb2JqCjEgMCBvYmoKPDwvVHlwZSAvUGFnZXMKL0tpZHMgWzMgMCBSIDUgMCBSIF0KL0NvdW50IDIKPj4KZW5kb2JqCjcgMCBvYmoKPDwvQmFzZUZvbnQvSGVsdmV0aWNhL1R5cGUvRm9udAovRW5jb2RpbmcvV2luQW5zaUVuY29kaW5nCi9TdWJ0eXBlL1R5cGUxPj4KZW5kb2JqCjggMCBvYmoKPDwvQmFzZUZvbnQvSGVsdmV0aWNhLUJvbGQvVHlwZS9Gb250Ci9FbmNvZGluZy9XaW5BbnNpRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKOSAwIG9iago8PC9CYXNlRm9udC9IZWx2ZXRpY2EtT2JsaXF1ZS9UeXBlL0ZvbnQKL0VuY29kaW5nL1dpbkFuc2lFbmNvZGluZwovU3VidHlwZS9UeXBlMT4+CmVuZG9iagoxMCAwIG9iago8PC9CYXNlRm9udC9IZWx2ZXRpY2EtQm9sZE9ibGlxdWUvVHlwZS9Gb250Ci9FbmNvZGluZy9XaW5BbnNpRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMTEgMCBvYmoKPDwvQmFzZUZvbnQvQ291cmllci9UeXBlL0ZvbnQKL0VuY29kaW5nL1dpbkFuc2lFbmNvZGluZwovU3VidHlwZS9UeXBlMT4+CmVuZG9iagoxMiAwIG9iago8PC9CYXNlRm9udC9Db3VyaWVyLUJvbGQvVHlwZS9Gb250Ci9FbmNvZGluZy9XaW5BbnNpRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMTMgMCBvYmoKPDwvQmFzZUZvbnQvQ291cmllci1PYmxpcXVlL1R5cGUvRm9udAovRW5jb2RpbmcvV2luQW5zaUVuY29kaW5nCi9TdWJ0eXBlL1R5cGUxPj4KZW5kb2JqCjE0IDAgb2JqCjw8L0Jhc2VGb250L0NvdXJpZXItQm9sZE9ibGlxdWUvVHlwZS9Gb250Ci9FbmNvZGluZy9XaW5BbnNpRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMTUgMCBvYmoKPDwvQmFzZUZvbnQvVGltZXMtUm9tYW4vVHlwZS9Gb250Ci9FbmNvZGluZy9XaW5BbnNpRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMTYgMCBvYmoKPDwvQmFzZUZvbnQvVGltZXMtQm9sZC9UeXBlL0ZvbnQKL0VuY29kaW5nL1dpbkFuc2lFbmNvZGluZwovU3VidHlwZS9UeXBlMT4+CmVuZG9iagoxNyAwIG9iago8PC9CYXNlRm9udC9UaW1lcy1JdGFsaWMvVHlwZS9Gb250Ci9FbmNvZGluZy9XaW5BbnNpRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMTggMCBvYmoKPDwvQmFzZUZvbnQvVGltZXMtQm9sZEl0YWxpYy9UeXBlL0ZvbnQKL0VuY29kaW5nL1dpbkFuc2lFbmNvZGluZwovU3VidHlwZS9UeXBlMT4+CmVuZG9iagoyIDAgb2JqCjw8Ci9Qcm9jU2V0IFsvUERGIC9UZXh0IC9JbWFnZUIgL0ltYWdlQyAvSW1hZ2VJXQovRm9udCA8PAovRjEgNyAwIFIKL0YyIDggMCBSCi9GMyA5IDAgUgovRjQgMTAgMCBSCi9GNSAxMSAwIFIKL0Y2IDEyIDAgUgovRjcgMTMgMCBSCi9GOCAxNCAwIFIKL0Y5IDE1IDAgUgovRjEwIDE2IDAgUgovRjExIDE3IDAgUgovRjEyIDE4IDAgUgo+PgovWE9iamVjdCA8PAo+Pgo+PgplbmRvYmoKMTkgMCBvYmoKPDwKL1Byb2R1Y2VyIChqc1BERiAxLjAuMjcyLWdpdCAyMDE0LTA5LTI5VDE1OjA5OmRpZWdvY3IpCi9DcmVhdGlvbkRhdGUgKEQ6MjAxNTA1MDgxNjA1NTQrMDgnMDAnKQo+PgplbmRvYmoKMjAgMCBvYmoKPDwKL1R5cGUgL0NhdGFsb2cKL1BhZ2VzIDEgMCBSCi9PcGVuQWN0aW9uIFszIDAgUiAvRml0SCBudWxsXQovUGFnZUxheW91dCAvT25lQ29sdW1uCj4+CmVuZG9iagp4cmVmCjAgMjEKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwNjcwIDAwMDAwIG4gCjAwMDAwMDE4NzcgMDAwMDAgbiAKMDAwMDAwMDAwOSAwMDAwMCBuIAowMDAwMDAwMTE3IDAwMDAwIG4gCjAwMDAwMDA0MzcgMDAwMDAgbiAKMDAwMDAwMDU0NSAwMDAwMCBuIAowMDAwMDAwNzMzIDAwMDAwIG4gCjAwMDAwMDA4MjMgMDAwMDAgbiAKMDAwMDAwMDkxOCAwMDAwMCBuIAowMDAwMDAxMDE2IDAwMDAwIG4gCjAwMDAwMDExMTkgMDAwMDAgbiAKMDAwMDAwMTIwOCAwMDAwMCBuIAowMDAwMDAxMzAyIDAwMDAwIG4gCjAwMDAwMDEzOTkgMDAwMDAgbiAKMDAwMDAwMTUwMCAwMDAwMCBuIAowMDAwMDAxNTkzIDAwMDAwIG4gCjAwMDAwMDE2ODUgMDAwMDAgbiAKMDAwMDAwMTc3OSAwMDAwMCBuIAowMDAwMDAyMTAzIDAwMDAwIG4gCjAwMDAwMDIyMjAgMDAwMDAgbiAKdHJhaWxlcgo8PAovU2l6ZSAyMQovUm9vdCAyMCAwIFIKL0luZm8gMTkgMCBSCj4+CnN0YXJ0eHJlZgoyMzI0CiUlRU9G',
yctip: '',
pdfToptips: '长按可保存图片,如有多张图片请分别长按保存。'
}
},
mounted () {
this.isSX = true
this.initThePDFJSLIB()
this.loadFile(this.base64StrPDF)
},
methods: {
GetQueryString (name) {
if (!name) return null
// 查询参数:先通过search取值,如果取不到就通过hash来取
var after = window.location.search
after = after.substr(1) || window.location.hash.split('?')[1]
// 地址栏URL没有查询参数,返回空
if (!after) return null
// 如果查询参数中没有"name",返回空
if (after.indexOf(name) === -1) return null
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
// 当地址栏参数存在中文时,需要解码,不然会乱码
var r = decodeURI(after).match(reg)
// 如果url中"name"没有值,返回空
if (!r) return null
return r[2]
},
addpage () {
if (this.pdfList > this.page) {
this.page++
this._renderPage(this.page)
this.ztp()
}
},
subpage () {
if (this.page > 1) {
this.page--
this._renderPage(this.page)
this.ztp()
}
},
ztp () {
html2canvas(this.$refs.img).then(canvas => { // html 转 canvas
// canvas转img
this.imgSrc = this.$refs.img.toDataURL('image/png')
if (this.imgSrc !== '') {
this.is_img_show = true
}
})
},
// 初始化pdfjs
initThePDFJSLIB () {
pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js'
},
_renderPage (num) {
this.pdfDoc.getPage(num).then(page => {
let canvas = document.getElementById('the-canvas' + num)
let ctx = canvas.getContext('2d')
let dpr = window.devicePixelRatio || 1
let bsr =
ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio ||
1
let ratio = dpr / bsr
let viewport = page.getViewport(
this.enlargeWidth / page.getViewport(1).width
)
canvas.width = viewport.width * ratio
canvas.height = viewport.height * ratio
canvas.style.width = viewport.width + 'px'
canvas.style.height = viewport.height + 'px'
ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
let renderContext = {
canvasContext: ctx,
viewport: viewport
}
page.render(renderContext)
})
},
loadFile (base64Str) {
PDFJS.getDocument({
data: atob(base64Str),
cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/cmaps/',
cMapPacked: true
}).then(pdf => {
this.pdfDoc = pdf
this.pdfList = this.pdfDoc.numPages
this.$nextTick(() => {
this._renderPage(1)
this.ztp()
})
})
}
}
}
</script>
<style lang="scss">
.h5pdf {
position: absolute;
width: 100%;
height: 100%;
background: #F9FAFB;
.el-button + .el-button {
margin-left: 0.4rem;
}
.el-button:hover{
color: #FFFFFF;
border-color: #1E1E1E;
background-color: #1E1E1E;
}
.ymxs {
background: #1E1E1E;
color: #FFFFFF;
border: none;
font-size: 18px;
}
.syyBut {
background: #1E1E1E;
color: #FFFFFF;
border: none;
font-size: 18px;
margin-top: 0.1rem;
}
.xyyBut {
background: #1E1E1E;
color: #FFFFFF;
border: none;
font-size: 18px;
margin-top: 0.1rem;
}
.cvs {
margin-top: 1rem;
}
.catips {
position: fixed;
top: 0;
width: 100%;
height: 0.35rem;
background: #FEF7DA;
font-size: 13px;
color: #FFA922;
}
.catipswz {
padding-right: 0.16rem;
padding-top: 0.08rem;
padding-bottom: 0.08rem;
}
.ljsx {
margin: 2.32rem auto auto auto;
}
.ljsxwz {
color: #999999;
font-size: 18px;
}
.ljsxtp {
width: 1.58rem;
height: 1.505rem;
}
footer {
position: fixed;
bottom: 0;
z-index: 999;
width: 100%;
height: 0.62rem;
background: #1E1E1E;
opacity: 0.7;
}
canvas {
display: block;
}
.img {
position: absolute;
top: 0.36rem;
left: 0;
opacity: 0;
width: 100%;
height: 85%;
}
}
</style>
前端vue展示PDFbase64
于 2022-07-26 17:34:47 首次发布