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 logging into OpenKM.
- Can preview documents that are not in OpenKM.
If your OpenKM is available from http://your_domain/openkm, then the OpenKM preview URL should be http://your_domain/openkm/Preview?docUrl=http://localhost/test.pdf
The supported MIME types depend on your OpenKM configuration and OpenKM conversion service.
These components preview the most common file types:
- PDF, Microsoft Office and LibreOffice
- Images like JPG, PNG, TIFF, and media like 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 a .mp4 or .mp3 file. |
pdfUrl |
String |
The full URL of a PDF document. Required by PDF.js previewer. |
file |
String |
The full URL of a PDF document. Required by PDF.js previewer. |
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 the "Access-Control-Allow-Origin" header in the response.
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("&", "&");
tmp = tmp.replaceAll("<", "<");
tmp = tmp.replaceAll(">", ">");
tmp = tmp.replaceAll(""", "\"");
tmp = tmp.replaceAll("'", "'");
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 any error in your OpenKM log.
Take a look in 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 about how to enable Access-Control-Allow-Origin in the Apache web server.