PDF links and annotations are key features that make PDFs interactive. By adding clickable links, you can guide readers to additional information or resources that cannot be included directly within the PDF, enhancing the overall user experience.

dFlip support such links and make PDF Flipbooks interactive and informative.

3D Flipbook Alice in Wonderland

Customizations

You can change or hide the color of PDF links to better match your website’s design. By default, links appear yellow and highlighted, but you can use custom CSS to adjust their color or styling, ensuring they blend seamlessly with your site’s color scheme.

/* Make the highlight color red */
section.linkAnnotation a, a.linkAnnotation, a.customLinkAnnotation, .customHtmlAnnotation, .customVideoAnnotation{ 
    background-color: red; 
}

If the highlighted colors are an annoyance, you can totally hide them too.

/* Make the highlight transparent - no color */
section.linkAnnotation a, a.linkAnnotation, a.customLinkAnnotation, .customHtmlAnnotation, .customVideoAnnotation{
    opacity:0; 
}

Optimizations

Why is PDF loading slowly?

DearFlip supports partial loading by default, which allows PDFs to load faster in chunks. However, partial loading can be affected if it’s disabled or misconfigured.

One common issue is when GZIP compression is enabled for PDF files. Since PDFs are already compressed, enabling GZIP can prevent partial loading, causing the entire PDF to load at once and slowing down performance.

Disable gzip for PDF in .htaccess file.

<IfModule mod_headers.c>
    <FilesMatch "\.pdf$">
        RewriteRule ^(.*)$ $1 [NS,E=no-gzip:1,E=dont-vary:1]
    </FilesMatch>
</IfModule>

Further Reading at StackOverFlow https://stackoverflow.com/questions/9249243/how-to-disable-apache-gzip-compression-for-some-media-files-in-htaccess-file

 

Make PDF file smaller, Web-Ready!

Also, make sure your PDF is Web optimized. 50MB for 10 pages is not good for web use. Optimize the PDF and make it as small as 5MB or less. Maybe this can be useful: https://www.iskysoft.com/edit-pdf/optimize-pdf-mac.html

https://sourceforge.net/projects/workerpdf

There is a CORS (Cross-Origin) issue and PDF is not loading!

This occurs when the file and page are in HTTP and https mixed protocol. This is a result of improper https redirection. We recommend using the proper setup to redirect every HTTP request to https to avoid any conflict.

If you are using the file from another domain, make sure you have a proper CORS setup done in another domain.

For Apache Server, add following lines in .htaccess file

Header set Access-Control-Allow-Origin "*" 
Header set Access-Control-Allow-Headers "Range" 
Header set Access-Control-Expose-Headers: "Accept-Ranges, Content-Encoding, Content-Length, Content-Range"

More Info: https://enable-cors.org/server.html

Note: CORS access settings may not be available for servers like Google Drive, One Drive, or other file sharing services. They do so to protect their bandwidth. These solutions are possible for servers that are owned by the customers or have access to such settings.