前端在线预览PDF文件

如何在vue项目中预览PDF格式的文件

需求：在vue3.x项目中预览pdf文件
提供以下三种方案：
1.Vue-pdf：适用于vue2.x版本，vue3.x需要改一些源码(vue2.x项目极力推荐，vue3.x需要斟酌)
2.Pdf.js：该插件推荐通过其中提供的viewer.html直接展示，优点，使用较简单
3.pdf-dist：pdf.js的npm版本，优点可以通过npm直接下载到项目中。

【读前必看】因为项目是vue3.x版本，因此在这里着重使用第2方案。
第三种方案，个人感觉可以使用到移动端，后期有时间，可以再次记录下。
好了，接下来进入正题

第二种方案：
步骤1：进入Pdf.js官网：https://mozilla.github.io/pdf.js/

步骤2：单击下载

步骤3：下载对应版本的包(自己随情况而定，可直接下载最新版)

步骤4：将下载好的压缩包解压，并复制 build和web文件夹

步骤5：在vue项目的public文件夹中新建static文件，并将build和web文件夹粘贴到static文件下。粘贴之后的结构目录如图所示。

步骤6：通过iframe引入viewer.html

运行项目，页面显示下图pdf，说明引入成功。Pdf.js在viewer.html同目录下面含有一个固定的测试pdf文件。

拓展：在实际业务开发中，如何和后端完成pdf预览展示的功能
【重点】一般在项目中如果需要预览文件可能会遇到以下几种情况。
1.后端返回远程服务器地址，前端如何利用pdf.js进行预览
前端：需要用encodeURIComponent包裹住pdf的远程服务器地址

此时控制台中，会报跨域错误

解决方案：打开viewer.js，将2189行的代码注释

结果：此时可以成功访问

2.后端返回pdf文件流，前端如何利用pdf.js进行预览
前端：将接口赋值给file参数，同预览远程服务器地址的方式差不多，不过需要加上&.pdf

文件流返回的数据格式如下

3.前端如何直接预览本地pdf文件

打开viewer.js文件,可以看见52行有一个固定的pdf文件地址，这就是pdf.js自带的测试pdf文件，我们只需要将该值更改为你本地的pdf文件地址即可。

更改为

value值是你存放pdf文件的地址
此时，打开项目页面，就可以预览本地的pdf文件了。
【注意】这里可以不直接写死，可以动态获取，这个比较简单，这里就不过多叙述了。

Node后端代码展示【可作为参考】

前端在线预览PDF文件相关推荐

html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件方式一将pdf ...
html做在线预览pdf文件,html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件方式一将pdf ...
android 在线预览pdf文件
android原生webView不支持预览pdf文件,ios却可以,所以android想要实现在线预览webView要通过其他方法,有以下几种方法: 1.andorid原生自带的pdf管理库,主要提供 ...
如何在html中在线预览pdf文件？
方法1:使用 jquery js 库 1.引入 jquery-3.1.1.min.js 和 jquery.media.js 两个js文件,下载保存到本地下载连接:jquery-3.1.1.min.j ...
Vue-pdf实现在线预览PDF文件
前言在大多数项目中都会遇到在线预览PDF文件,项目使用的是element ui,使用vue-pdf实现. 安装依赖 npm install --save vue-pdf 相关参数参数介绍: url ...
uniapp在线预览pdf文件
公司要求uniapp打包的h5和app都要能在线预览pdf文件.最开始是想找uniapp的插件,去插件市场搜了下,没得几个插件可用,且需要收费,所以直接用的pdf.js插件实现,在h5以及h5打包的a ...
网页中实现安卓手机在线预览PDF文件
写在前面:本文为转载,原文链接:https://blog.csdn.net/super_DuoLa/article/details/90207965原文链接苹果手机可以直接在线预览PDF文件,而安卓 ...
html 在线预览pdf功能,html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件最近遇到一个需求,要在html页面查看pdf生成的pdf文件!javascript 翻来覆去找到两种办法 ,最后采用了jquery.media.js插 ...
js在线预览pdf文件
js在线预览PDF文件一.效果预览二.实现代码: <html> <head> <meta http-equiv="Content-Type" co ...

前端在线预览PDF文件

如何在vue项目中预览PDF格式的文件

前端在线预览PDF文件相关推荐

最新文章

热门文章