Integrate preview with other web applications

You can integrate the OpenKM web preview module into other web applications quickly.

Advantatges:

Quickly integration into an iframe in your own web application.
All supported OpenKM MIME types from preview modules.
Can be used without being logged into OpenKM.
Can preview documents which are not into OpenKM.

If your OpenKM is available from http://your_domain/OpenKM then, the preview OpenKM url module should be your http://your_domain/OpenKM/preview?docUrl=http://localhost/test.pdf

The supported MIME types depends on your OpenKM configuration and OpenKM conversion service.

This components previes most common file types:

PDF, Microsoft Office and OpenOffice
Images like JPG, PNG, TIFF, MP4, MP3
Source code files like Java, PHP, HTML, SQL

Preview parameters:

Parameter	Type	Description
docUrl	String	The full url of a document. We recommend using it for all the file types.
swfUrl	String	The full url of a .swf file.
dxfUrl	String	The full url of a .dxf file.
dwfUrl	String	The full url of a .dwf file.
htmUrl	String	The full url of a .html file.
codUrl	String	The full url of a file with code into, for example .java, .php, etc. files.
mpgUrl	String	The full url of a .mp4 and .mp3 file.
pdfUrl	String	The full url of a pdf document. Required by Flexpaper previewer.
file	String	The full url of a pdf document. Required by PDF.js previewer. PDF.js also require pdfUrl parameter
previewEngine	String	The type of preview to be used by server. By default is PDF.js but with this parameter you can force to Flexpaper OpenKM support Flexpaper and PDF.js as pdf previewers

Code sample

<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <div align="left">
            Left panel
        </div>
        <div align="right">
            Preview panel<br/>
            <iframe src="http://localhost:8180/OpenKM/Preview?docUrl=http://localhost/test.pdf" style="width:800px; height:600px" frameborder="0" marginwidth="0" marginheight="0" />
        </div>
    </body>
</html>

If you create your own downloading service take in mind to set into the response the "Access-Control-Allow-Origin" in the header.

The java code section below can provide you some ideas about it:

/**
 * Prepare to send the file.
 */
public static void prepareSendFile(HttpServletRequest request, HttpServletResponse response, String fileName,
                     String mimeType, boolean inline) throws UnsupportedEncodingException {
    String userAgent = getHeader(request, "user-agent").toLowerCase();
    fileName = decodeEntities(fileName);

    // Disable browser cache
    response.setHeader("Expires", "Sat, 6 May 1971 12:00:00 GMT");
    response.setHeader("Cache-Control", "must-revalidate");
    response.addHeader("Cache-Control", "no-store, no-cache, must-revalidate");
    response.addHeader("Cache-Control", "post-check=0, pre-check=0");
    response.setHeader("Pragma", "no-cache"); */

    // Allow to use files in different domains
    response.setHeader("Access-Control-Allow-Origin", "*");

    // Set MIME type
    response.setContentType(mimeType);

    if (userAgent.contains("msie") || userAgent.contains("trident")) {
        log.debug("Agent: Explorer ({})", request.getServerPort());
        fileName = URLEncoder.encode(fileName, "UTF-8").replaceAll("\\+", " ");

        if (request.getServerPort() == 443) {
            log.debug("HTTPS detected! Apply IE workaround...");
            response.setHeader("Cache-Control", "max-age=1");
            response.setHeader("Pragma", "public");
        }
    } else if (userAgent.contains("iphone") || userAgent.contains("ipad")) {
        log.debug("Agent: iPhone - iPad");
        // Do nothing
    } else if (userAgent.contains("android")) {
        log.debug("Agent: Android");
        fileName = URLEncoder.encode(fileName, "UTF-8").replaceAll("\\+", " ");
    } else if (userAgent.contains("mozilla")) {
        log.debug("Agent: Mozilla");
        fileName = MimeUtility.encodeText(fileName, "UTF-8", "B");
    } else {
        log.debug("Agent: Unknown");
    }

    if (inline) {
        response.setHeader("Content-disposition", "inline; filename=\"" + fileName + "\"");
    } else {
        response.setHeader("Content-disposition", "attachment; filename=\"" + fileName + "\"");
    }
}

/**
 * Get HTTP header.
 */
private static String getHeader(HttpServletRequest request, String name) {
    String value = request.getHeader(name);

    if (value != null) {
        return value;
    } else {
        return EMPTY_STRING;
    }
}

/**
 * decodeEntities
 */
private static String decodeEntities(String fileName) {
    String tmp = fileName.replaceAll("&amp;", "&");
    tmp = tmp.replaceAll("&lt;", "<");
    tmp = tmp.replaceAll("&gt;", ">");
    tmp = tmp.replaceAll("&#34;", "\"");
    tmp = tmp.replaceAll("&#39;", "'");
    return tmp;
}

Troubleshooting

There are several reasons why the document is not able for previewing and you get a screen like this:

Check if you see some error in your OpenKM log.

Take a look in the javascript console, if it's shown an error like "missing header CORS 'Access-Control-Allow-Origin')" then you must change your web server configuration to allowing it.

At http://enable-cors.org/server_apache.html you have information about how to enable Access-Control-Allow-Origin in the Apache web server.

Table of contents [ Hide Show ]

Troubleshooting

OpenKM 6.4

Integrate preview with other web applications

Troubleshooting