查看稳定的版本, 3.x 在vue2.6报错
https://www.jsdelivr.com/package/npm/pdfjs-dist?version=2.16.105
在package.js中加入
"pdfjs-dist": "2.16.105",
注意引入js的方式，使用 import 报错
const pdfjsLib = require("pdfjs-dist/legacy/build/pdf.js");
// 父页面的调用
handleShow(row) {
// window.open(process.env.VUE_APP_FILE + row.url);
// 使用组件页来预览
// this.$router.push({path:'/vpdf', params: {url: process.env.VUE_APP_FILE + row.url}})
// 在新标签页打开
let text = this.$router.resolve({
path: "/vpdf",
query: { url: process.env.VUE_APP_FILE + row.url },
});
window.open(text.href, "_blank");
}
/** vpdf.vue **/
<template>
<div class="home_wrap">
<div class="pdf_down">
<!-- <div class="pdf_set_left" @click="scaleD">放大</div>
<div class="pdf_set_middle" @click="scaleX">缩小</div> -->
</div>
<div
:style="{ width: pdf_div_width, margin: '0 auto' }"
@touchstart="touchstart"
@touchmove="touchmove"
@touchend="touchend"
>
<canvas
v-for="page in pdf_pages"
:id="'the_canvas' + page"
:key="page"
></canvas>
</div>
</div>
</template>
<script>
let PDFJS = require("pdfjs-dist/legacy/build/pdf.js");
PDFJS.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/legacy/build/pdf.worker.entry.js");
export default {
props: {
defaultSacleDelta: {
type: Number,
default: 1.1,
},
maxScale: {
type: Number,
default: 2,
},
minScale: {
type: Number,
default: 0.5,
},
defaultScale: {
type: Number,
default: 1.0,
},
// pdfSrc: {
// type: String,
// default: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'
// }
},
data() {
return {
currentScale: 0.5, //pdf放大系数
pdf_pages: [],
pdf_div_width: "",
startX: 0,
startY: 0,
moveX: 0,
moveY: 0,
eLen: 0,
touchDistance: null,
startTime: null,
previousPinchScale: 1,
renderMode: false,
pdfSrc: "",
};
},
created() {
this.currentScale = this.defaultScale;
},
mounted() {
this.get_pdfurl();
},
methods: {
scaleD() {
//放大
if (this.currentScale >= this.maxScale) {
return;
}
this.currentScale = this.currentScale + 0.1;
this._loadFile(this.pdfSrc);
},
scaleX() {
//缩小
if (this.currentScale <= this.minScale) {
return;
}
this.currentScale = this.currentScale - 0.1;
this._loadFile(this.pdfSrc);
},
get_pdfurl() {
//获得pdf教案
const url = this.$route.query.url;
console.log(url);
this.pdfSrc = url;
//加载本地
this._loadFile(this.pdfSrc);
//线上请求
// this.$axios.get('')
// .then((res)=>{
// this.pdfSrc = res.url
// this._loadFile(this.pdfSrc)
// })
},
_loadFile(url) {
console.log("_loadFile", this.currentScale);
this.renderMode = false;
let loadingTask = PDFJS.getDocument(url);
loadingTask.promise.then((pdf) => {
this.pdfDoc = pdf;
this.pdf_pages = this.pdfDoc.numPages;
this.$nextTick(() => {
this._renderPage(1);
});
});
},
_renderPage(num) {
const that = this;
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({ scale: this.currentScale });
canvas.width = viewport.width * ratio;
canvas.height = viewport.height * ratio;
canvas.style.width = viewport.width + "px";
that.pdf_div_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);
if (this.pdf_pages > num) {
this._renderPage(num + 1);
} else {
this.renderMode = true;
}
});
},
touchstart(e) {
console.log("touchstart");
this.startTime = this._getTime();
this.startX = e.touches[0].pageX;
this.startY = e.touches[0].pageY;
if (e.touches.length > 1) {
let point1 = e.touches[0];
let ponit2 = e.touches[1];
let xLen = Math.abs(ponit2.pageX - point1.pageX);
let yLen = Math.abs(ponit2.pageY - point1.pageY);
this.touchDistance = this._getDistance(xLen, yLen);
console.log("touchDistance", this.touchDistance);
}
},
touchmove(e) {
console.log("touchmove");
this.moveX = e.touches[0].pageX;
this.moveY = e.touches[0].pageY;
this.eLen = e.touches.length;
if (this.eLen > 1) {
let point1 = e.touches[0];
let ponit2 = e.touches[1];
let xLen = Math.abs(ponit2.pageX - point1.pageX);
let yLen = Math.abs(ponit2.pageY - point1.pageY);
let distance = this._getDistance(xLen, yLen);
if (this.touchDistance) {
let pinchScale = distance / this.touchDistance;
this.previousPinchScale = pinchScale > 1 ? pinchScale : 1;
console.log("previousPinchScale", this.previousPinchScale);
}
}
},
touchend() {
console.log("touchend");
let timestamp = this._getTime();
if (
(this.moveX !== null && Math.abs(this.moveX - this.startX > 0)) ||
(this.moveY !== null && Math.abs(this.moveY - this.startY) > 0)
) {
console.log("timeDis", timestamp - this.startTime);
if (timestamp - this.startTime < 1000 && this.eLen > 1) {
console.log("zoom-start");
if (this.previousPinchScale > 1) {
this.zoomIn();
} else {
this.zoomOut();
}
}
this.eLen = 0;
}
},
zoomIn() {
console.log("zoomIn");
console.log("renderMode", this.renderMode);
if (!this.renderMode) return;
let newScale = this.currentScale;
if (newScale < this.maxScale) {
newScale = newScale * this.defaultSacleDelta;
newScale = Math.ceil(newScale * 10) / 10;
if (this.currentScale === newScale) {
newScale += 0.1;
}
newScale = Math.min(this.maxScale, newScale);
this.currentScale = newScale;
console.log(this.currentScale);
this._loadFile(this.pdfSrc);
}
},
zoomOut() {
console.log("zoomOut");
console.log("renderMode", this.renderMode);
if (!this.renderMode) return;
let newScale = this.currentScale;
if (newScale > this.minScale) {
newScale = newScale / this.defaultSacleDelta;
newScale = Math.ceil(newScale * 10) / 10;
if (this.currentScale === newScale) {
newScale -= 0.1;
}
newScale = Math.max(this.minScale, newScale);
this.currentScale = newScale;
console.log(this.currentScale);
this._loadFile(this.pdfSrc);
}
},
_getDistance(xLen, yLen) {
return Math.sqrt(xLen * xLen + yLen * yLen);
},
_getTime() {
return new Date().getTime();
},
},
};
</script>
<style scoped>
.home_wrap {
width: 100%;
height: 100%;
}
.pdf_down {
position: fixed;
display: flex;
z-index: 20;
right: 26px;
bottom: 7%;
}
.pdf_set_left {
width: 30px;
height: 40px;
color: #408fff;
font-size: 11px;
padding-top: 25px;
text-align: center;
margin-right: 5px;
cursor: pointer;
}
.pdf_set_middle {
width: 30px;
height: 40px;
color: #408fff;
font-size: 11px;
padding-top: 25px;
text-align: center;
margin-right: 5px;
cursor: pointer;
}
</style>