【Vue】vue2使用vue-pdf预览pdf文件，预览多页，在线预览方式二，vue页面内预览，无需额外pdfjs包，保姆级教程
系列文章目录
提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
参考文章1
参考文章2
可以先看参考文章，再来看我的，这个作者的简洁粗暴，上手就能用，我写的主要针对新手小白
但是只做了预览，如果需要切换上一页、下一页，请看参考2
提示：以下是本篇文章正文内容，下面案例可供参考
一、下载vue-pdf
官网地址
npm install vue-pdf -S 二、使用步骤
1.创建页面
我需要一个vue页面来预览文件，同时，参数是通过url地址传进来的。
在views下建一个文件夹名叫viewPDF
2.配置路由
代码如下（示例）：
{ path: '/viewPDF', name: 'viewPDF', component: () => import('../views/viewPDF/index.vue'), meta: { title: "预览pdf文件" }, } 示例路径如下
http://192.168.0.6:9000/viewPDF?filePath=你的文件路径
我的文件路径是
/profile/upload/2023/09/12/制药工程综合实验讲义_20230912100721A002.pdf
在路径上，不需要去拼接/dev-api
这个拼接的事，放在这个页面中去做
3. 编写页面（默认多页面）
由于代码简单，不拆分了
直接粘贴替换全部就好了
<template> <div> <pdf v-for="i in numPages" :key="i" :src="pdfUrl" :page="i"> </pdf> </div> </template> <script> import pdf from 'vue-pdf' export default { name: "vinit", components: { pdf }, data() { return { pdfUrl: '', numPages: undefined, } }, computed: { // 当前页面链接 http://192.168.0.6:9000/viewPDF?filePath=测试.pdf // return http://192.168.0.6:9000 trimmedUrl() { // 完整的URL const fullUrl = window.location.href; // 使用URL对象来解析URL const urlObject = new URL(fullUrl); // 获取截取后的域名和端口号部分 const trimmedUrl = `${urlObject.protocol}//${urlObject.host}`; return trimmedUrl; } }, watch: {}, filters: {}, created() { }, mounted() { this.getTotal() }, methods: { // 获取pdf总页数 getTotal() { // 多页pdf的src中不能直接使用后端获取的pdf地址 否则会按页数请求多次数据 let loadingTask = this.trimmedUrl + process.env.VUE_APP_BASE_API + this.$route.query.filePath // 需要使用下述方法的返回值作为url this.pdfUrl = pdf.createLoadingTask(loadingTask) // 获取页码 this.pdfUrl.promise.then(pdf => { this.numPages = pdf.numPages; }).catch(error => { }) } }, } </script> 4. 单页pdf预览
基础用法
总结
更多方法看官网
