import pdfjsLib from "pdfjs-dist"; 创建一个方法用于加载和显示PDF文件: loadPdf(url) { const loadingTask = pdfjsLib.getDocument(url); loadingTask.promise.then(pdf => { // You can use the PDF document loaded here console.log('PDF loaded'); // Fetch the first page pdf.getPage(1).t...
title: 'pdf预览', leftOpt: { preventBack: true }, leftClick: () => { this.backHome() } }) }, backHome() { this.$router.go(-1) }, downLoad() { window.open(this.srcUrl) // 点击下载的时候,浏览器打开pdf }, // 核心代码 等pdf页数加载完成的时候,隐藏加载框 pageLoaded(num) {...
pageLoaded(e){ this.curPageNum = e }, pdfError(error){ console.error(error) }, pdfPrintAll(){ this.$refs.pdf.print() }, pdfPrint(){ this.$refs.pdf.print(100,[1,2]) }, } } 效果如下图: 线上demo地址 展示全部pdf 上面的示例只能显示单页的pdf,并且pdf的总页数也只能在pdf加载完成...
<el-button type="primary" @click.stop="nextPage"> 下一页</el-button> <pdf ref="pdf" :src="url" :page="pageNum" @progress="loadedRatio = $event" @page-loaded="pageLoaded($event)" @num-pages="pageTotalNum=$event" @error="pdfError($event)" @link-clicked="page = $event"> ...
存在一个pdfList数组,数组里面存放pdf文件每一页的路径,通过 v-for 遍历出 pdf 每一页进行预览 <pdf:src="src(item.path)":page="1"@page-loaded="pdfLoaded"></pdf> 想要进行替换pdf第三页时,vue-pdf 组件没有显示出新的 pdf 页 this.pdfList.splice(2,0,{path:'xxx',id:...
首先你需要安装 npm install --save vue-pdf 很多人引用的时候可能会出现只能展示pdf第一页的情况,这时候你可以看下官网的说明 解决印章不显示: 找到我们安装好的 vue-pdf 安装包里的 pdf.worker.js 文件,如图展示路径 ...
@loaded="loadPdfHandler" @num-pages="pageCount = $event" @page-loaded="currentPage = $event" ref="wrapper" class="pdf" ></pdf> 放大 缩小 <
this.pageNum = p; }, nextPage() { var p = this.pageNum; p = p < this.pageTotalNum ? p + 1 : 1; this.pageNum = p; }, pageLoaded(e) { this.curPageNum = e; }, pdfError(error) { console.error(error); }, // 全部加载 ...
Unknown custom element: <pdf> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 代码如下: <pdf :src="pdfSrc" :page="pdfCurrentPage" @num-pages="pdfPageCount=$event" @page-loaded="pdfCurrentPage=$event" @loaded="pdfLoadHandler...
pageCount: 0, src: "", // pdf文件地址 scale: 100, //放大系数 idx: -1, clauseTitle: "", loadedRatio: 0 }; }, created() { // 有时PDF文件地址会出现跨域的情况,这里最好处理一下 let clause = this.$route.query.clause + ""; ...