背景：在实现vue-pdf在线分页预览后，想到很久之前做过的在线预览，使用的是FlexPaper，想重拾一下该技术，然后发现官网变了，下载的压缩包也去除了java(JSP)相关部分。

现官网为：FlowPaper - Responsive online PDF viewer for your website ,提供两种服务，1、已集成封装，需要安装服务；2、自定义在线预览服务，开发人员当然选择后者：

PUBLISH WITH ASP.NET/PHPhttps://flowpaper.com/download/https://flowpaper.com/download/

之前项目使用的是FREE/OPEN SOURCE版本，使用SWFTOOLS进行swf文件转化，基于flash模式实现，当然现在随着flash淘汰，该方式也不推荐使用。本博客基于CLASSIC方式，下载TRY CLASSIC FREE 压缩包 FlowPaper_Annotations_Trial （版本时间2021年12月）。

目录结构：

打开WebStorm或者VSCode，主要使用全局搜索功能。命令行使用CMD=>anywhere 直接运行该目录为网站，默认自动打开浏览器8000端口。

发现自带10页限制，右下角自带LOGO，点击弹窗。

说下思路：

一、10页限制

1、自动打开为html5模式，那么必然不会涉及flash相关，即FlowPaperViewer.swf为无用的文件，那必然是通过js进行控制。

2、找到核心方法，关键字total、pages,使用IDE全局工具寻找关键字，把相关js文件格式化，在FlowPaperViewer.js中方法getNumPages。（该步骤所需时间较长，并且在FlowPaperViewer.js中有2个getNumPages同名方法，以及部分设计到10 的三元判断均需修改。）。

3、debugger调试运行，确认获取总页数的方法，进行js代码修改。

原JS代码：多重三元运算

getNumPages: function () {return this.fa ? (10 > this.C.length ? this.C.length : 10) : (this.C && !this.ea ? (10 > this.C.length ? this.C.length : 10) : (10 > this.ea.numPages ? this.ea.numPages : 10));
}

修改三元估算，如下：

getNumPages: function () {return this.fa ? this.C.length : this.C && !this.ea ? this.C.length : this.ea.numPages;
}

在FlowPaperViewer.js中相关10页的三元判断也要修改，但不是关键代码，可以不进行修改。

本示例使用本地pdf，注释其它加载方式，给出修改后配置：

