Embedded File Viewer: Google Drive, OneDrive

embedded-file-viewer.md

Office Web Apps Viewer

('.ppt' '.pptx' '.doc', '.docx', '.xls', '.xlsx')

http://view.officeapps.live.com/op/view.aspx?src=[OFFICE_FILE_URL]

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=[OFFICE_FILE_URL]' width='px' height='px' frameborder='0'>
</iframe>

OneDrive Embed Links

Powerpoint

<iframe src="https://onedrive.live.com/embed?cid=CA582F2BC3AD1590&resid=CA582F2BC3AD1590%2133463&authkey=AFh1O3tkDLAQzzw&em=2" width="402" height="327" frameborder="0" scrolling="no"></iframe>

Excel

<iframe src="https://onedrive.live.com/embed?cid=CA582F2BC3AD1590&resid=CA582F2BC3AD1590%2136277&authkey=AHJ96YRJIbbJcec&em=2" frameborder="0" scrolling="no" width="800" height="346"></iframe>

Google Docs Viewer

Only files under 25 MB can be previewed with the Google Drive viewer.

Google Drive viewer helps you preview over 16 different file types, listed below:

• Image files (.JPEG, .PNG, .GIF, .TIFF, .BMP)
• Video files (WebM, .MPEG4, .3GPP, .MOV, .AVI, .MPEGPS, .WMV, .FLV)
• Text files (.TXT)
• Markup/Code (.CSS, .HTML, .PHP, .C, .CPP, .H, .HPP, .JS)
• Microsoft Word (.DOC and .DOCX)
• Microsoft Excel (.XLS and .XLSX)
• Microsoft PowerPoint (.PPT and .PPTX)
• Adobe Portable Document Format (.PDF)
• Apple Pages (.PAGES)
• Adobe Illustrator (.AI)
• Adobe Photoshop (.PSD)
• Tagged Image File Format (.TIFF)
• Autodesk AutoCad (.DXF)
• Scalable Vector Graphics (.SVG)
• PostScript (.EPS, .PS)
• TrueType (.TTF)
• XML Paper Specification (.XPS)
• Archive file types (.ZIP and .RAR)

Google Docs Viewer (Apps)

https://docs.google.com/a/[DOMINIO]/viewer?url=[FILE_URL]

Google Docs Viewer

https://docs.google.com/a/[DOMINIO]/viewer?url=[FILE_URL]

Google Drive

Sheets

<iframe src="https://docs.google.com/spreadsheets/d/13R8O15c_sZKZT2QRHom1z2SDA3E1O5chUvROnqHCkwE/pubhtml?widget=true&amp;headers=true" style="width:100%;height:100%;"></iframe>

Embedded File Viewer

Google Docs offers an undocumented feature that lets you embed PDF files and PowerPoint presentations in a web page. The files don't have to be uploaded to Google Docs, but they need to be available online.

Google Drive Viewer: Explicit PDF files

<iframe src="https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>

<iframe src="https://drive.google.com/viewerng/viewer?url=http://docs.google.com/fileview?id=0B5ImRpiNhCfGZDVhMGEyYmUtZTdmMy00YWEyLWEyMTQtN2E2YzM3MDg3MTZh&hl=en&pid=explorer&efh=false&a=v&chrome=false&embedded=true" frameborder="0"></iframe>

Google Drive Viewer: Non-PDF files (fileviewer URL)

To view Google Drive docs from fileviewer links, use the file ID as the srcid attribute in the iframe.

The file ID for your PDF (one that is already in Google Drive) can be found in the PDFs web address. When you open a PDF, it’s the garbage-looking piece of the URL (it will be between forward-slashes, “/”).

The file ID is highlighted in yellow.

In this case it’s the 0B3xoQi_oa7_hU2J5S1RQbFdqS3c

Source: http://docs.google.com/fileview?id=0B5ImRpiNhCfGZDVhMGEyYmUtZTdmMy00YWEyLWEyMTQtN2E2YzM3MDg3MTZh&hl=en&pid=explorer&efh=false&a=v&chrome=false&embedded=true

