方法一: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版本中,该写法无效。 ...
在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'; // 引入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); ...
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,组件功能也...
1.使用vue-pdf-embed 1.npm 安装所需插件 npmivue-pdf-embed@1.2.1 npm i vue3-pdfjs@0.1.6 2.封装组件(创建pdfPriview.index 文件) <template><divclass="pdf-preview"><vue-pdf-embed:source="state.source"v-for="page in state.numPages":page="page":key="page"textLayer></vue-pdf-embed>...
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 ...
template> <script setup> import { reactive, onMounted, computed } from "vue"; import VuePdfEmbed from "vue-pdf-embed"; import { createLoadingTask } from "vue3-pdfjs"; const props = defineProps({ pdfUrl: { type: String, default: "", }, }); const state = reactive({ source: ...
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" ...