pdf2

src/components/pages/addCourse.vue

@@ -1769,9 +1769,13 @@
           <div class="people_nav">选择班级</div>
         </div>
         <el-checkbox-group v-model="checkboxList2" class="people_name">
-          <el-checkbox v-for="item in grade" :key="item.id" :label="item.id">{{
-            item.name ? item.name : "暂无班级可选"
-          }}</el-checkbox>
+          <div v-for="(item,index) in grade" :key="item.id" >
+            <el-checkbox :label="item.id">{{
+            item.name ? item.name : "暂无班级可选"}}</el-checkbox>
+            <div>
+              <span>{{index}}</span>
+            </div>
+          </div>
         </el-checkbox-group>
       </div>
       <span slot="footer" class="dialog-footer">

src/components/pages/components/pdf2.vue

@@ -0,0 +1,260 @@
+<template>
+  <div class="pdf">
+    <div class="show">
+      <pdf
+        ref="pdf"
+        :src="pdfUrl"
+        :page="pageNum"
+        :rotate="pageRotate"
+        @password="password"
+        @progress="loadedRatio = $event"
+        @page-loaded="pageLoaded($event)"
+        @num-pages="pageTotalNum = $event"
+        @error="pdfError($event)"
+        @link-clicked="page = $event"
+      ></pdf>
+    </div>
+
+    <!-- <div class="pdf_footer">
+      <div class="info">
+        <div>当前页数/总页数：{{pageNum}}/{{pageTotalNum}}</div>
+      </div>
+      <div class="operate">
+        <div class="btn" @click.stop="prePage">上一页</div>
+        <div class="btn" @click.stop="nextPage">下一页</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",
+    },
+    getPage: {
+      type: Function,
+    },
+  },
+  components: {
+    pdf,
+  },
+  data() {
+    return {
+      // 总页数
+      pageTotalNum: 1,
+      // 当前页数
+      pageNum: 1,
+      // 加载进度
+      loadedRatio: 0,
+      // 页面加载完成
+      curPageNum: 0,
+      // 放大系数 默认百分百
+      scale: 69,
+      // 旋转角度 ‘90’的倍数才有效
+      pageRotate: 0,
+      // 单击内部链接时触发 (目前我没有遇到使用场景)
+      page: 0,
+      loading: null,
+    };
+  },
+  watch: {
+    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"),
+    });
+    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";
+    });
+  },
+  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); // 内容数组
+        });
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.pdf {
+  height: 100%;
+  position: relative;
+  box-sizing: border-box;
+}
+.pdf .show {
+  overflow: auto;
+  margin: auto;
+  width: 100%;
+  /* height: calc(100% - 100px); */
+  height: calc(100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pdf .pdf_footer {
+  position: absolute;
+  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;
+}
+</style>

src/components/pages/demoPdf.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="pdfBody">
+    <Pdf2 ref="pdf" @getPageTotal="getPageTotal" :getPage="getPage"></Pdf2>
+    <div class="btnbox">
+      <el-button type="primary" @click="nextPage">下一页</el-button>
+      <el-button type="primary" @click="prePage">上一页</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import Pdf2 from "./components/pdf2";
+export default {
+  components: {
+    Pdf2,
+  },
+  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

@@ -24,192 +24,200 @@ import studyLibrary from '@/components/pages/studyLibrary'
 import evaluation from '@/components/pages/evaluation'
 import GridList from '@/components/pages/GridList'
 import wordList from '@/components/pages/wordList'
+import demoPdf from '@/components/pages/demoPdf'
 
 Vue.use(Router).use(ElementUI)
 
 export default new Router({
-    routes: [{
-            path: '/class',
-            name: 'class',
-            component: classA,
-            meta: {
-                requireAuth: ''
-            }
-        },
-        // {
-        //   path: '/',
-        //   redirect: '/course',
-        // },
-        {
-            path: '/course',
-            component: course,
-            meta: {
-                requireAuth: '' // 是否需要判断是否登录,这里是需要判断
-            }
-        },
-        {
-            path: '/course/courseDetail',
-            component: courseDetail,
-            meta: {
-                requireAuth: '' // 是否需要判断是否登录,这里是需要判断
-            }
-        },
-        {
-            path: '/course/addCourse',
-            component: addCourse,
-            meta: {
-                requireAuth: '' // 是否需要判断是否登录,这里是需要判断
-            }
-        },
-        {
-            path: '/data',
-            name: 'data',
-            component: data,
-            meta: {
-                requireAuth: '' // 是否需要判断是否登录,这里是需要判断
-            }
-        }, {
-            path: '/notice',
-            name: 'notice',
-            component: notice,
-            meta: {
-                requireAuth: '' // 是否需要判断是否登录,这里是需要判断
-            }
-        },
-        {
-            path: '/student',
-            name: 'student',
-            component: student,
-            meta: {
-                requireAuth: '' // 是否需要判断是否登录,这里是需要判断
-            }
-        },
-        {
-            path: '/ask',
-            name: 'ask',
-            component: ask,
-            meta: {
-                requireAuth: '' // 是否需要判断是否登录,这里是需要判断
-            }
-        },
-        {
-            path: '/ask/askList',
-            name: 'askList',
-            component: () =>
-                import ('@/components/pages/askList'),
-            meta: {}
-        },
-        {
-            path: '/works',
-            name: 'works',
-            component: works,
-            meta: {
-                requireAuth: '' // 是否需要判断是否登录,这里是需要判断
-            }
-        },
-        {
-            path: '/worksDetail',
-            name: 'worksDetail',
-            component: worksDetail,
-            meta: {
-                requireAuth: '' // 是否需要判断是否登录,这里是需要判断
-            }
-        },
-        {
-            path: '/library',
-            name: 'library',
-            component: library,
-            meta: {
-                requireAuth: '' // 是否需要判断是否登录,这里是需要判断
-            }
-        },
-        {
-            path: '/login',
-            name: 'login',
-            component: login,
-            meta: {
-                requireAuth: '' // 不需要鉴权
-            }
-        },
-        {
-            path: '/note',
-            name: 'note',
-            component: note,
-            meta: {
-                requireAuth: '' // 不需要鉴权
-            }
-        },
-        {
-            path: '/Grid',
-            name: 'Grid',
-            component: Grid,
-            meta: {
-                requireAuth: '' // 不需要鉴权
-            }
-        },
-        {
-            path: '/demo',
-            name: 'demo',
-            component: demo,
-            meta: {
-                requireAuth: '' // 不需要鉴权
-            }
-        },
-        {
-            path: '/classRoom',
-            name: 'classRoom',
-            component: classRoom,
-            meta: {
-                requireAuth: '' // 不需要鉴权
-            }
-        },
-        {
-            path: '/liveRoom',
-            name: 'liveRoom',
-            component: liveRoom,
-            meta: {
-                requireAuth: '' // 不需要鉴权
-            }
-        },
-        {
-            path: '/addPPt',
-            name: 'addPPt',
-            component: addPPt,
-            meta: {
-                requireAuth: '' // 不需要鉴权
-            }
-        },
-        {
-            path: '/studyLibrary',
-            name: 'studyLibrary',
-            component: studyLibrary,
-            meta: {
-                requireAuth: '' // 不需要鉴权
-            }
-        },
-        {
-            path: '/evaluation',
-            name: 'evaluation',
-            component: evaluation,
-            meta: {
-                requireAuth: '' // 不需要鉴权
-            }
-        },
-        {
-            path: '/GridList',
-            name: 'GridList',
-            component: GridList,
-            meta: {
-                requireAuth: '' // 不需要鉴权
-            }
-        },
-        {
-            path: '/wordList',
-            name: 'wordList',
-            component: wordList,
-            meta: {
-                requireAuth: '' // 不需要鉴权
-            }
-        },
-    ]
-})
+  routes: [{
+      path: '/class',
+      name: 'class',
+      component: classA,
+      meta: {
+        requireAuth: ''
+      }
+    },
+    // {
+    //   path: '/',
+    //   redirect: '/course',
+    // },
+    {
+      path: '/course',
+      component: course,
+      meta: {
+        requireAuth: '' // 是否需要判断是否登录,这里是需要判断
+      }
+    },
+    {
+      path: '/course/courseDetail',
+      component: courseDetail,
+      meta: {
+        requireAuth: '' // 是否需要判断是否登录,这里是需要判断
+      }
+    },
+    {
+      path: '/course/addCourse',
+      component: addCourse,
+      meta: {
+        requireAuth: '' // 是否需要判断是否登录,这里是需要判断
+      }
+    },
+    {
+      path: '/data',
+      name: 'data',
+      component: data,
+      meta: {
+        requireAuth: '' // 是否需要判断是否登录,这里是需要判断
+      }
+    }, {
+      path: '/notice',
+      name: 'notice',
+      component: notice,
+      meta: {
+        requireAuth: '' // 是否需要判断是否登录,这里是需要判断
+      }
+    },
+    {
+      path: '/student',
+      name: 'student',
+      component: student,
+      meta: {
+        requireAuth: '' // 是否需要判断是否登录,这里是需要判断
+      }
+    },
+    {
+      path: '/ask',
+      name: 'ask',
+      component: ask,
+      meta: {
+        requireAuth: '' // 是否需要判断是否登录,这里是需要判断
+      }
+    },
+    {
+      path: '/ask/askList',
+      name: 'askList',
+      component: () =>
+        import('@/components/pages/askList'),
+      meta: {}
+    },
+    {
+      path: '/works',
+      name: 'works',
+      component: works,
+      meta: {
+        requireAuth: '' // 是否需要判断是否登录,这里是需要判断
+      }
+    },
+    {
+      path: '/worksDetail',
+      name: 'worksDetail',
+      component: worksDetail,
+      meta: {
+        requireAuth: '' // 是否需要判断是否登录,这里是需要判断
+      }
+    },
+    {
+      path: '/library',
+      name: 'library',
+      component: library,
+      meta: {
+        requireAuth: '' // 是否需要判断是否登录,这里是需要判断
+      }
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: login,
+      meta: {
+        requireAuth: '' // 不需要鉴权
+      }
+    },
+    {
+      path: '/note',
+      name: 'note',
+      component: note,
+      meta: {
+        requireAuth: '' // 不需要鉴权
+      }
+    },
+    {
+      path: '/Grid',
+      name: 'Grid',
+      component: Grid,
+      meta: {
+        requireAuth: '' // 不需要鉴权
+      }
+    },
+    {
+      path: '/demo',
+      name: 'demo',
+      component: demo,
+      meta: {
+        requireAuth: '' // 不需要鉴权
+      }
+    },
+    {
+      path: '/classRoom',
+      name: 'classRoom',
+      component: classRoom,
+      meta: {
+        requireAuth: '' // 不需要鉴权
+      }
+    },
+    {
+      path: '/liveRoom',
+      name: 'liveRoom',
+      component: liveRoom,
+      meta: {
+        requireAuth: '' // 不需要鉴权
+      }
+    },
+    {
+      path: '/addPPt',
+      name: 'addPPt',
+      component: addPPt,
+      meta: {
+        requireAuth: '' // 不需要鉴权
+      }
+    },
+    {
+      path: '/studyLibrary',
+      name: 'studyLibrary',
+      component: studyLibrary,
+      meta: {
+        requireAuth: '' // 不需要鉴权
+      }
+    },
+    {
+      path: '/evaluation',
+      name: 'evaluation',
+      component: evaluation,
+      meta: {
+        requireAuth: '' // 不需要鉴权
+      }
+    },
+    {
+      path: '/GridList',
+      name: 'GridList',
+      component: GridList,
+      meta: {
+        requireAuth: '' // 不需要鉴权
+      }
+    },
+    {
+      path: '/wordList',
+      name: 'wordList',
+      component: wordList,
+      meta: {
+        requireAuth: '' // 不需要鉴权
+      }
+    }, {
+      path: '/demoPdf',
+      name: 'demoPdf',
+      component: demoPdf,
+      meta: {
+        requireAuth: '' // 不需要鉴权
+      }
+    },
+  ]
+})