|
@@ -0,0 +1,131 @@
|
|
|
+<template>
|
|
|
+ <div class="pdf-viewer">
|
|
|
+ <div class="pdf-content">
|
|
|
+ <canvas ref="pdfCanvas"></canvas>
|
|
|
+ </div>
|
|
|
+ <div class="pagination">
|
|
|
+ <button @click="prevPage">上一页</button>
|
|
|
+ <span>{{ pageNum }} / {{ pageCount }}</span>
|
|
|
+ <button @click="nextPage">下一页</button>
|
|
|
+ <!-- 添加返回按钮 -->
|
|
|
+ <button @click="goBack">返回</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+window.pdfjsLib = pdfjsLib
|
|
|
+pdfjsLib.GlobalWorkerOptions.workerSrc =
|
|
|
+ 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js'
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogVisible: false,
|
|
|
+ pdfDoc: null,
|
|
|
+ pageNum: 1,
|
|
|
+ pageCount: 0,
|
|
|
+ pdfUrl: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ // 观察 pdfUrl 的变化
|
|
|
+ pdfUrl(newVal) {
|
|
|
+ console.log(newVal,'newVal');
|
|
|
+
|
|
|
+ if (newVal !== this.pdfUrl) {
|
|
|
+ this.dialogVisible = false
|
|
|
+ this.openPdf();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ this.pdfUrl = this.$route.query.url || ''; // 假设pdfUrl是通过查询参数传递的
|
|
|
+ console.log( this.pdfUrl,' this.pdfUrl1111111');
|
|
|
+ this.openPdf()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goBack(){
|
|
|
+ this.dialogVisible = false
|
|
|
+ this.$router.go(-1)
|
|
|
+ },
|
|
|
+ openPdf() {
|
|
|
+ this.dialogVisible = true
|
|
|
+ this.loadPdf()
|
|
|
+ },
|
|
|
+ closeDialog() {
|
|
|
+ this.pdfDoc = null
|
|
|
+ this.pageNum = 1
|
|
|
+ },
|
|
|
+ async loadPdf() {
|
|
|
+ try {
|
|
|
+ // 加载 PDF 文档
|
|
|
+ const loadingTask = pdfjsLib.getDocument(this.pdfUrl)
|
|
|
+ this.pdfDoc = await loadingTask.promise
|
|
|
+ this.pageCount = this.pdfDoc.numPages
|
|
|
+ this.renderPage(this.pageNum)
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error('加载 PDF 失败: ' + error.message)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async renderPage(num) {
|
|
|
+ try {
|
|
|
+ const page = await this.pdfDoc.getPage(num)
|
|
|
+ const canvas = this.$refs.pdfCanvas
|
|
|
+ const ctx = canvas.getContext('2d')
|
|
|
+ const viewport = page.getViewport({ scale:1 })
|
|
|
+
|
|
|
+ canvas.height = viewport.height
|
|
|
+ canvas.width = viewport.width
|
|
|
+
|
|
|
+ await page.render({
|
|
|
+ canvasContext: ctx,
|
|
|
+ viewport: viewport
|
|
|
+ }).promise
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error('渲染 PDF 页面失败: ' + error.message)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ prevPage() {
|
|
|
+ if (this.pageNum <= 1) return
|
|
|
+ this.pageNum--
|
|
|
+ this.renderPage(this.pageNum)
|
|
|
+ },
|
|
|
+ nextPage() {
|
|
|
+ if (this.pageNum >= this.pageCount) return
|
|
|
+ this.pageNum++
|
|
|
+ this.renderPage(this.pageNum)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.pdf-viewer {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100vh; /* 或者固定高度如 800px */
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.pdf-content {
|
|
|
+ flex: 1;
|
|
|
+ overflow: auto; /* 内容超出时显示滚动条 */
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.pagination {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ gap: 20px;
|
|
|
+ padding: 10px;
|
|
|
+ background: #f5f5f5;
|
|
|
+ position: sticky;
|
|
|
+ bottom: 0;
|
|
|
+}
|
|
|
+</style>
|