vue预览pdf文件的几种方法_vue pdf预览(2)

2401_84433570

已于 2024-04-29 18:22:45 修改

阅读量1.3k

点赞数 13

分类专栏：程序员文章标签： vue.js pdf javascript

于 2024-04-29 18:22:44 首次发布

本文链接：https://blog.youkuaiyun.com/2401_84433570/article/details/138321592

版权

程序员专栏收录该内容

176 篇文章

订阅专栏

本文介绍如何在Vue.js中预览PDF文件，包括设置预览地址、缩放、翻页等功能。通过`createLoadingTask`加载PDF并更新状态，结合计算属性和方法实现页面导航和缩放操作。同时，文章强调了在面试和学习中深入理解和解决问题的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


## 方法三：


### 展示效果：


效果一：分页  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/681ad74051364147a17e45ddf4bda709.png)  
 效果二：不分页  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/70fa2ebb74304908b09bd288f90b28df.png)


### 需要包依赖：

"vue-pdf-embed": "^1.1.6",
"vue3-pdfjs": "^0.1.6",


### 代码：


### 自己调参数，选择符合自己的

const props = defineProps({
pdfUrl: {
type: String,
required: true
}
})

// const emit = defineEmits<{ (event: ‘getPdfUrl’, name: string): void }>()
// const getPdfUrl = ()=>{
// emit(‘getPdfUrl’, props.pdfUrl)
// }

const state = reactive({
source: http://192.168.11.50:8102/database/bio/load\_file/BYimage/ncov.pdf, // 预览pdf文件地址
pageNum: 1, // 当前页面
scale: 1, // 缩放比例
numPages: 0, // 总页数
});

const loadingTask = createLoadingTask(state.source);
loadingTask.promise.then((pdf: { numPages: number }) => {
state.numPages = pdf.numPages;
});

.pdf-wrap {
overflow-y: auto;
}

.vue-pdf-embed {
text-align: center;
width: 515px;
border: 1px solid #e5e5e5;
margin: 0 auto;
box-sizing: border-box;
}

.page-tool {
position: absolute;
bottom: 35px;
padding-left: 15px;
padding-right: 15px;
display: flex;
align-items: center;
background: rgb(66, 66, 66);
color: white;
border-radius: 19px;
z-index: 100;
cursor: pointer;
margin-left: 50%;
transform: translateX(-50%);
}

.page-tool-item {
padding: 8px 15px;
padding-left: 10px;
cursor: pointer;
}

const props = defineProps({
pdfUrl: {
type: String,
required: true
}
})

// const emit = defineEmits<{ (event: ‘getPdfUrl’, name: string): void }>()
// const getPdfUrl = ()=>{
// emit(‘getPdfUrl’, props.pdfUrl)
// }

const state = reactive({
source: http://192.168.11.50:8102/database/bio/load\_file/BYimage/ncov.pdf, // 预览pdf文件地址

});

const loadingTask = createLoadingTask(state.source);
loadingTask.promise.then((pdf: { numPages: number }) => {

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】