这里的 ../ 是跟你写 iframe 标签的文件位置决定的,baseUrl 跟你 vue 打包有关,就是 vue.config.js 配置的 publicPath(规定服务器开始解析的目录)有关。 比如我的就可以直接写成 ../../../ApprControlWeb/static/pdfjs/web/viewer.html?file=${encodeURIComponent(previewUrl)},因为我规定的解析的目录不管...
你首先得准备一个 pdf 插件包,比如:我这边的项目包里的 public 文件夹的 lib 文件夹下面就有一个 pdf 的插件包,里面包含 build 以及 web 两个文件夹。这里我选择是 pdfjs-2.14.305-legacy 版本 自己去 http://mozilla.github.io/pdf.js/getting_started/#download 下载一个...
npm install --save vue-pdf 引入 import pdf from "vue-pdf 自定义封装pdf预览组件 <template> <el-dialog :visible.sync="pdfDialog" :close-on-click-modal="false" :show-close="false" width="900px" top="52px" > <!-- 上一页 --> 上一页 {{ currentPage }} / {{ ...
其实我们很容易就会发布属于自己的npm包,下面我会一步步讲讲如何将上述的vue-pdf-viewer组件发布到npm官网的。 1.执行npm init 执行npm init后,根据命令行提示,依次输入 包名称 版本 描述 入口文件 测试脚本 关键词 作者 版权信息(协议) 等等,最后OK,生成一个package.json文件。 2.确定包的目录结构 package.jso...
你首先得准备一个 pdf 插件包,比如:我这边的项目包里的 public 文件夹的 lib 文件夹下面就有一个 pdf 的插件包,里面包含 build 以及 web 两个文件夹。这里我选择是pdfjs-2.14.305-legacy版本 自己去http://mozilla.github.io/pdf.js/getting_started/#download下载一个稳定版本的就行,目录大致如下 ...
1. 2. 二、vue项目中使用pdf.js预览pdf文件 首先肯定是导入插件,我是从官网直接下载,链接:点击打开链接,注意放在static文件目录下, 这里面有核心的pdf.js和pdf.worker.js,以及展示pdf的viewer页面把它作为静态资源来编译,基本想要的build和web这两个重要文件夹的东西都正常编译。当然你可以可以npm install一下,...
this.currentPage =1 // 加载的时候先加载第一页 } } } .pdf { margin:0 auto; } .main { position:relative; margin:0 auto; width:50%; height:800px; overflow:scroll; } 3、 效果 4、遇到的问题 1)引入时报错 2)将pdf文件放在当前目录显示不出来,移至public目录下就显示了...
在项目创建完成后,进入项目目录: cdmy-project 现在,你已经准备好开始开发了!你可以使用任何喜欢的代码编辑器打开项目文件夹,并按照下一步的指导继续进行 PDF 预览功能的实现。 3 集成 PDF.js 到 Vue 项目 为了将PDF.js集成到Vue项目中,您可以按照以下步骤进行操作: ...
要在Vue中展示服务器上的PDF文件,可以使用下面的步骤: 在Vue项目的根文件夹中创建一个文件夹,例如"pdf",用于保存服务器上的PDF文件。 创建一个Vue组件用于展示PDF文件,命名为"PdfViewer"。 在"PdfViewer"组件中,引入一个第三方的PDF查看器插件,例如"pdf.js"。
vue-pdf预览在线地址文件和本地文件(base64) npm i vue-pdf vue-pdf最好别用4.2,因为他依赖的pdfjs为2.5 但他会下载最新的2.16版本,这个版本和原来的2.5结构目录不一样 一定要使用4.2的话就手动装一下pdfjs-dist的2.5.207版本 ==> npm i pdfjs-dist@2.5.207 ...