Background: after realizing Vue PDF Online paging preview, I thought of the online preview I had done a long time ago. I used FlexPaper. I wanted to pick up the technology. Then I found that the official website changed and the downloaded compressed package also removed the relevant parts of java(JSP).
The current official website is: FlowPaper - Responsive online PDF viewer for your website , Two services are provided: 1. It has been integrated and encapsulated and needs to install services; 2. Customize the online preview service. Of course, developers choose the latter:
https://flowpaper.com/download/In the previous project, the FREE/OPEN SOURCE version was used. SWFTOOLS was used to convert swf files, which was implemented based on flash mode. Of course, this method is not recommended now with the elimination of flash. This blog is based on the class method. Download the try class free compressed package FlowPaper_Annotations_Trial (version time: December 2021).
Directory structure:
Open WebStorm or VSCode, mainly using the global search function. The command line uses CMD = > anywhere to directly run the directory as a website. By default, the browser 8000 port is automatically opened.
It is found that there is a 10 page limit. There is a LOGO in the lower right corner. Click the pop-up window.
Say the following ideas:
1, 10 page limit
1. If it is automatically opened in html5 mode, flash related will not be involved, that is, FlowPaperViewer.swf is a useless file, which must be controlled through js.
2. Find the core method, the keywords total and pages, use the IDE global tool to find the keywords, format the relevant JS files, and use the method getNumPages in FlowPaperViewer.js. (this step takes a long time, and there are two getNumPages methods with the same name in FlowPaperViewer.js).
3. debugger debug and run, confirm the method to obtain the total number of pages, and modify the js code.
Original JS code: multiple ternary operation
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));
}Modify to if else:
getNumPages: function () {
if (this.fa) {
if (10 > this.C.length) {
totalCount = this.C.length;
} else {
totalCount = 10;
}
} else {
if (this.C && !this.ea) {
if (10 > this.C.length) {
totalCount = this.C.length;
} else {
totalCount = 10;
}
} else {
if (10 > this.ea.numPages) {
totalCount = this.ea.numPages;
} else {
totalCount = 10;
}
}
}
}Debug again, find the correct page number and modify the code as follows:
getNumPages: function () {
let totalCount = 0;
debugger
if (this.fa) {
if (10 > this.C.length) {
totalCount = this.C.length;
} else {
totalCount = 10;
}
} else {
if (this.C && !this.ea) {
if (10 > this.C.length) {
totalCount = this.C.length;
} else {
totalCount = 10;
}
} else {
// if (10 > this.ea.numPages) {
totalCount = this.ea.numPages;
// } else {
// totalCount = 10;
// }
}
}
return totalCount;
}At the same time, it must be noted that the above judgment conditions are related to the config configuration item when the front end is created.
Give the modified configuration:
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'
}
}
);
});Note SWFFile, IMGFiles and PDFFile at three places.
2, LOGO display
Use browser F12 to find the default LOGO. It is found that the dom element id is' fpabt '. The IDE tool searches globally and finds fpabt related elements in FlowPaperViewer.js. It is found that it is < a > < img id ='fpabt '/ > < / a >, delete all.
3, Effect demonstration
Spent half a day doing research, There is no 10 page limit and no LOGO of flowPaper. The goal is achieved.
The above is a reflection on the flowpaper class trial version, which I hope will be helpful to you.