Integrate preview with other web applications

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

Advantages:

Quick integration into an iframe in your own web application.
All OpenKM MIME types supported by the preview modules.
Can be used without being logged into OpenKM.
Can preview documents that are not in OpenKM.

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

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

These components preview the 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 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 code file, for example .java, .php, etc.
mpgUrl	String	The full URL of an .mp4 or .mp3 file.
pdfUrl	String	The full URL of a PDF document. Required by the Flexpaper previewer.
file	String	The full URL of a PDF document. Required by the PDF.js previewer. PDF.js also requires the pdfUrl parameter.
previewEngine	String	The type of preview to be used by the server. By default it is PDF.js, but with this parameter you can force Flexpaper. OpenKM supports Flexpaper and PDF.js as PDF previewers.

Code sample

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document Preview</title>
</head>

<body>
    <div align="left">
        Left panel
    </div>
    <div align="right">
        Preview panel<br />
        <iframe src="http://localhost:8080/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, keep in mind to set "Access-Control-Allow-Origin" in the response header.

The Java code section below can provide you with 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 cannot be previewed and you may get a screen like this:

Check if you see some error in your OpenKM log.

Check the JavaScript console; if it shows an error like "missing header CORS 'Access-Control-Allow-Origin')" then you must change your web server configuration to allow it.

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

Table of contents [ Hide Show ]

Troubleshooting

OpenKM 7.1

Integrate preview with other web applications

Troubleshooting