jQuery.get((!window.isTouchScreen) ? 'UI_flowpaper_desktop_flat.html' : 'UI_flowpaper_mobile.html',function (toolbarData) {jQuery('#documentViewer').FlowPaperViewer({config: {// SWFFile                 : 'docs/Paper.pdf.swf',// IMGFiles                : 'docs/Paper.pdf_{page}.png',// JSONFile                : 'docs/Paper.js',PDFFile: 'pdf/Paper.pdf',Scale: 0.6,ZoomTransition: 'easeOut',ZoomTime: 0.5,ZoomInterval: 0.2,FitPageOnLoad: true,FitWidthOnLoad: false,FullScreenAsMaxWindow: false,ProgressiveLoading: false,MinZoomSize: 0.2,MaxZoomSize: 5,SearchMatchAll: false,StickyTools: true,Toolbar: toolbarData,BottomToolbar: 'UI_flowpaper_annotations.html',InitViewMode: 'Portrait',RenderingOrder: 'html5,html',StartAtPage: '',ViewModeToolsVisible: true,ZoomToolsVisible: true,NavToolsVisible: true,CursorToolsVisible: true,SearchToolsVisible: true,UserCollaboration: true,CurrentUser: 'Test user',WMode: 'window',localeChain: 'zh_CN'}});});

对三处进行注释SWFFile、IMGFiles、JSONFile。

注：这里因不同的pdf加载方式可以逐步尝试修改。

二、LOGO显示

使用浏览器F12，找到默认LOGO，发现dom元素id为‘fpabt’，IDE工具全局搜索，在FlowPaperViewer.js中找到fpabt相关元素，发现是<a><img id='fpabt' /></a>，全部删除即可，或者修改div样式，添加display: none。

三、效果演示

花了半天作了下研究，没有10页限制，也没有flowPaper的LOGO，目标达成。

以上是对该FlowPaper CLASSIC TRIAL 版本的思考，希望对各位看官有帮助。

FlowPaper js分析：10页限制及 LOGO设置相关推荐

excel学习-打印设置（设置每页标题+设置行高+设定页数+插入logo+设置单色打印）
文章目录打印设置设置打印内容每页有标题将所有列设置为一页需要手填表格-设置行高设置指定页数插入公司logo 公司logo抠图设置单色打印打印设置设置打印内容每页有标题将所有列设置为 ...
HTML+CSS+JS 生鲜水果蔬菜商城网站设计——天天生鲜水果蔬菜商城(10页) web前端设计与开发期末作品_期末大作业
HTML5期末大作业:生鲜水果蔬菜商城网站设计--天天生鲜水果蔬菜商城(10页) web前端设计与开发期末作品/期末大作业常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
HTML5期末大作业：动漫网站设计——千与千寻(10页) 含设计报告 HTML+CSS+JavaScript 学生动漫网页设计模板下载海贼王大学生HTML网页制作作品简单漫画网页设计成品 drea
HTML5期末大作业:动漫网站设计--千与千寻(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题材有 ...
HTML5期末大作业：动物网站设计——宠物狗(10页) HTML+CSS+JavaScript 大学生静态网页设计 dw宠物网页设计狗狗网页设计html web课程设计网页规划与设计...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游 ...
web期末网站设计 HTML5+CSS大作业——汽车自驾游(10页) 自驾游主题HTM5网页设计作业成品
HTML5+CSS大作业--汽车自驾游(10页) 主题HTM5网页设计作业成品常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. ...
web期末作业设计网页：动漫网站设计——蜡笔小新(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品动漫网页设计作业 web网页设计与开发 html实训大作业...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游 ...
HTML5期末大作业：体育运动足球网站设计——足球(10页) HTML+CSS+JavaScri大学生体育运动网页设计模板代码校园足球网页作业成品学校足球网页制作模板
HTML5期末大作业:体育运动足球网站设计--足球(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题 ...
python爬取鬼灭漫画+简单JS分析
Python实战社群 Java实战社群长按识别下方二维码,按需求添加扫码关注添加客服进Python社群▲ 扫码关注添加客服进Java社群▲ 作者丨皖渝源自丨快学python(ID:kxpyt ...
Python爬虫实战(四) Python鬼灭漫画爬取+简单JS分析
本次爬取仅供学习,无任何商业用途猪油骨,拿来卤~今天,来分享一下python图片爬取+简单JS分析爬取网址:漫画地址 (这个网站只更新到188话,实际上已经有200多话了) 目录一.获取所有章节 ...

FlowPaper js分析：10页限制及 LOGO设置

背景：在实现vue-pdf在线分页预览后，想到很久之前做过的在线预览，使用的是FlexPaper，想重拾一下该技术，然后发现官网变了，下载的压缩包也去除了java(JSP)相关部分。

一、10页限制

二、LOGO显示

三、效果演示

FlowPaper js分析：10页限制及 LOGO设置相关推荐

最新文章

热门文章

FlowPaper js分析：10页限制 及 LOGO设置

背景：在实现vue-pdf在线分页预览后，想到很久之前做过的在线预览，使用的是FlexPaper，想重拾一下该技术，然后发现官网变了，下载的压缩包也去除了java(JSP)相关部分。

一、10页限制

二、LOGO显示

三、效果演示

FlowPaper js分析：10页限制 及 LOGO设置相关推荐

最新文章

热门文章

FlowPaper js分析：10页限制及 LOGO设置

FlowPaper js分析：10页限制及 LOGO设置相关推荐