|
|
@@ -0,0 +1,231 @@
|
|
|
+<template>
|
|
|
+ <!--使用 pdfvuer 实现 滑动浏览 单印章-->
|
|
|
+ <div class="pdf">
|
|
|
+ <div id="contentArea" class="show">
|
|
|
+ <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%"
|
|
|
+ >
|
|
|
+ <!-- <template slot="loading"> loading content here... </template> -->
|
|
|
+ </pdf>
|
|
|
+ </div>
|
|
|
+ <!-- <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, // 输入的页码
|
|
|
+ loading: null,
|
|
|
+ scale: "page-width",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.loading = this.$loading.service({
|
|
|
+ background: "rgba(255, 255, 255, 0.7)",
|
|
|
+ target: document.querySelector(".pdf"),
|
|
|
+ });
|
|
|
+ this.getPdf();
|
|
|
+ },
|
|
|
+ beforeDestroy() {},
|
|
|
+ watch: {
|
|
|
+ pdfUrl: function (s) {
|
|
|
+ this.loading = this.$loading.service({
|
|
|
+ background: "rgba(255, 255, 255, 0.7)",
|
|
|
+ target: document.querySelector(".pdf"),
|
|
|
+ });
|
|
|
+ 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.loading.close();
|
|
|
+ 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>
|
|
|
+.pdf {
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.pdf .show {
|
|
|
+ /* overflow: auto; */
|
|
|
+ margin: auto;
|
|
|
+ width: 100%;
|
|
|
+ /* height: calc(100%); */
|
|
|
+ /* max-height: 100%; */
|
|
|
+ /* min-height: 100%; */
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.pdf .show .p-pdf {
|
|
|
+ /* width: calc(100% / 5 - 60px); */
|
|
|
+ width: 100%;
|
|
|
+ /* overflow: hidden; */
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ /* margin-bottom: 50px; */
|
|
|
+ /* margin: 25px; */
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.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>
|
