pdf

src/components/pages/components/pdf3.vue

@@ -0,0 +1,312 @@
+<template>
+  <div class="pdf">
+    <div class="show">
+      <div v-for="i in numPages" :key="i" class="p-pdf">
+        <pdf :src="pdfUrl" :page="i" class="pdfbox"></pdf>
+        <span>{{i}}</span>
+        <!-- <div class="line"></div> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import pdf from "vue-pdf";
+export default {
+  name: "vue_pdf_preview",
+  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,
+    },
+  },
+  components: {
+    pdf,
+  },
+  data() {
+    return {
+      // 总页数
+      pageTotalNum: 1,
+      // 当前页数
+      pageNum: 1,
+      // 加载进度
+      loadedRatio: 0,
+      // 页面加载完成
+      curPageNum: 0,
+      // 放大系数 默认百分百
+      scale: 69,
+      // 旋转角度 ‘90’的倍数才有效
+      pageRotate: 0,
+      // 单击内部链接时触发 (目前我没有遇到使用场景)
+      page: 0,
+      loading: null,
+      numPages: 0,
+    };
+  },
+  watch: {
+    ppage(val) {
+      this.loading.close();
+      this.pageNum = val;
+    },
+    pageTotalNum(val) {
+      if (val) {
+        this.loading.close();
+      }
+      this.$emit("getPageTotal", val);
+    },
+  },
+  computed: {},
+  created() {},
+  mounted() {
+    this.loading = this.$loading.service({
+      background: "rgba(255, 255, 255, 0.7)",
+      target: document.querySelector(".pdf"),
+    });
+    // this.pageNum = this.ppage;
+    // var a = document.getElementsByClassName("pdf")[0].offsetWidth;
+    // let _this = this;
+    // this.$refs.pdf.$el.style.width =
+    //   document.getElementsByClassName("pdf")[0].offsetHeight * 1.77 + "px";
+    // window.addEventListener("resize", () => {
+    //   this.$refs.pdf.$el.style.width =
+    //     document.getElementsByClassName("pdf")[0].offsetHeight * 1.77 + "px";
+    // });
+    this.reportPreview();
+  },
+  methods: {
+    //下载PDF
+    fileDownload(data, fileName) {
+      let blob = new Blob([data], {
+        //type类型后端返回来的数据中会有，根据自己实际进行修改
+        type: "application/pdf;charset-UTF-8",
+      });
+      let filename = fileName || "pdf.pdf";
+      if (typeof window.navigator.msSaveBlob !== "undefined") {
+        window.navigator.msSaveBlob(blob, filename);
+      } else {
+        var blobURL = window.URL.createObjectURL(blob);
+        // 创建隐藏<a>标签进行下载
+        var tempLink = document.createElement("a");
+        tempLink.style.display = "none";
+        tempLink.href = blobURL;
+        tempLink.setAttribute("download", filename);
+        if (typeof tempLink.download === "undefined") {
+          tempLink.setAttribute("target", "_blank");
+        }
+        document.body.appendChild(tempLink);
+        tempLink.click();
+        document.body.removeChild(tempLink);
+        window.URL.revokeObjectURL(blobURL);
+      }
+    },
+
+    //放大
+    scaleD() {
+      this.scale += 5;
+      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
+    },
+
+    //缩小
+    scaleX() {
+      // scale 是百分百展示 不建议缩放
+      if (this.scale == 100) {
+        return;
+      }
+      this.scale += -5;
+      console.log(parseInt(this.scale) + "%");
+      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
+    },
+    // 切换上一页
+    prePage() {
+      var p = this.pageNum;
+      p = p > 1 ? p - 1 : this.pageTotalNum;
+      this.pageNum = p;
+      this.getPage(p);
+    },
+    // 切换下一页
+    nextPage() {
+      var p = this.pageNum;
+      p = p < this.pageTotalNum ? p + 1 : 1;
+      this.pageNum = p;
+      this.getPage(p);
+    },
+    // 顺时针选中角度
+    clock() {
+      this.pageRotate += 90;
+    },
+    // 逆时针旋转角度
+    counterClock() {
+      this.pageRotate -= 90;
+    },
+    // pdf 有密码 则需要输入秘密
+    password(updatePassword, reason) {
+      updatePassword(prompt('password is "test"'));
+      console.log("...reason...");
+      console.log(reason);
+      console.log("...reason...");
+    },
+    // 页面加载成功  当前页数
+    pageLoaded(e) {
+      this.$emit("current", e);
+      this.curPageNum = e;
+    },
+    // 异常监听
+    pdfError(error) {
+      console.error(error);
+    },
+    // 打印所有
+    pdfPrintAll() {
+      this.$refs.pdf.print();
+    },
+    // 打印 第一页和第二页
+    pdfPrint() {
+      // 第一个参数 文档打印的分辨率
+      // 第二个参数 文档打印的页数
+      this.$refs.pdf.print(100, [1, 2]);
+    },
+    // 获取当前页面pdf的文字信息内容
+    logContent() {
+      this.$refs.pdf.pdf.forEachPage(function (page) {
+        return page.getTextContent().then(function (content) {
+          let text = content.items.map((item) => item.str);
+          let allStr = content.items.reduce(
+            (initVal, item) => (initVal += item.str),
+            ""
+          );
+          console.log(allStr); // 内容字符串
+          console.log(text); // 内容数组
+        });
+      });
+    },
+    async reportPreview() {
+      this.src = pdf.createLoadingTask(this.pdfUrl);
+      this.src.promise.then((pdf) => {
+        this.loading.close();
+        this.numPages = pdf.numPages;
+      });
+    },
+  },
+};
+</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);
+  /* 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 .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>

src/components/pages/demoPdf2.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="pdfBody">
+    <Pdf3 ref="pdf" @getPageTotal="getPageTotal" :getPage="getPage"></Pdf3>
+  </div>
+</template>
+
+<script>
+import Pdf3 from "./components/pdf3";
+export default {
+  components: {
+    Pdf3,
+  },
+  data() {
+    return {
+      pageTotal: 0, //总页数
+      page: 0, //第几页
+    };
+  },
+  methods: {
+    getPageTotal(total) {
+      this.pageTotal = total;
+    },
+    getPage(page) {
+      this.page = page;
+      console.log(page);
+    },
+    nextPage(){
+        this.$refs.pdf.nextPage();
+    },
+    prePage(){
+        this.$refs.pdf.prePage();
+    }
+  },
+};
+</script>
+
+<style>
+.pdfBody {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+.btnbox {
+  position: absolute;
+  top: 0;
+}
+</style>

src/router/index.js

@@ -25,6 +25,7 @@ import evaluation from '@/components/pages/evaluation'
 import GridList from '@/components/pages/GridList'
 import wordList from '@/components/pages/wordList'
 import demoPdf from '@/components/pages/demoPdf'
+import demoPdf2 from '@/components/pages/demoPdf2'
 
 Vue.use(Router).use(ElementUI)
 
@@ -218,6 +219,13 @@ export default new Router({
       meta: {
         requireAuth: '' // 不需要鉴权
       }
+    }, {
+      path: '/demoPdf2',
+      name: 'demoPdf2',
+      component: demoPdf2,
+      meta: {
+        requireAuth: '' // 不需要鉴权
+      }
     },
   ]
 })