Integrar la vista previa con otras aplicaciones web

Puede integrar el módulo de vista previa web de OpenKM en otras aplicaciones web rápidamente.

Ventajas:

Integración rápida en un iframe dentro de su propia aplicación web.
Todos los tipos MIME de OpenKM soportados por los módulos de vista previa.
Puede usarse sin iniciar sesión en OpenKM.
Puede previsualizar documentos que no están en OpenKM.

Parámetros de vista previa:

Parameter	Type	Description
docUrl	String	La URL completa de un documento. Recomendamos usarlo para todos los tipos de fichero.
swfUrl	String	La URL completa de un fichero .swf.
dxfUrl	String	La URL completa de un fichero .dxf.
dwfUrl	String	La URL completa de un fichero .dwf.
htmUrl	String	La URL completa de un fichero .html.
codUrl	String	La URL completa de un fichero de código, por ejemplo .java, .php, etc.
mpgUrl	String	La URL completa de un fichero .mp4 o .mp3.
pdfUrl	String	La URL completa de un documento PDF. Requerido por el visor PDF.js.
file	String	La URL completa de un documento PDF. Requerido por el visor PDF.js.
previewEngine	String	El tipo de vista previa que usará el servidor. Por defecto es PDF.js, pero con este parámetro puede forzar Flexpaper. OpenKM soporta Flexpaper y PDF.js como visores de PDF

Ejemplo de código

<!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>

Si crea su propio servicio de descarga, tenga en cuenta que debe establecer la cabecera “Access-Control-Allow-Origin” en la respuesta.

La siguiente sección de código Java puede darle algunas ideas al respecto:

/**
 * 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;
}

Solución de problemas

Hay varias razones por las que el documento no se puede previsualizar y puede que vea una pantalla como esta:

Compruebe si ve algún error en su log de OpenKM.

Eche un vistazo a la consola de JavaScript; si muestra un error como “missing header CORS ‘Access-Control-Allow-Origin’)” entonces debe cambiar la configuración de su servidor web para permitirlo.