{"remainingRequest":"C:\\hjmWeb\\suyi\\suyi1111\\suyi1111\\suyi1111\\suyi1111\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\hjmWeb\\suyi\\suyi1111\\suyi1111\\suyi1111\\suyi1111\\src\\components\\pdf\\pdf.vue?vue&type=style&index=0&id=841d6416&lang=scss&scoped=true&","dependencies":[{"path":"C:\\hjmWeb\\suyi\\suyi1111\\suyi1111\\suyi1111\\suyi1111\\src\\components\\pdf\\pdf.vue","mtime":1670582921054},{"path":"C:\\hjmWeb\\suyi\\suyi1111\\suyi1111\\suyi1111\\suyi1111\\node_modules\\css-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\hjmWeb\\suyi\\suyi1111\\suyi1111\\suyi1111\\suyi1111\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\hjmWeb\\suyi\\suyi1111\\suyi1111\\suyi1111\\suyi1111\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\hjmWeb\\suyi\\suyi1111\\suyi1111\\suyi1111\\suyi1111\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\hjmWeb\\suyi\\suyi1111\\suyi1111\\suyi1111\\suyi1111\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\hjmWeb\\suyi\\suyi1111\\suyi1111\\suyi1111\\suyi1111\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKDQoucGRmIHsNCiAgcGFkZGluZzogMjBweDsNCiAgLnNob3cgew0KICAgIG92ZXJmbG93OiBhdXRvOw0KICAgIG1hcmdpbjogYXV0bzsNCiAgICBtYXgtd2lkdGg6IDc1JTsNCiAgICBoZWlnaHQ6IDgwdmg7DQogICAgLy8gbWF4LWhlaWdodDogNTMwcHg7DQogIH0NCiAgLnBkZl9mb290ZXIgew0KICAgIHBvc2l0aW9uOiBzdGlja3k7DQogICAgYm90dG9tOiAwOw0KICAgIGxlZnQ6IDA7DQogICAgcmlnaHQ6IDA7DQogICAgcGFkZGluZzogMTBweCAwOw0KICAgIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC41KTsNCiAgICAuaW5mbyB7DQogICAgICBkaXNwbGF5OiBmbGV4Ow0KICAgICAgZmxleC13cmFwOiB3cmFwOw0KICAgICAgZGl2IHsNCiAgICAgICAgd2lkdGg6IDMwJTsNCiAgICAgIH0NCiAgICB9DQogICAgLm9wZXJhdGUgew0KICAgICAgbWFyZ2luOiAxMHB4IDAgMDsNCiAgICAgIGRpc3BsYXk6IGZsZXg7DQogICAgICBmbGV4LXdyYXA6IHdyYXA7DQogICAgICBkaXYgew0KICAgICAgICAvLyB3aWR0aDogODBweDsNCiAgICAgICAgdGV4dC1hbGlnbjogY2VudGVyOw0KICAgICAgICBmb250LXNpemU6IDE1cHg7DQogICAgICB9DQogICAgICAuYnRuIHsNCiAgICAgICAgY3Vyc29yOiBwb2ludGVyOw0KICAgICAgICBtYXJnaW46IDVweCAxMHB4Ow0KICAgICAgICB3aWR0aDogMTIwcHg7DQogICAgICAgIGJvcmRlci1yYWRpdXM6IDEwcHg7DQogICAgICAgIHBhZGRpbmc6IDVweDsNCiAgICAgICAgY29sb3I6ICNmZmY7DQogICAgICAgIGJhY2tncm91bmQtY29sb3I6ICMzZGNiYmM7DQogICAgICB9DQogICAgfQ0KICB9DQp9DQoNCg=="},{"version":3,"sources":["pdf.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwLA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"pdf.vue","sourceRoot":"src/components/pdf","sourcesContent":["<template>\r\n   <div class=\"pdf\">\r\n    <div class=\"show\">\r\n      <pdf\r\n        ref=\"pdf\"\r\n        :src=\"pdfUrl\"\r\n        :page=\"pageNum\"\r\n        :rotate=\"pageRotate\"\r\n        @password=\"password\"\r\n        @progress=\"loadedRatio = $event\"\r\n        @page-loaded=\"pageLoaded($event)\"\r\n        @num-pages=\"pageTotalNum = $event\"\r\n        @error=\"pdfError($event)\"\r\n        @link-clicked=\"page = $event\"\r\n      >\r\n      </pdf>\r\n    </div>\r\n\r\n    <div class=\"pdf_footer\">\r\n      <div class=\"info\">\r\n        <div>当前页数/总页数：{{ pageNum }}/{{ pageTotalNum }}</div>\r\n        <div>进度：{{ loadedRatio }}</div>\r\n        <div>页面加载成功: {{ curPageNum }}</div>\r\n      </div>\r\n      <div class=\"operate\">\r\n        <div class=\"btn\" @click.stop=\"clock\">顺时针</div>\r\n        <div class=\"btn\" @click.stop=\"counterClock\">逆时针</div>\r\n        <div class=\"btn\" @click.stop=\"prePage\">上一页</div>\r\n        <div class=\"btn\" @click.stop=\"nextPage\">下一页</div>\r\n        <div class=\"btn\" @click=\"scaleD\">放大</div>\r\n        <div class=\"btn\" @click=\"scaleX\">缩小</div>\r\n        <div class=\"btn\" @click=\"pdfPrint()\">打印所有指定页</div>\r\n        <div class=\"btn\" @click=\"pdfPrintAll()\">打印所有</div>\r\n        <div class=\"btn\" @click=\"logContent()\">获取页面信息</div>\r\n        <div class=\"btn\" @click=\"fileDownload(pdfUrl, 'pdf文件')\">下载</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport pdf from \"vue-pdf\";\r\nexport default {\r\n props: {\r\n    // 当前pdf路径\r\n    pdfUrl: {\r\n      type: String,\r\n      default:\r\n        \"http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf\",\r\n    },\r\n  },\r\ncomponents: {\r\n    pdf,\r\n  },\r\n   data() {\r\n    return {\r\n      // 总页数\r\n      pageTotalNum: 1,\r\n      // 当前页数\r\n      pageNum: 1,\r\n      // 加载进度\r\n      loadedRatio: 0,\r\n      // 页面加载完成\r\n      curPageNum: 0,\r\n      // 放大系数 默认百分百\r\n      scale: 100,\r\n      // 旋转角度 ‘90’的倍数才有效\r\n      pageRotate: 0,\r\n      // 单击内部链接时触发 (目前我没有遇到使用场景)\r\n      page: 0,\r\n    };\r\n  },\r\nwatch: {},\r\n  computed: {},\r\n  created() {},\r\n  mounted() {},\r\n  methods: {\r\n    //下载PDF\r\n    fileDownload(data, fileName) {\r\n      let blob = new Blob([data], {\r\n        //type类型后端返回来的数据中会有，根据自己实际进行修改\r\n        type: \"application/pdf;charset-UTF-8\",\r\n      });\r\n      let filename = fileName || \"pdf.pdf\";\r\n      if (typeof window.navigator.msSaveBlob !== \"undefined\") {\r\n        window.navigator.msSaveBlob(blob, filename);\r\n      } else {\r\n        var blobURL = window.URL.createObjectURL(blob);\r\n        // 创建隐藏<a>标签进行下载\r\n        var tempLink = document.createElement(\"a\");\r\n        tempLink.style.display = \"none\";\r\n        tempLink.href = blobURL;\r\n        tempLink.setAttribute(\"download\", filename);\r\n        if (typeof tempLink.download === \"undefined\") {\r\n          tempLink.setAttribute(\"target\", \"_blank\");\r\n        }\r\n        document.body.appendChild(tempLink);\r\n        tempLink.click();\r\n        document.body.removeChild(tempLink);\r\n        window.URL.revokeObjectURL(blobURL);\r\n      }\r\n    },\r\n\r\n    //放大\r\n    scaleD() {\r\n      this.scale += 5;\r\n      this.$refs.pdf.$el.style.width = parseInt(this.scale) + \"%\";\r\n    },\r\n\r\n    //缩小\r\n    scaleX() {\r\n      // scale 是百分百展示 不建议缩放\r\n      if (this.scale == 100) {\r\n        return;\r\n      }\r\n      this.scale += -5;\r\n      console.log(parseInt(this.scale) + \"%\");\r\n      this.$refs.pdf.$el.style.width = parseInt(this.scale) + \"%\";\r\n    },\r\n    // 切换上一页\r\n    prePage() {\r\n      var p = this.pageNum;\r\n      p = p > 1 ? p - 1 : this.pageTotalNum;\r\n      this.pageNum = p;\r\n    },\r\n    // 切换下一页\r\n    nextPage() {\r\n      var p = this.pageNum;\r\n      p = p < this.pageTotalNum ? p + 1 : 1;\r\n      this.pageNum = p;\r\n    },\r\n    // 顺时针选中角度\r\n    clock() {\r\n      this.pageRotate += 90;\r\n    },\r\n    // 逆时针旋转角度\r\n    counterClock() {\r\n      this.pageRotate -= 90;\r\n    },\r\n    // pdf 有密码 则需要输入秘密\r\n    password(updatePassword, reason) {\r\n      updatePassword(prompt('password is \"test\"'));\r\n      console.log(\"...reason...\");\r\n      console.log(reason);\r\n      console.log(\"...reason...\");\r\n    },\r\n    // 页面加载成功  当前页数\r\n    pageLoaded(e) {\r\n      this.$emit(\"current\", e);\r\n      this.curPageNum = e;\r\n    },\r\n    // 异常监听\r\n    pdfError(error) {\r\n      console.error(error);\r\n    },\r\n    // 打印所有\r\n    pdfPrintAll() {\r\n      this.$refs.pdf.print();\r\n    },\r\n    // 打印 第一页和第二页\r\n    pdfPrint() {\r\n      // 第一个参数 文档打印的分辨率\r\n      // 第二个参数 文档打印的页数\r\n      this.$refs.pdf.print(100, [1, 2]);\r\n    },\r\n    // 获取当前页面pdf的文字信息内容\r\n    logContent() {\r\n      this.$refs.pdf.pdf.forEachPage(function (page) {\r\n        return page.getTextContent().then(function (content) {\r\n          let text = content.items.map((item) => item.str);\r\n          let allStr = content.items.reduce(\r\n            (initVal, item) => (initVal += item.str),\r\n            \"\"\r\n          );\r\n          console.log(allStr); // 内容字符串\r\n          console.log(text); // 内容数组\r\n        });\r\n      });\r\n    },\r\n  },\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.pdf {\r\n  padding: 20px;\r\n  .show {\r\n    overflow: auto;\r\n    margin: auto;\r\n    max-width: 75%;\r\n    height: 80vh;\r\n    // max-height: 530px;\r\n  }\r\n  .pdf_footer {\r\n    position: sticky;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    padding: 10px 0;\r\n    background-color: rgba(255, 255, 255, 0.5);\r\n    .info {\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n      div {\r\n        width: 30%;\r\n      }\r\n    }\r\n    .operate {\r\n      margin: 10px 0 0;\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n      div {\r\n        // width: 80px;\r\n        text-align: center;\r\n        font-size: 15px;\r\n      }\r\n      .btn {\r\n        cursor: pointer;\r\n        margin: 5px 10px;\r\n        width: 120px;\r\n        border-radius: 10px;\r\n        padding: 5px;\r\n        color: #fff;\r\n        background-color: #3dcbbc;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n</style>"]}]}