预览pdf修改为分页

src/views/Home/Map/index.vue

@@ -15,7 +15,7 @@ export default {
       locate: [
         {
           name: "安徽",
-          value: [117.29, 32.0581, 50],
+          value: [117.29, 32.0581, 0],
         },
       ],
     }
@@ -123,7 +123,7 @@ export default {
               },
             },
             animation: false,
-            data: [{ name: "安徽省", value: 50 }],
+            data: [{ name: "安徽省", value: 0 }],
           },
         ],
       }

src/views/Home/PdfView/index.vue

 <template>
-  <div class="pdf" v-loading="loading">
-    <pdf v-for="i in numPages" :key="i" :src="laoclUrl" :page="i"></pdf>
+  <div class="pdf">
+    <div v-loading="!loadedRatio" 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>进度：{{ loadedRatio }}</div>
+        <div>页面加载成功: {{ curPageNum }}</div>
+      </div>
+      <div class="operate">
+        <!-- <div class="btn" @click.stop="clock">顺时针</div>
+        <div class="btn" @click.stop="counterClock">逆时针</div> -->
+        <div class="btn" @click.stop="prePage">上一页</div>
+        <div class="btn" @click.stop="nextPage">下一页</div>
+        <div class="btn" @click="scaleD">放大</div>
+        <div class="btn" @click="scaleX">缩小</div>
+        <!-- <div class="btn" @click="pdfPrint()">打印所有指定页</div>
+        <div class="btn" @click="pdfPrintAll()">打印所有</div> -->
+        <!-- <div class="btn" @click="logContent()">获取页面信息</div> -->
+        <!-- <div class="btn" @click="fileDownload(pdfUrl, 'pdf文件')">下载</div> -->
+      </div>
+    </div>
   </div>
 </template>
 
@@ -8,9 +42,9 @@
 /* eslint-disable */
 import pdf from "vue-pdf"
 export default {
-  name: "index",
+  name: "vue_pdf_preview",
   props: {
-    // 当前pdf的路径
+    // 当前pdf路径
     pdfUrl: {
       type: String,
       default: "",
@@ -21,38 +55,178 @@ export default {
   },
   data() {
     return {
-      loading: false,
+      // 总页数
+      pageTotalNum: 1,
       // 当前页数
-      numPages: 1,
-      // 预览路径
-      laoclUrl: "",
+      pageNum: 1,
+      // 加载进度
+      loadedRatio: 0,
+      // 页面加载完成
+      curPageNum: 0,
+      // 放大系数 默认百分百
+      scale: 100,
+      // 旋转角度 ‘90’的倍数才有效
+      pageRotate: 0,
+      // 单击内部链接时触发 (目前我没有遇到使用场景)
+      page: 0,
     }
   },
   watch: {},
   computed: {},
-  created() {
-    this.laoclUrl = this.pdfUrl
+  created() {},
+  mounted() {},
+  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)
+      }
     },
-  mounted() {
-    this.getNumPages()
+
+    //放大
+    scaleD() {
+      this.scale += 5
+      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%"
     },
-  methods: {
-    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
+
+    //缩小
+    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
+      document.querySelector(".pdf .show").scrollTop = 0
+    },
+    // 切换下一页
+    nextPage() {
+      var p = this.pageNum
+      p = p < this.pageTotalNum ? p + 1 : 1
+      this.pageNum = p
+      document.querySelector(".pdf .show").scrollTop = 0
+    },
+    // 顺时针选中角度
+    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) // 内容数组
         })
-        .catch((err) => {
-          console.error("pdf加载失败")
       })
     },
   },
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.pdf {
+  padding: 20px;
+  .show {
+    overflow: auto;
+    margin: auto;
+    // max-width: 75%;
+    height: 450px;
+    // max-height: 530px;
+  }
+  .pdf_footer {
+    position: sticky;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 10px 0;
+    background-color: rgba(255, 255, 255, 0.5);
+    .info {
+      display: flex;
+      flex-wrap: wrap;
+      div {
+        width: 30%;
+      }
+    }
+    .operate {
+      margin: 10px 0 0;
+      display: flex;
+      flex-wrap: wrap;
+      div {
+        // width: 80px;
+        text-align: center;
+        font-size: 15px;
+      }
+      .btn {
+        cursor: pointer;
+        margin: 5px 10px;
+        width: 120px;
+        border-radius: 10px;
+        padding: 5px;
+        color: #fff;
+        background-color: #3dcbbc;
+      }
+    }
+  }
+}
+</style>

src/views/Home/index.vue

@@ -17,6 +17,7 @@
               <li
                 v-for="(item, index) in noticeList"
                 :key="index"
+                title="点击查看pdf文件"
                 @click="setPdf(item)"
               >
                 <div class="left">
