Skip to content

A
agcs2.0-web
Commit b4edbf3b authored by miaojiale's avatar miaojiale
Browse files
Options

修改pdf预览

parent 3a087e12
Hide whitespace changes
Inline Side-by-side
Showing with 76 additions and 27 deletions
src/views/Home/PdfView/index.vue
View file @ b4edbf3b
<template>
<div class="pdf">
<div v-loading="!loadedRatio" class="show">
<div
v-loading="!loadedRatio"
class="show"
>
<pdf
ref="pdf"
:src="pdfUrl"
:src="pdfSrc"
:page="pageNum"
:rotate="pageRotate"
@password="password"
......@@ -18,17 +21,29 @@
<div class="pdf_footer">
<div class="info">
<div>当前页数/总页数：{{ pageNum }}/{{ pageTotalNum }}</div>
<div>进度：{{ loadedRatio }}</div>
<div>页面加载成功: {{ curPageNum }}</div>
<div style="margin:0 auto;">当前页数/总页数：{{ 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.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> -->
......@@ -40,7 +55,9 @@
<script>
/* eslint-disable */
import pdf from "vue-pdf"
import pdf from "vue-pdf-signature"
import CMapReaderFactory from "vue-pdf-signature/src/CMapReaderFactory.js";
export default {
name: "vue_pdf_preview",
props: {
......@@ -53,8 +70,10 @@ export default {
components: {
pdf,
},
data() {
data () {
return {
// pdfSrcs: "/早期胃癌.pdf",
pdfSrc: "",
// 总页数
pageTotalNum: 1,
// 当前页数
......@@ -73,11 +92,19 @@ export default {
},
watch: {},
computed: {},
created() {},
mounted() {},
created () {
},
mounted () {
},
methods: {
loadPDF () {
this.pdfSrc = pdf.createLoadingTask({
url: this.pdfUrl,
CMapReaderFactory
});
},
//下载PDF
fileDownload(data, fileName) {
fileDownload (data, fileName) {
let blob = new Blob([data], {
//type类型后端返回来的数据中会有，根据自己实际进行修改
type: "application/pdf;charset-UTF-8",
......@@ -103,7 +130,7 @@ export default {
},
//放大
scaleD() {
scaleD () {
if (this.scale == 120) {
return
}
......@@ -113,7 +140,7 @@ export default {
},
//缩小
scaleX() {
scaleX () {
// scale 是百分百展示 不建议缩放
if (this.scale == 85) {
return
......@@ -124,55 +151,56 @@ export default {
this.$emit("scale", this.scale)
},
// 切换上一页
prePage() {
prePage () {
var p = this.pageNum
p = p > 1 ? p - 1 : this.pageTotalNum
this.pageNum = p
document.querySelector(".pdf .show").scrollTop = 0
},
// 切换下一页
nextPage() {
nextPage () {
var p = this.pageNum
p = p < this.pageTotalNum ? p + 1 : 1
this.pageNum = p
document.querySelector(".pdf .show").scrollTop = 0
},
// 顺时针选中角度
clock() {
clock () {
this.pageRotate += 90
},
// 逆时针旋转角度
counterClock() {
counterClock () {
this.pageRotate -= 90
},
// pdf 有密码 则需要输入秘密
password(updatePassword, reason) {
password (updatePassword, reason) {
updatePassword(prompt('password is "test"'))
console.log("...reason...")
console.log(reason)
console.log("...reason...")
},
// 页面加载成功 当前页数
pageLoaded(e) {
pageLoaded (e) {
this.$emit("current", e)
this.curPageNum = e
this.loadedRatio = 1
},
// 异常监听
pdfError(error) {
pdfError (error) {
console.error(error)
},
// 打印所有
pdfPrintAll() {
pdfPrintAll () {
this.$refs.pdf.print()
},
// 打印 第一页和第二页
pdfPrint() {
pdfPrint () {
// 第一个参数 文档打印的分辨率
// 第二个参数 文档打印的页数
this.$refs.pdf.print(100, [1, 2])
},
// 获取当前页面pdf的文字信息内容
logContent() {
logContent () {
this.$refs.pdf.pdf.forEachPage(function (page) {
return page.getTextContent().then(function (content) {
let text = content.items.map((item) => item.str)
......@@ -186,6 +214,9 @@ export default {
})
},
},
beforeDestroy () {
this.pdfSrc = null
}
}
</script>
......
yarn.lock
View file @ b4edbf3b
......@@ -7996,6 +7996,11 @@ pbkdf2@^3.0.3:
safe-buffer "^5.0.1"
sha.js "^2.4.8"
pdfjs-dist-sign@^2.5.208:
version "2.5.208"
resolved "https://registry.npmmirror.com/pdfjs-dist-sign/-/pdfjs-dist-sign-2.5.208.tgz#34c840d01a7d3fa992bcf06709461311083c9cb5"
integrity sha512-/bOZqdVkq1vQzCJY0qH/d6vO739VJ6X9mF7UWEWJ2WoZJij1+NOl+qTQxNgpXACp07/fhxC3GE/1+IgeDq40kQ==
pdfjs-dist@2.6.347:
version "2.6.347"
resolved "https://registry.npmmirror.com/pdfjs-dist/-/pdfjs-dist-2.6.347.tgz#f257ed66e83be900cd0fd28524a2187fb9e25cd5"
......@@ -8804,7 +8809,7 @@ raw-body@2.4.0:
iconv-lite "0.4.24"
unpipe "1.0.0"
raw-loader@^4.0.2:
raw-loader@^4.0.1, raw-loader@^4.0.2:
version "4.0.2"
resolved "https://registry.npmmirror.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==
......@@ -10884,6 +10889,18 @@ vue-observe-visibility@^0.4.4:
resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz#878cb8ebcf3078e40807af29774e97105ebd519e"
integrity sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q==
vue-pdf-signature@^4.2.7:
version "4.2.7"
resolved "https://registry.npmmirror.com/vue-pdf-signature/-/vue-pdf-signature-4.2.7.tgz#44851a425dc89d93fb02574d3f79bccac69a3fb2"
integrity sha512-JPyd46wkY3E8OQZ0VklIco4J2Zo2YsEUz1bfyheDtLd9NaJS0+YYRrfxCotQMLvR1QHNJZmcOsPBZ+5mosHiqQ==
dependencies:
babel-plugin-syntax-dynamic-import "^6.18.0"
loader-utils "^1.4.0"
pdfjs-dist-sign "^2.5.208"
raw-loader "^4.0.1"
vue-resize-sensor "^2.0.0"
worker-loader "^2.0.0"
vue-pdf@^4.3.0:
version "4.3.0"
resolved "https://registry.npmmirror.com/vue-pdf/-/vue-pdf-4.3.0.tgz#d5f790ee7967e7b7aa9089b97b11ab168e19dbd0"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment