|
|
@@ -0,0 +1,252 @@
|
|
|
+<template>
|
|
|
+ <!--使用 pdfvuer 实现 滑动浏览 单印章-->
|
|
|
+ <div class="pdf">
|
|
|
+ <div class="loading" v-show="isloading">
|
|
|
+ <span>pdf可能会加载时间有点长，请耐心等待...</span>
|
|
|
+ </div>
|
|
|
+ <!-- <div id="contentArea" class="show" v-if="!loading">
|
|
|
+ <pdf :scale.sync="scale" :resize="true" ref="wrapper" class="p-pdf" :src="pdfData" v-for="i in numPages" :key="i"
|
|
|
+ :id="i" :page="i" style="width: 100%">
|
|
|
+ </pdf>
|
|
|
+ </div> -->
|
|
|
+ <iframe ref="viframe" style="width: 100%; height: 99%; border: none"
|
|
|
+ :src="'https://cloud.cocorobo.cn/pdf.js/web/viewer.html?file=' + pdfUrl"></iframe>
|
|
|
+ <!-- <div class="rightArea">
|
|
|
+ <div class="toolGroup">
|
|
|
+ <div class="page">第 {{ page }} / {{ numPages }} 页</div>
|
|
|
+ <el-button type="primary" @click.stop="prePage">上一页</el-button>
|
|
|
+ <el-button type="primary" @click.stop="nextPage">下一页</el-button>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// import pdfvuer from "pdfvuer"; // pdfvuer 版本为@1.6.1
|
|
|
+// import "pdfjs-dist/build/pdf.worker.entry";
|
|
|
+// const PDF = require("pdfjs-dist");
|
|
|
+// PDF.GlobalWorkerOptions.workerSrc = "../../common/pdf.worker.js";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "Pdfvuer",
|
|
|
+ components: {
|
|
|
+ // pdf: pdfvuer,
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ // 当前pdf路径
|
|
|
+ pdfUrl: {
|
|
|
+ type: String,
|
|
|
+ default:
|
|
|
+ "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0629%E5%AE%9E%E6%97%B6%E8%AF%BE%E5%A0%82%E6%A8%A1%E6%8B%9F%E6%BC%94%E7%A4%BA%E8%AF%BE%E4%BB%B61656920880446.pdf",
|
|
|
+ },
|
|
|
+ ppage: {
|
|
|
+ type: Number,
|
|
|
+ default: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ page: 1, // 当前页
|
|
|
+ numPages: 0, // 总页数
|
|
|
+ pdfData: undefined,
|
|
|
+ inputPage: 1, // 输入的页码
|
|
|
+ isloading: false,
|
|
|
+ scale: "page-width",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // this.isloading = this.$loading.service({
|
|
|
+ // background: "rgba(255, 255, 255, 0.7)",
|
|
|
+ // target: document.querySelector(".loading"),
|
|
|
+ // text: "加载中...",
|
|
|
+ // spinner: "",
|
|
|
+ // });
|
|
|
+ this.isloading = false;
|
|
|
+ this.$refs.viframe.onload = function () {
|
|
|
+ this.isloading = false
|
|
|
+ }
|
|
|
+ console.log(this.isloading);
|
|
|
+ // this.getPdf();
|
|
|
+ },
|
|
|
+ beforeDestroy() { },
|
|
|
+ watch: {
|
|
|
+ pdfUrl: function (s) {
|
|
|
+ // this.isloading = this.$loading.service({
|
|
|
+ // background: "rgba(255, 255, 255, 0.7)",
|
|
|
+ // target: document.querySelector(".loading"),
|
|
|
+ // text: "加载中...",
|
|
|
+ // spinner: "",
|
|
|
+ // });
|
|
|
+ this.isloading = false;
|
|
|
+ this.$refs.viframe.onload = function () {
|
|
|
+ this.isloading = false
|
|
|
+ }
|
|
|
+ // this.getPdf();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取 pdf 信息
|
|
|
+ getPdf() {
|
|
|
+ this.pdfData = pdfvuer.createLoadingTask({
|
|
|
+ url: this.pdfUrl,
|
|
|
+ cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.16.105/cmaps/",
|
|
|
+ cMapPacked: true,
|
|
|
+ });
|
|
|
+ this.pdfData
|
|
|
+ .then((pdf) => {
|
|
|
+ // this.isloading.close();
|
|
|
+ this.isloading = false
|
|
|
+ this.numPages = pdf.numPages;
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 上一页
|
|
|
+ prePage() {
|
|
|
+ let page = this.page;
|
|
|
+ page = page > 1 ? page - 1 : 1;
|
|
|
+ this.page = page;
|
|
|
+ },
|
|
|
+ // 下一页
|
|
|
+ nextPage() {
|
|
|
+ let page = this.page;
|
|
|
+ page = page < this.numPages ? page + 1 : this.numPages;
|
|
|
+ this.page = page;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.loading {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ /* background: #000; */
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ /* background-color: rgba(255, 255, 255, 0.7); */
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ z-index: 9;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #007fff;
|
|
|
+}
|
|
|
+
|
|
|
+.pdf {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow-x: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.pdf .show {
|
|
|
+ margin: auto;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.pdf .show .p-pdf {
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.pdf .show .p-pdf .line {
|
|
|
+ position: absolute;
|
|
|
+ width: 50px;
|
|
|
+ right: -50px;
|
|
|
+ background: rgb(255, 186, 96);
|
|
|
+ height: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.pdf .show .p-pdf span {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.pdf .show .p-pdf span+span {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.pdfbox {
|
|
|
+ /* border: 3px solid #000; */
|
|
|
+ /* box-sizing: border-box; */
|
|
|
+ /* border-radius: 4px; */
|
|
|
+ /* overflow: hidden; */
|
|
|
+}
|
|
|
+
|
|
|
+.pdf .pdf_footer {
|
|
|
+ position: sticky;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ padding: 10px 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 75px;
|
|
|
+ background-color: rgba(255, 255, 255, 0.5);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.pdf .pdf_footer .info {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.pdf .p-pdf .viewerContainer {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+/* .pdf .pdf_footer .info div {
|
|
|
+ width: 30%;
|
|
|
+} */
|
|
|
+.pdf .pdf_footer .operate {
|
|
|
+ margin: 10px 0 0;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.pdf .pdf_footer .operate div {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.pdf .pdf_footer .operate .btn {
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 5px 10px;
|
|
|
+ width: 100px;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 5px;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #066ebe;
|
|
|
+}
|
|
|
+
|
|
|
+.pdf::-webkit-scrollbar {
|
|
|
+ /*滚动条整体样式*/
|
|
|
+ width: 6px;
|
|
|
+ /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
+ height: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+/*定义滚动条轨道 内阴影+圆角*/
|
|
|
+.pdf::-webkit-scrollbar {
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: #b8bdc9;
|
|
|
+}
|
|
|
+
|
|
|
+/*定义滑块 内阴影+圆角*/
|
|
|
+.pdf::-webkit-scrollbar-thumb {
|
|
|
+ border-radius: 10px;
|
|
|
+ -webkit-box-shadow: inset 0 0 6px rgb(96, 125, 184);
|
|
|
+ background-color: #2c5ab3;
|
|
|
+}
|
|
|
+</style>
|
