Preview Word, PowerPoint, Excel files and more file types

API & Customization Show & Tell
1

Thought I'd share how we're previewing files other than PDFs that the Knack viewer handles beautifully.  One of our apps is dependent on file records and users need quick access to preview without downloading.

Importantly there's no file conversion performed which is problematic especially for Office documents where tables and text boxes typically don't behave with conversions we tried with cloud services.  And Office documents get the benefit of the Microsoft Web Viewer menus and controls, including Excel table filters and Word accessibility features.

![](upload://zidPTtNlOrdqnlHiqbtgbmMvnCG.png)

Check it out here https://support.knack.com/hc/en-us/community/posts/360072660492 

2

Brad, re-iterating my comment for visibility:

Hey Brad! Nice work, and looks great. We went down that rabbit hole a little while ago with both those web viewers. We had it working for a brief week, but my intern at the time pointed out, specifically in reference to the main reply’s edit in this Stack Overflow article

using both google and Microsoft’s preview API’s WILL upload your files to a 3rd party server. Who knows what they plan to do with that data store. This proved to be completely unacceptable for our use case. As our files are invoices, client purchasing docs, govt docs, and other company sensitive data.

So we built our own tool in-house to handle it (with no 3rd party upload). Check it out here: 

3

Updated to use a much simpler approach - a warning, this replaces the hyperlink html entirely, and each file is opened in another tab.

$(document).on('knack-view-render.any', function (event, view, data) {
    setFileViewer();
});

function setFileViewer() {
    $('.kn-view-asset').each(function() {
        let arr = $(this).text().split('.')
        let extension = arr[arr.length - 1]
        let url = 'https://api.knack.com/v1/applications/' + Knack.app.id + '/download/asset/' + $(this).attr('data-asset-id') + '/' + $(this).attr('data-file-name');

        $(this).replaceWith('<a target="_blank" href="' + fileViewer(extension, url) + '">' + $(this).text() + '</a>');
    });
}

function fileViewer(e, url) {
    switch (e = e.toLowerCase()) {
        case "pdf":
        case "txt":
        case "html":
        case "jpg":
        case "jpeg":
        case "bmp":
        case "png":
        case "mpg":
        case "mpeg":
        case "wmv":
        case "mp4":
        case "dvr-ms":
        case "avi":
        case "mov":
        case "ogg":
        case "mkv":
            return url;
        case "docx":
        case "docm":
        case "doc":
        case "dotx":
        case "dotm":
        case "dot":
        case "xlsx":
        case "xls":
        case "ppts":
        case "ppt":
        case "pptx":
            return 'https://view.officeapps.live.com/op/view.aspx?src=' + url;
        default:
            return 'https://docs.google.com/gview?url=' + url;
    }
}
3 Likes
4

Hi @BradStevens

This is amazing thank you. We have been looking for something like this for quite a while.

Craig