方法一:vue-pdf-embed@1.2.1版本获取总页数方法: importVuePdfEmbedfrom"vue-pdf-embed";onMounted(async()=>{constdoc=awaitVuePdfEmbed.getDocument(pdfState.source).promise// 获取文件总页数console.log(doc.numPages);}); 1. 2. 3. 4. 5. 6. 7. 注:在vue-pdf-embed@2.x版本中,该写法无效。 ...
import { VuePdfEmbed } from 'vue-pdf-embed'; // 引入vue-pdf-embed组件 export default { components: { VuePdfEmbed }, setup() { const pdfUrl = ref('https://example.com/your-pdf-file.pdf'); // PDF文件的URL const currentPage = ref(1); // 当前页数 const totalPages = ref(0); ...
在Vue 3中获取PDF页数,你可以使用vue-pdf-embed库或pdfjs-dist库。以下是使用这两种方法的详细步骤: 方法一:使用 vue-pdf-embed 库 安装vue-pdf-embed bash yarn add vue-pdf-embed@1.2.1 注意:这里指定了安装版本为1.2.1,因为2.x版本依赖的pdfjs-dist版本为3.x,可能与现有项目不兼容。 在Vue组件中...
import VuePdfEmbed from "vue-pdf-embed"; const PDF = require('pdfjs-dist') // 页面报错解决,在将 pdfjs-dist/build/pdf.worker.js 复制一份放到项目 public 目录下后引入 PDF.GlobalWorkerOptions.workerSrc = '/pdf.worker.js' // 引入文件 import pdfUrl from '@/assets/file/example.pdf' export...
首先npm install pdfjs-dist --save npm直接下载插件 npm install --save pdfjs-dist@2.0.943,@2.0.943这是指定版本号,不需要指定版本的就不需要带,下载后在使用的页面直接引入。 然后直接设置pdf路径就可以直接展示,downloadUrl 是插件中的viewer.html地址,resFile是文件下载地址,到此就能正常预览PDF,组件功能也...
importVuePdfEmbedfrom"vue-pdf-embed";import{ createLoadingTask }from"vue3-pdfjs/esm";// 获得总页数 AI代码助手复制代码 使用vue3的reactive定义一些页数,页码,PDF文件预览地址变量 conststate=reactive({source: props.pdfUrl, 预览pdf文件地址pageNum:1, 当前页面scale:1, // 缩放比例numPages:0, // 总...
{ ref, onMounted } from 'vue'; import VuePdfEmbed from 'vue-pdf-embed'; import { createLoadingTask } from 'vue3-pdfjs/esm'; // 获得总页数 import testpdf1 from '@/assets/zhjx-xrkg/testpdf1.pdf'; const props = defineProps<{ activePage: number; // 当前页 }>(); const emits ...
其中cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.9.359/cmaps/' 需要找到你"vue-pdf-embed":"1.2.1"依赖包pdfjs-dist的版本号,如图是2.9.359版本。 附上官方解释:https://github.com/hrynko/vue-pdf-embed/tree/v1 验证后已解决文字不显示的问题。
前些天,公司的一个移动端项目中,有个这样的需求,点击按钮,请求后台获取PDF地址,实现PDF预览,需要放大缩小翻页功能。因为之前没做过,在百度谷歌乱搜一通,有用标签iframe、embed、object的,也有用PDFObject的,还有用PDF.js的。前者用标签的方法我一一试过,没成功,特别是结合vue开发。后者经过尝试,我优先用了在PDF...
import pdf from "vue-pdf"; import VuePdfEmbed from "vue-pdf-embed"; 1. 2. 二.在上传文件组件的文件列表处绑定预览方法 <Upload.Dragger style="position: relative; width: 80%; cursor: pointer" :maxCount="1" :beforeUpload="beforeUpload" ...