|
|
@@ -1,281 +0,0 @@
|
|
|
-<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",
|
|
|
- },
|
|
|
- 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,
|
|
|
- };
|
|
|
- },
|
|
|
- watch: {
|
|
|
- ppage(val) {
|
|
|
- this.pageNum = val;
|
|
|
- },
|
|
|
- pageTotalNum(val) {
|
|
|
- if (val) {
|
|
|
- this.loading.close();
|
|
|
- // this.$parent.setData();
|
|
|
- this.$parent.getRealTimeClass();
|
|
|
- }
|
|
|
- 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;
|
|
|
- let dwidth = document.body.offsetWidth;
|
|
|
- let cwidth = document.getElementsByClassName("pdf")[0].offsetHeight * 1.77;
|
|
|
- let owidth = "";
|
|
|
- if (cwidth > dwidth) {
|
|
|
- owidth = dwidth + "px";
|
|
|
- } else {
|
|
|
- owidth = cwidth + "px";
|
|
|
- }
|
|
|
- var a = document.getElementsByClassName("pdf")[0].offsetWidth;
|
|
|
- let _this = this;
|
|
|
- this.$refs.pdf.$el.style.width = owidth;
|
|
|
- this.$emit("getWidth", owidth);
|
|
|
- window.addEventListener("resize", () => {
|
|
|
- dwidth = document.body.offsetWidth;
|
|
|
- cwidth = document.getElementsByClassName("pdf")[0].offsetHeight * 1.77;
|
|
|
- if (cwidth > dwidth) {
|
|
|
- owidth = dwidth + "px";
|
|
|
- } else {
|
|
|
- owidth = cwidth + "px";
|
|
|
- }
|
|
|
- this.$refs.pdf.$el.style.width = owidth;
|
|
|
- this.$emit("getWidth", owidth);
|
|
|
- });
|
|
|
- },
|
|
|
- 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%);
|
|
|
- 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>
|
