Commit 4e5731ce authored by miaojiale's avatar miaojiale

修改ppt

parent 4889a722
......@@ -86,6 +86,7 @@
<script>
import { loginRSA } from "@/config/settings"
import { getAccessToken } from "@/utils/accessToken"
import { mapGetters } from "vuex"
import { encrypt, decrypt } from "@/utils/encryption"
export default {
data() {
......@@ -135,11 +136,15 @@ export default {
},
],
},
allianceToken: "",
currentRoute: this.$route.path,
userInfo: {},
}
},
computed: {
...mapGetters({
allianceToken: ["user/accessToken"],
}),
},
watch: {
$route: {
handler(v) {
......@@ -147,12 +152,13 @@ export default {
},
deep: true,
},
allianceToken(v) {},
},
mounted() {
// if (localStorage.getItem('allianceToken')) {
// this.$router.push('/datacenter/home')
// }
this.allianceToken = getAccessToken()
// this.allianceToken = getAccessToken()
this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
},
methods: {
......
import * as PDFJS from "pdfjs-dist/build/pdf"
export async function loadPDF({ el, fileSrc, scale }, call) {
PDFJS.GlobalWorkerOptions.workerSrc = require("./pdf.worker.entry.js")
let loadingTask = await PDFJS.getDocument({
url: fileSrc,
withCredentials: true, // 允许携带cookie
})
loadingTask.promise.then((pdf) => {
// 开始加载任务
document.getElementById("pdfEle").innerHTML = ""
const renderPage = (num) => {
let pdfCol = document.querySelector(el)
// 遍历每一页PDF
pdf.getPage(num).then(async (page) => {
let viewPort = page.getViewport({ scale: scale }) // 获取PDF尺寸
let div = document.createElement("div") // 用于存放canvas
div.id = `canvasBox_${num}`
div.className = "canvas-box"
div.style.position = "relative"
div.style.width = viewPort.width + "px"
div.style.margin = "0 auto"
let canvas = document.createElement("canvas") // 创建canvas
let context = canvas.getContext("2d")
// 将canvas的宽和高设置为与PDF视图一样大小
canvas.height = viewPort.height
canvas.width = viewPort.width
// setTimeout(() => {
// // 画页码
// context.font = "14px orbitron";
// context.fillStyle = "#333";
// context.save();
// context.beginPath();
// context.line = 2;
// context.textAlign = "center";
// context.textBaseline = "middle";
// // context.fillText(`${i}`, viewPort.width / 2, viewPort.height - 30);
// context.restore();
// context.closePath();
// }, 500);
let renderContext = {
canvasContext: context,
viewport: viewPort,
}
// 该函数返回一个当PDF页面成功渲染到界面上时解析的`promise`,我们可以使用成功回调来渲染文本图层。
await page.render(renderContext) // 初始化文本图层
canvas.className = "canvas"
canvas.id = `canvas_${num}`
call({
div: div,
pdfCol: pdfCol,
canvas: canvas,
context: context,
scale: scale,
index: num,
allPage: pdf.numPages,
})
div.appendChild(canvas) // 将canvas放进对应的div中
pdfCol.appendChild(div) // 将每一个div放到外面的大盒子中
num++
if (num <= pdf.numPages) {
// console.log(num, pdf.numPages);
renderPage(num)
}
})
}
renderPage(1)
})
}
/* Copyright 2020 Mozilla Foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
(typeof window !== "undefined"
? window
: {}
).pdfjsWorker = require("./pdf.worker.js");
This diff is collapsed.
......@@ -15,7 +15,7 @@
<div class="title">{{ curPdf.articleTitle }}</div>
<div class="refuteList">
<!-- <pdf :src="pdfSrc"></pdf> -->
<pdf-view ref="pdfView" :pdf-src="pdfSrc"></pdf-view>
<pdf-view ref="pdfView" :pdfUrl="pdfSrc"></pdf-view>
</div>
</div>
</el-dialog>
......@@ -58,7 +58,7 @@ export default {
margin-bottom: 30px;
}
.refuteList {
height: 600px;
// height: 600px;
overflow: auto;
}
}
......
<template>
<div id="editor">
<div v-loading="loadingPdf" class="pdfEle_wrap">
<div id="pdfEle"></div>
</div>
<!-- 页码 -->
<div class="pdf-render-pager">
<div class="prev-next" @click="goPrevPdf">
<i class="el-icon-arrow-left"></i>
</div>
<input
v-model="curPage"
type="text"
title="输入页码后按enter即可跳至目标页"
style="border: 1px solid #ccc; position: relative; z-index: 9999"
@keyup.enter="handleChangePage"
/>
<div class="middle">/</div>
<div class="totalPage">{{ totalPage }}</div>
<div class="prev-next" @click="goNextPdf">
<i class="el-icon-arrow-right"></i>
</div>
</div>
<div class="pdf" v-loading="loading">
<pdf v-for="i in numPages" :key="i" :src="laoclUrl" :page="i"></pdf>
</div>
</template>
<script>
import { loadPDF } from "@/utils/loadPdf.js"
/* eslint-disable */
import pdf from "vue-pdf"
export default {
name: "index",
props: {
pdfSrc: String,
// 当前pdf的路径
pdfUrl: {
type: String,
default: "",
},
},
components: {
pdf,
},
data() {
return {
totalPage: 1,
curPage: 1,
loadingPdf: false,
canvasH: 0,
scrollEle: "", //元素画布
clickFlag: true, //左右跳转
timeout: null,
loading: false,
// 当前页数
numPages: 1,
// 预览路径
laoclUrl: "",
}
},
mounted() {},
watch: {},
computed: {},
created() {
this.laoclUrl = this.pdfUrl
},
mounted() {
this.getNumPages()
},
methods: {
loadPDF() {
document.getElementById("pdfEle").innerHTML = ""
this.canvasH = 0 //高度初始化为0 以此控制分页不显示
this.curPage = 1 //页码重置为1
this.loadingPdf = true
if (process.env.NODE_ENV == "development") {
loadPDF(
// 特约讲师合作协议
{ el: "#pdfEle", fileSrc: "/ppt的pdf.pdf", scale: 1 },
this.callBackPdf
)
} else {
loadPDF(
{ el: "#pdfEle", fileSrc: this.pdfSrc, scale: 1 },
this.callBackPdf
)
}
},
// 加载完成的回调 分页加载
callBackPdf(item) {
const { index, allPage } = item
if (index !== allPage) {
return
}
// console.log(allPage);
this.totalPage = item.allPage
this.scrollEle = document.querySelector(".pdfEle_wrap")
// this.canvasH = item.canvas.height;
setTimeout(() => {
this.canvasH = item.div.offsetHeight
}, 100)
this.scrollEle.addEventListener("scroll", (e) => {
if (this.timeout != null) {
clearTimeout(this.timeout)
}
this.timeout = setTimeout(() => {
if (Math.floor(this.scrollEle.scrollTop / this.canvasH) == 0) {
this.curPage = 1
}
if (
Math.floor(this.scrollEle.scrollTop / this.canvasH) > 0 &&
Math.floor(this.scrollEle.scrollTop / this.canvasH) + 1 !=
this.curPage
) {
this.curPage =
Math.floor(this.scrollEle.scrollTop / this.canvasH) + 1
}
}, 100)
// this.curPage = Math.floor(this.scrollEle.scrollTop / this.canvasH) <= 0? 1: Math.floor(this.scrollEle.scrollTop / this.canvasH);
})
this.loadingPdf = false
},
goPrevPdf() {
// 限制一下多次点击
if (!this.clickFlag) {
return false
}
this.clickFlag = false
if (this.curPage > 1) {
// --this.curPage;
this.scrollPdfPage(parseInt(this.curPage) - 1)
--this.curPage
}
setTimeout(() => {
this.clickFlag = true
}, 500)
},
goNextPdf() {
// 限制一下多次点击
if (!this.clickFlag) {
return false
}
this.clickFlag = false
if (this.curPage < this.totalPage) {
// ++this.curPage;
this.scrollPdfPage(parseInt(this.curPage) + 1)
++this.curPage
}
setTimeout(() => {
this.clickFlag = true
}, 500)
},
handleChangePage(e) {
if (!/^\d+$/.test(e.target.value)) {
this.curPage = 1
} else {
// this.curPage = parseInt(e.target.value) > 0 ? parseInt(e.target.value) : 1;
if (parseInt(e.target.value) <= 0) {
this.curPage = 1
} else if (parseInt(e.target.value) > this.totalPage) {
this.curPage = this.totalPage
} else {
this.curPage = parseInt(e.target.value)
}
}
this.scrollPdfPage(this.curPage)
},
// pdf滚动
scrollPdfPage(page) {
console.log(this.scrollEle)
this.scrollEle.scrollTo({
top: this.canvasH * (page - 1),
behavior: "smooth",
})
getNumPages() {
this.loading = true
let loadingTask = pdf.createLoadingTask(this.laoclUrl)
// 网上查询 都没有加promise执行的整页渲染 emmmm... 不知道他们怎么运行的
loadingTask.promise
.then((pdf) => {
// this.laoclUrl = loadingTask
this.numPages = pdf.numPages
this.loading = false
})
.catch((err) => {
console.error("pdf加载失败")
})
},
},
}
</script>
<style lang="scss" scoped>
#editor {
height: 600px;
}
.pdf-render-pager {
width: 100%;
color: #333;
font-size: 12px;
height: 50px;
padding: 0 15px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
// box-shadow: 0 -1px 0px 0 rgba(149, 149, 149, 0.25);
bottom: 0px;
left: 0;
z-index: 9999;
input {
width: 26px;
border: none;
border-bottom: 1px solid #e4e4e4;
text-align: center;
font-size: 14px;
}
}
.pdfEle_wrap {
width: 100%;
height: 600px;
padding: 20px 0;
min-height: 50px;
overflow-y: scroll;
overflow-x: hidden;
// text-align:center;
position: relative;
transition: all 0.3s;
background: #e4e4e4;
#pdfEle {
height: 600px;
}
}
.prev-next {
cursor: pointer;
width: 20px;
height: 20px;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
}
.middle {
margin: 0 8px;
}
</style>
<style lang="scss" scoped></style>
......@@ -1143,6 +1143,11 @@
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==
"@types/json-schema@^7.0.8":
version "7.0.11"
resolved "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
"@types/liftoff@^2.5.0":
version "2.5.0"
resolved "https://registry.yarnpkg.com/@types/liftoff/-/liftoff-2.5.0.tgz#aa5f030ae0952d1b86225f3e9f27f6d5b69714aa"
......@@ -1757,7 +1762,7 @@ ajv-keywords@^3.1.0, ajv-keywords@^3.4.1, ajv-keywords@^3.5.2:
resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4:
ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5:
version "6.12.6"
resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
......@@ -2162,6 +2167,11 @@ babel-plugin-polyfill-regenerator@^0.1.2:
dependencies:
"@babel/helper-define-polyfill-provider" "^0.1.5"
babel-plugin-syntax-dynamic-import@^6.18.0:
version "6.18.0"
resolved "https://registry.npmmirror.com/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da"
integrity sha512-MioUE+LfjCEz65Wf7Z/Rm4XCP5k2c+TbMd2Z2JKc7U9uwjBhAfNPE48KC4GTGKhppMeYVepwDBNO/nGY6NYHBA==
babel-runtime@6.x, babel-runtime@^6.9.2:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
......@@ -6521,6 +6531,15 @@ loader-utils@^0.2.16:
json5 "^0.5.0"
object-assign "^4.0.1"
loader-utils@^1.0.0:
version "1.4.2"
resolved "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz#29a957f3a63973883eb684f10ffd3d151fec01a3"
integrity sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==
dependencies:
big.js "^5.2.2"
emojis-list "^3.0.0"
json5 "^1.0.1"
loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
......@@ -7977,10 +7996,10 @@ pbkdf2@^3.0.3:
safe-buffer "^5.0.1"
sha.js "^2.4.8"
pdfjs-dist@2.5.207:
version "2.5.207"
resolved "https://registry.npmmirror.com/pdfjs-dist/-/pdfjs-dist-2.5.207.tgz#b5e8c19627be64269cd3fb6df3eaaf45ddffe7b6"
integrity sha512-xGDUhnCYPfHy+unMXCLCJtlpZaaZ17Ew3WIL0tnSgKFUZXHAPD49GO9xScyszSsQMoutNDgRb+rfBXIaX/lJbw==
pdfjs-dist@2.6.347:
version "2.6.347"
resolved "https://registry.npmmirror.com/pdfjs-dist/-/pdfjs-dist-2.6.347.tgz#f257ed66e83be900cd0fd28524a2187fb9e25cd5"
integrity sha512-QC+h7hG2su9v/nU1wEI3SnpPIrqJODL7GTDFvR74ANKGq1AFJW16PH8VWnhpiTi9YcLSFV9xLeWSgq+ckHLdVQ==
performance-now@^2.1.0:
version "2.1.0"
......@@ -8785,6 +8804,14 @@ raw-body@2.4.0:
iconv-lite "0.4.24"
unpipe "1.0.0"
raw-loader@^4.0.2:
version "4.0.2"
resolved "https://registry.npmmirror.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==
dependencies:
loader-utils "^2.0.0"
schema-utils "^3.0.0"
raw-loader@~0.5.1:
version "0.5.1"
resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa"
......@@ -9232,6 +9259,14 @@ sax@~1.2.4:
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
schema-utils@^0.4.0:
version "0.4.7"
resolved "https://registry.npmmirror.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"
integrity sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==
dependencies:
ajv "^6.1.0"
ajv-keywords "^3.1.0"
schema-utils@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
......@@ -9250,6 +9285,15 @@ schema-utils@^2.0.0, schema-utils@^2.5.0, schema-utils@^2.6.1, schema-utils@^2.6
ajv "^6.12.4"
ajv-keywords "^3.5.2"
schema-utils@^3.0.0:
version "3.1.1"
resolved "https://registry.npmmirror.com/schema-utils/-/schema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281"
integrity sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==
dependencies:
"@types/json-schema" "^7.0.8"
ajv "^6.12.5"
ajv-keywords "^3.5.2"
screenfull@^5.0.2:
version "5.1.0"
resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-5.1.0.tgz#85c13c70f4ead4c1b8a935c70010dfdcd2c0e5c8"
......@@ -10840,6 +10884,23 @@ vue-observe-visibility@^0.4.4:
resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz#878cb8ebcf3078e40807af29774e97105ebd519e"
integrity sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q==
vue-pdf@^4.3.0:
version "4.3.0"
resolved "https://registry.npmmirror.com/vue-pdf/-/vue-pdf-4.3.0.tgz#d5f790ee7967e7b7aa9089b97b11ab168e19dbd0"
integrity sha512-zd3lJj6CbtrawgaaDDciTDjkJMUKiLWtbEmBg5CvFn9Noe9oAO/GNy/fc5c59qGuFCJ14ibIV1baw4S07e5bSQ==
dependencies:
babel-plugin-syntax-dynamic-import "^6.18.0"
loader-utils "^1.4.0"
pdfjs-dist "2.6.347"
raw-loader "^4.0.2"
vue-resize-sensor "^2.0.0"
worker-loader "^2.0.0"
vue-resize-sensor@^2.0.0:
version "2.0.0"
resolved "https://registry.npmmirror.com/vue-resize-sensor/-/vue-resize-sensor-2.0.0.tgz#3a587fd6802e1688709cf2c5aadae7a0075952bf"
integrity sha512-W+y2EAI/BxS4Vlcca9scQv8ifeBFck56DRtSwWJ2H4Cw1GLNUYxiZxUHHkuzuI5JPW/cYtL1bPO5xPyEXx4LmQ==
vue-resize@^0.4.5:
version "0.4.5"
resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.5.tgz#4777a23042e3c05620d9cbda01c0b3cc5e32dcea"
......@@ -11143,6 +11204,14 @@ worker-farm@^1.7.0:
dependencies:
errno "~0.1.7"
worker-loader@^2.0.0:
version "2.0.0"
resolved "https://registry.npmmirror.com/worker-loader/-/worker-loader-2.0.0.tgz#45fda3ef76aca815771a89107399ee4119b430ac"
integrity sha512-tnvNp4K3KQOpfRnD20m8xltE3eWh89Ye+5oj7wXEEHKac1P4oZ6p9oTj8/8ExqoSBnk9nu5Pr4nKfQ1hn2APJw==
dependencies:
loader-utils "^1.0.0"
schema-utils "^0.4.0"
wrap-ansi@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment