前景回顾：

上一次说到使用浏览器自带的预览pdf功能所遗留的问题，360浏览器不够给力，IE的我没测，估计也不行，于是乎我又翻阅资料（度娘）找到了一种新的实现方式，使用pdf.js实现如果想看使用浏览器实现预览pdf可以看我这篇博客传送门

环境搭建：

**先下载一个pdf.js 咱走官方渠道，直接去官网下载官网下载
这里推荐一个vue小demo，vue-pdf.js,我会以该demo为基础来实现预览pdf功能。

简单实现：

下载好pdf.js的源码，放到自己的项目中，打开viewer.html会自动跳转到一个pdf文件，这个pdf文件是官方的事例文件。如果我们只需要打开一个pdf文件的话，我们只需要将官方的文件替换一下即可。那么这个文件要在哪里替换呢？？？

在viewer.js文件中，我们搜索defaultUrl，大概在3500行左右，就可以发现如上图一样的代码，（注意：不同版本的pdf.js可能会有点差异）只需要将value值更改即可实现预览pdf功能。
但是这样的实现并不能解决需求，我们肯定是要动态的获取我们想要预览的pdf，前端传值，我们根据不同的值来响应不同的pdf，那这样我们该怎么做呢

复杂实现：

刚刚让各位下载的vue小demo就派上用场了。接下来我会在该demo的基础上稍作修改进行功能实现。
项目跑起来主要长这样

主要讲解两个实现方法，一种是在viewer.html后拼接文件的url，另一种是后端返回流，前端解析预览。

拼接文件url实现方式

** 这种方式最简单，但是会遇到典型的跨域问题，不过也好解决，文件一般都放在资源服务器中，如果是自己搭建的，在网上找找如何解决跨域即可，不过我觉得还是用别人做好的省事，我们用的就是阿里云的OSS，用阿里云的你需要在阿里云上配置一下OSS，Bucket的跨域，至于在哪些域能访问就看你个人需求了**
注意:如果仍报跨域错误请找到viewer.js文件注释一段代码如下图(大概在1730行左右的样子,如果继续报错,建议重新build)

前端代码实现：

主要看checkLocal方法，在html后拼接file=url即可打开，这里需要注意一下，url需要编码，这里推荐使用global对象的encodeURIComponent方法，有效的URI中不能包含某些字符，例如空格。而这URI编码方法就可以对URI进行编码，它们用特殊的UTF-8编码替换所有无效的字符，从而让浏览器能够接受和理解。

读取文件流预览pdf

该方法配置稍微多一点，前后端都需要写一些东西，直接贴代码
前端代码
axios配置

主要的代码就是创建一个blob，不懂啥意思，百度了一下康康吧

通过URL.createObjectURL方法创建一个xxx对象（不懂用就完事了）

后端代码：

这里的contentType和前端创建blob时设置的要一致。如果还有问题的话可以留言区讨论一下。
谢谢各位帅哥美女的观看，记得点赞关注加收藏哟~~~

springboot+vue整合pdf.js实现预览pdf相关推荐

fis3+vue+pdf.js制作预览PDF文件或其他
人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...
使用pdf.js来预览pdf文件_适用于Dynamics365与PowerApps的注释预览组件
powerapps/dynamics365适用的注释预览/批量下载组件自定义组件为预览功能原生预览支持的文件类型:图像,zip,音频,pdf 支持批量打包注释为zip下载到本地使用浏览器预览支持 ...
pdf.js在线预览PDF文件实现
pdf.js是一款功能比较强大的在线预览PDF插件,自带"打印","搜索","翻页"等功能,强大且实现方便,并且兼容性比较好(兼容ie10及 ...
vue版pdf.js 在线预览pdf文件流
1.简介由于我使用的是若依版的vue前端框架(ElementUI二开),因此不知道为什么在前端配置pdf.js一直无法生效,所以换了一个思路,将pdf.js相关文件放置在后台代码中,以访问后台页面的 ...
pdf.js 远程预览pdf文件 Error: file origin does not match viewer's
解决办法: 修改viewer.js 找到: if (origin !== viewerOrigin && protocol !== "blob:") {throw ...
js在线预览pdf文件
js在线预览PDF文件一.效果预览二.实现代码: <html> <head> <meta http-equiv="Content-Type" co ...
html5 pdf.js 使用方法,PDF 文件在线预览(pdf.js 使用教程)
因项目开发需要在线展示 PDF文件,为解决 PDF文件在浏览器打开后电子签章.电子签名等展示不全且部分浏览器兼容问题特利用pdf.js解决该问题: pdf.js框架为HTML5,无需任何本地支持,兼 ...
网页中动态嵌入PDF文件/在线预览PDF内容
网页中动态嵌入PDF文件/在线预览PDF内容https://www.cnblogs.com/xgyy/p/6119459.html #网页中动态嵌入PDF文件/在线预览PDF内容# 摘要:在web开发 ...
Springboot + layui + FTP文件上传删除 + HTTP文件下载预览 + pdf.js文件预览（项目实战总结）
文件管理 0.需求及前言 1.前端,上传按钮嵌入数据表格中 2.利用IIS部署FTP文件服务器 3.后台FTP连接和文件操作 4.FTP遇到的问题和解决方案 5.预览PDF文件V1.0:FTP+临时文 ...

springboot+vue整合pdf.js实现预览pdf