id: 0B5ImRpiNhCfGZDVhMGEyYmUtZTdmMy00YWEyLWEyMTQtN2E2YzM3MDg3MTZh

Or

Source: https://drive.google.com/file/d/0B5ImRpiNhCfGZDVhMGEyYmUtZTdmMy00YWEyLWEyMTQtN2E2YzM3MDg3MTZh/view?ddrp=1&hl=en#

id: 0B5ImRpiNhCfGZDVhMGEyYmUtZTdmMy00YWEyLWEyMTQtN2E2YzM3MDg3MTZh

Result:

<iframe src="https://docs.google.com/viewer?srcid=[put your file id here]&pid=explorer&efh=false&a=v&chrome=false&embedded=true" width="580px" height="480px"></iframe>

Resources

Info: http://www.labnol.org/internet/google-docs-viewer-alternative/

From what I've seen, One Drive is the best way to preview files like xlsx and docx. But it doesn't work with presigned URLs from S3 buckets. As a workaround, I set up a proxy to clean up the URL and serve the file in a format that One Drive can read. Now you get the best of both worlds: private files and a simple implementation of a file previewer.

My code using public files:

    <details>
      <summary>DOCX - One Drive</summary>
      <iframe
        src="https://view.officeapps.live.com/op/embed.aspx?src=https://s3.amazonaws.com/digitalgov/_legacy-img/2014/07/cms-requirements-for-sow.docx"
        width="100%"
        height="1000px"
        frameborder="0"
      ></iframe>
    </details>

    <details>
      <summary>Excel - One Drive</summary>
      <iframe
        src="https://view.officeapps.live.com/op/embed.aspx?src=https://s3.amazonaws.com/seller-templates/ff/na/us/Flat.File.Toys.xls"
        width="100%"
        height="1000px"
        frameborder="0"
      ></iframe>
    </details>

Once the proxy is working, simply change the URL (use encodeURIComponent if necessary to remove special characters), and that's it.

Example of lambda to proxy files

import os
import base64
import urllib.request
from urllib.error import URLError, HTTPError

# Keep the real presigned URL out of code; inject it as an env-var
PRESIGNED_URL = 'http://s3bucket.com/my-presigned-url'

def lambda_handler(event, context):
    """
    Fetch the object through its presigned S3 URL and relay it back to
    the caller so the full query-string never leaks to the client.
    Works for any binary or text content ≤ 10 MB (API Gateway hard limit).
    """
    try:
        with urllib.request.urlopen(PRESIGNED_URL) as response:
            data = response.read()                      # bytes
            status = response.getcode()
            content_type = response.headers.get(
                "Content-Type", "application/octet-stream"
            )
            disposition = response.headers.get(
                "Content-Disposition", "inline"
            )

        # Gateway expects base64 for binary payloads
        return {
            "isBase64Encoded": True,
            "statusCode": status,
            "headers": {
                "Content-Type": content_type,
                "Content-Disposition": disposition,
            },
            "body": base64.b64encode(data).decode("utf-8"),
        }

    except HTTPError as exc:
        return {"statusCode": exc.code, "body": str(exc)}
    except URLError as exc:
        return {"statusCode": 502, "body": f"Upstream error: {exc}"}

@thaotp A lot of people using these tools, especially Google Docs Viewer, in their commercial applications. Google at least does not offer any dedicates Term&Conditions, which makes it a bit of a legal greyish area. Be aware: using these tools means sending data to the respective companies (Google, Microsoft), so be careful with user-related/-generated data, especially if you are under a privacy legislation such as GDPR.

@perelin, Microsoft’s previewer has privacy terms that make sure they don’t use files to train LLMs or expose any unwanted info. You can find this info in the bottom right menu options. The link is here. Regarding Google, they don't clearly define it, which I agree as a gray area as you mentioned.