@@ -49,13 +50,18 @@
               :name="e.title"
             >
               <ul class="tabslist" style="height: 380px" :loading="listLoading">
-                <li v-for="(item, index) in exampleList" :key="index">
+                <li
+                  v-for="(item, index) in exampleList"
+                  :key="index"
+                  title="点击查看pdf文件"
+                  @click="setPdf(item)"
+                >
                   <div class="left">
                     <div class="circle"></div>
-                    {{ item.title }}
+                    {{ item.articleTitle }}
                   </div>
                   <div class="right">
-                    {{ item.date }}
+                    {{ item.createTime }}
                   </div>
                 </li>
               </ul>
@@ -283,6 +289,7 @@ export default {
   },
   created() {
     this.getArticleList("1")
+    this.getArticleList("6")
   },
   mounted() {
     this.getRankTotal()
@@ -330,6 +337,9 @@ export default {
             if (["1", "2", "3"].includes(moduleType)) {
               this.noticeList = [...res.data.records]
             }
+            if (["6"].includes(moduleType)) {
+              this.exampleList = [...res.data.records]
+            }
           }
         })
         .catch((e) => {
@@ -383,7 +393,7 @@ export default {
         overflow: hidden;
         display: flex;
         flex-direction: column;
-        justify-content: space-between;
+        // justify-content: space-between;
         // &:hover {
         // overflow: overlay;
         // }

src/views/systems/operation-management/components/TypicalCase.vue

+<template>
+  <div id="medicalunion-management">
+    <div class="top-btn">
+      <el-button type="primary" class="btn" @click="addMedical">添加</el-button>
+    </div>
+    <div class="bot-table">
+      <customs-table
+        ref="table"
+        :table-data="tableData"
+        :columns="columns"
+        :header-class="'newHeader'"
+        :list-loading="listLoading"
+        :current-page="pageIndex"
+        :total-count="total"
+        :page-sizes="pageSizes"
+        :page-size="pageSize"
+        @pageSizeChange="handleSizeChange"
+        @currentPageChange="handleCurrentChange"
+      />
+    </div>
+    <el-dialog
+      :visible.sync="addVisible"
+      width="520px"
+      :show-close="true"
+      @closed="resetForm"
+    >
+      <div class="title">{{ readOnly ? "查看" : "添加" }}</div>
+      <el-form
+        ref="form"
+        :model="form"
+        :label-position="'right'"
+        label-width="110px"
+        label-suffix=":"
+        :disabled="readOnly"
+      >
+        <el-form-item
+          v-for="(item, index) in formList"
+          :key="index"
+          :label="item.label"
+          :prop="item.prop"
+          :rules="[{ required: true, message: item.label + '不能为空' }]"
+        >
+          <!-- <template v-if="!readOnly"> -->
+          <template>
+            <!-- 输入框 -->
+            <el-input
+              v-if="item.type == 'input'"
+              v-model="form[item.prop]"
+              autocomplete="off"
+              :placeholder="'请填写' + item.label"
+            ></el-input>
+            <!-- 下拉选 -->
+            <el-select
+              v-else-if="item.type == 'select'"
+              v-model="form[item.prop]"
+              :placeholder="'请选择' + item.label"
+              style="width: 100%"
+            >
+              <el-option
+                v-for="e in item.selectGroup"
+                :key="e.value"
+                :label="e.label"
+                :value="e.value"
+              ></el-option>
+            </el-select>
+            <!-- 上传 -->
+            <el-upload-self
+              v-else-if="item.type === 'upload'"
+              v-model="form[item.prop]"
+              :btn-type="'text'"
+              v-bind="item"
+              :list-type="item.listType"
+              :accept="item.accept"
+              :limit="item.limit"
+              :disabled="readOnly"
+            ></el-upload-self>
+            <!-- switch -->
+            <!-- switch切换  启用 -->
+            <el-switch
+              v-else-if="item.type === 'switch'"
+              v-model="form[item.prop]"
+              :active-value="1"
+              :inactive-value="0"
+            >
+            </el-switch>
+          </template>
+          <!-- <template v-else>
+            <span>{{ form[item.prop] || "--" }}</span>
+          </template> -->
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button class="f-btn" type="primary" @click="submitForm('6')"
+          >保存</el-button
+        >
+      </span>
+    </el-dialog>
+    <!-- 删除提示框 -->
+    <el-dialog title="提示" :visible.sync="deleteVisible" width="30%">
+      <span>确定删除吗？</span>
+      <span slot="footer" class="dialog-footers">
+        <el-button @click="deleteVisible = false">取 消</el-button>
+        <el-button type="primary" @click="confirmDelete">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import CustomsTable from "@/components/CustomsTable"
+import paginationMixin from "@/components/TabComponents/mixin"
+import ElUploadSelf from "@/components/UploadForOperation"
+import mixin from "./mixin"
+import { articleList } from "@/api/operation-management"
+export default {
+  components: {
+    CustomsTable,
+    ElUploadSelf,
+  },
+  mixins: [paginationMixin, mixin],
+  data() {
+    return {
+      addVisible: false,
+      listLoading: false,
+      deleteVisible: false,
+      columns: [
+        {
+          label: "标题",
+          minWidth: 120,
+          value: "articleTitle",
+        },
+        {
+          label: "文件",
+          minWidth: 120,
+          type: "file",
+          value: "filePath",
+        },
+        {
+          label: "上传时间",
+          minWidth: 120,
+          value: "uploadTime",
+        },
+        {
+          label: "最新修改时间",
+          minWidth: 120,
+          value: "updateTime",
+        },
+        {
+          label: "上传人姓名",
+          minWidth: 120,
+          value: "uploadUserName",
+        },
+        {
+          label: "启用状态",
+          minWidth: 120,
+          type: "switch",
+          value: "status",
+          func: this.openChage,
+        },
+        {
+          label: "操作",
+          width: 220,
+          fixed: "right",
+          operType: "button",
+          operations: [
+            {
+              func: this.viewMedical,
+              formatter(row) {
+                return {
+                  label: "查看",
+                  type: "text",
+                }
+              },
+            },
+            {
+              func: this.editMedical,
+              formatter(row) {
+                return {
+                  label: "编辑",
+                  type: "text",
+                }
+              },
+            },
+            {
+              func: this.deleteFunc,
+              style: {
+                color: "#FA6400",
+              },
+              formatter(row) {
+                return {
+                  label: "删除",
+                  type: "text",
+                }
+              },
+            },
+          ],
+        },
+      ],
+      tableData: [
+        // {
+        //   title: "第一个",
+        //   isOpen: true,
+        // },
+      ],
+      formList: [
+        {
+          type: "input",
+          label: "标题",
+          prop: "articleTitle",
+        },
+        {
+          type: "upload",
+          label: "PDF",
+          prop: "filePath",
+          accept: "application/pdf",
+        },
+        {
+          type: "switch",
+          label: "启用状态",
+          prop: "status",
+        },
+      ],
+    }
+  },
+  watch: {},
+  mounted() {
+    this.getArticleList()
+  },
+  methods: {
+    // 获取新闻会议
+    getArticleList() {
+      this.listLoading = true
+      let params = {
+        size: this.pageSize,
+        current: this.pageIndex,
+        moduleType: "6",
+      }
+      articleList(params)
+        .then((res) => {
+          if (res.code == 1) {
+            this.tableData = [...res.data.records]
+            this.total = res.data.total
+            this.listLoading = false
+          }
+        })
+        .catch((e) => {
+          this.listLoading = false
+        })
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+#medicalunion-management {
+  padding: 20px 0;
+
+  .top-btn {
+    .btn {
+      width: 80px;
+      height: 32px;
+      background: #4e68ff;
+      border-radius: 4px;
+    }
+  }
+  .bot-table {
+    margin-top: 20px;
+  }
+  .title {
+    text-align: center;
+    height: 26px;
+    font-size: 22px;
+    font-family: AlibabaPuHuiTiM;
+    color: rgba(0, 0, 0, 0.8);
+    line-height: 26px;
+    margin-bottom: 30px;
+  }
+}
+::v-deep .el-dialog__body {
+  padding: 0 40px;
+  border-top: none;
+}
+::v-deep .el-dialog__footer {
+  border-top: none;
+  text-align: center;
+  .f-btn {
+    width: 100px;
+    height: 32px;
+    background: #4e68ff;
+  }
+}
+</style>

src/views/systems/operation-management/index.vue

@@ -18,6 +18,7 @@ import NoticeAnnouncement from "@/views/systems/operation-management/components/
 import AcademicTrend from "@/views/systems/operation-management/components/AcademicTrend.vue"
 import HealthPopularization from "@/views/systems/operation-management/components/HealthPopularization.vue"
 import scientificResearch from "@/views/systems/operation-management/components/scientificResearch.vue"
+import TypicalCase from "./components/TypicalCase.vue"
 export default {
   components: {
     NewsMeeting,
@@ -25,6 +26,7 @@ export default {
     AcademicTrend,
     HealthPopularization,
     scientificResearch,
+    TypicalCase,
   },
   data() {
     return {
@@ -50,6 +52,10 @@ export default {
           name: "科学研究",
           component: "scientificResearch",
         },
+        {
+          name: "典型案例",
+          component: "TypicalCase",
+        },
       ],
     }
   },