Vue中使用pdfJs预览PDF、图片

pdf.js是一个使用HTML5构建的可移植文档格式库。它可以帮助我们在浏览器中构建pdf文档，实现在线查看pdf文件的功能。

实现步骤如下：

1.下载pdfJs到本地（官网下载地址），放到项目根目录下的静态资源目录static文件夹内，将文件命名为pdfJs。

如下图

使用iframe打开

<iframe id="pdfPlayer" src="URL"  frameborder="0" width="100%" height="600px"></iframe>

或者

<iframe id="pdfPlayer" :src="pdfUrl" frameborder="0" width="100%" height="600px"></iframe>

需要注意的是：

file参数中默认只允许传简单路径比如：http://www.aaa.com/bb.pdf.

如果你要浏览的pdf路径需要传参数的话。这时候直接传入的话会解析出错，因为pdf.js无法判断参数是viewer.html的参数呢还是aa.pdf的参数。

viewer.html的参数呢还是aa.pdf的参数。

所以，URL 必须进行encode编码，encodeURIComponent() 把字符串编码为 URI 组件。

Vue中使用pdfJs预览PDF、图片相关推荐

移动端H5+vue使用vue-pdf在线预览PDF
需求是点击查看收据按钮,进入新页面直接显示收据,可以放大.缩小.旋转.下载,没有分页 1.安装 npm i vue-pdf --save 2.使用 <template><div &g ...
如何在vue中实现文件预览功能
文件流如何将各种文件的文件流(blob)转化为线上可以直接预览的数据,这里简单介绍四种不同类型的文件预览.分别是pdf,docx,xlsx,jpg/png/jpeg等.有一个事情是需要重点注意的,文 ...
pdfjs预览pdf报错
跳转之后的页面已经可以出来,blob生成的链接也是有返回的,但是预览是空白,并且控制台警告:Warning: Invalid stream: "FormatError: Bad FCHECK ...
vue 手机移动端预览pdf
最新需求是在手机实现pdf的预览,最终采用的是pdfh5,可以保存为图片,比较方便首先pdf返回的是pdf文件流接收pdf文件流的时候需要设定文件类型responseType: 'arraybuf ...
前端（vue）js在线预览PDF、Word、Excel、ppt等office文件
js解決 window.open("https://view.xdocin.com/view?src=" + encodeURIComponent(url) + '&too ...
Vue项目实现在线预览pdf，并且可以批量打印pdf
最近遇到一个需求,就是要在页面上呈现pdf内容,并且还能用打印机批量打印pdf,最终效果如下: 当用户在列表页面,勾选中两条数据后,点击"打印表单"按钮之后,会跳到如下的预览页面: ...
若依后端实现pdfjs预览PDF文件
PDF.js用于解析和呈现PDF 的通用.基于 Web 标准的平台. 官网地址:http://mozilla.github.io/pdf.js/ 目录一.下载pdfjs安装包 (1)官网下载 (2) ...
通过将文件流放入response中实现在线预览pdf文件
public void getHealthReacordById(Long id, HttpServletResponse response) throws UnsupportedEncodingEx ...
vue中裁剪，预览，上传图片的插件
参考地址: https://github.com/dai-siki/vue-image-crop-upload 转载于:https://www.cnblogs.com/VaeVae/p/1028746 ...

Vue中使用pdfJs预览PDF、图片

Vue中使用pdfJs预览PDF、图片

Vue中使用pdfJs预览PDF、图片相关推荐

最新文章

热门文章