|
@@ -1,44 +1,34 @@
|
|
|
-<!-- PdfViewer.vue -->
|
|
|
|
|
<template>
|
|
<template>
|
|
|
<div>
|
|
<div>
|
|
|
- <pdf
|
|
|
|
|
- v-for="i in numPages"
|
|
|
|
|
- :key="i"
|
|
|
|
|
|
|
+ <!-- 使用 iframe 加载 PDF 文件 -->
|
|
|
|
|
+ <iframe
|
|
|
:src="file"
|
|
:src="file"
|
|
|
- :page="i"
|
|
|
|
|
- style="display: inline-block; width: 100%;"
|
|
|
|
|
- ></pdf>
|
|
|
|
|
|
|
+ width="100%"
|
|
|
|
|
+ height="800px"
|
|
|
|
|
+ style="border: none;"
|
|
|
|
|
+ ></iframe>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
-import pdf from 'vue-pdf'
|
|
|
|
|
-
|
|
|
|
|
export default {
|
|
export default {
|
|
|
- components: {
|
|
|
|
|
- pdf
|
|
|
|
|
- },
|
|
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
- file: null,
|
|
|
|
|
- numPages: undefined
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ file: null, // PDF 文件的 URL
|
|
|
|
|
+ };
|
|
|
},
|
|
},
|
|
|
created() {
|
|
created() {
|
|
|
- this.file = this.$route.query.file
|
|
|
|
|
- this.loadPdf()
|
|
|
|
|
|
|
+ // 从路由 query 参数中获取 PDF 文件 URL
|
|
|
|
|
+ this.file = this.$route.query.file;
|
|
|
},
|
|
},
|
|
|
- methods: {
|
|
|
|
|
- loadPdf() {
|
|
|
|
|
- const loadingTask = pdf.createLoadingTask(this.file)
|
|
|
|
|
- loadingTask.promise.then(pdf => {
|
|
|
|
|
- this.numPages = pdf.numPages
|
|
|
|
|
- })
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
|
|
+};
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
|
/* 添加一些样式以适应你的需求 */
|
|
/* 添加一些样式以适应你的需求 */
|
|
|
|
|
+iframe {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100vh; /* 使 iframe 占满整个视口高度 */
|
|
|
|
|
+ border: none; /* 去除 iframe 的边框 */
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|
