|
@@ -1,131 +0,0 @@
|
|
|
-<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>
|