From 8415b0efd1c4efc6aa902af60682bde34917915e Mon Sep 17 00:00:00 2001 From: miaojiale <1123971748@qq.com> Date: Mon, 3 Apr 2023 11:00:24 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A2=84=E8=A7=88pdf=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E4=B8=BA=E5=88=86=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/Home/Map/index.vue | 4 +- src/views/Home/PdfView/index.vue | 228 ++++++++++++-- src/views/Home/index.vue | 18 +- .../components/TypicalCase.vue | 290 ++++++++++++++++++ .../systems/operation-management/index.vue | 6 + 5 files changed, 513 insertions(+), 33 deletions(-) create mode 100644 src/views/systems/operation-management/components/TypicalCase.vue diff --git a/src/views/Home/Map/index.vue b/src/views/Home/Map/index.vue index 626b86c..85ad32e 100644 --- a/src/views/Home/Map/index.vue +++ b/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 }], }, ], } diff --git a/src/views/Home/PdfView/index.vue b/src/views/Home/PdfView/index.vue index f7e4b4a..780d650 100644 --- a/src/views/Home/PdfView/index.vue +++ b/src/views/Home/PdfView/index.vue @@ -1,6 +1,40 @@ @@ -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 - }, - mounted() { - this.getNumPages() - }, + created() {}, + mounted() {}, 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 - }) - .catch((err) => { - console.error("pdf加载失败") + //下载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) + // 创建隐藏标签进行下载 + 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 + 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) // 内容数组 }) + }) }, }, } - + diff --git a/src/views/Home/index.vue b/src/views/Home/index.vue index 107dfa9..4acc48f 100644 --- a/src/views/Home/index.vue +++ b/src/views/Home/index.vue @@ -17,6 +17,7 @@
  • @@ -49,13 +50,18 @@ :name="e.title" >
      -
    • +
    • - {{ item.title }} + {{ item.articleTitle }}
      - {{ item.date }} + {{ item.createTime }}
    @@ -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; // } diff --git a/src/views/systems/operation-management/components/TypicalCase.vue b/src/views/systems/operation-management/components/TypicalCase.vue new file mode 100644 index 0000000..7b4e9a2 --- /dev/null +++ b/src/views/systems/operation-management/components/TypicalCase.vue @@ -0,0 +1,290 @@ + + + diff --git a/src/views/systems/operation-management/index.vue b/src/views/systems/operation-management/index.vue index bf4331e..89d501e 100644 --- a/src/views/systems/operation-management/index.vue +++ b/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", + }, ], } }, -- 2.22.0