Front-end Implementation of Online Preview for PDF, Word, XLS, PPT, and Other Files

1. Front-end implementation of online preview function for PDF files

Method 1: Directly open PDF files in the browser

In the case of simply previewing PDF files with low UI requirements, you can use the href attribute of the <a> tag to achieve the preview.

<a href="document_url"></a>

Method 2: Using the jquery.media.js plugin

This plugin can achieve PDF preview (including other media files), but it is not able to handle Word and other file types. Here is the implementation:

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.media.js"></script>

<body>
    <div id="handout_wrap_inner"></div>
</body>

<script type="text/javascript">
    $('#handout_wrap_inner').media({
        width: '100%',
        height: '100%',
        autoplay: true,
        src: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
    });
</script>

Method 3: Using iframe

<iframe src="previewUrl" width="100%" height="362px" frameborder="1"></iframe>

Method 4: Using the embed tag

<embed src="previewUrl" type="application/pdf" width="100%" height="100%">

Method 5: Using the object tag

<object src="previewUrl" width="100%" height="100%">
    This browser does not support PDFs. Please download the PDF to view it: <a href="previewUrl">Download PDF</a>
</object>

Method 6: Using PDFObject

<!DOCTYPE html>
<html>
<head>
    <title>Show PDF</title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="pdfobject.min.js"></script>
    <style type="text/css">
        html,body,#pdf_viewer{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="pdf_viewer"></div>
</body>
<script type="text/javascript">
    if(PDFObject.supportsPDFs){
        PDFObject.embed("index.pdf", "#pdf_viewer" );
    } else {
        location.href = "/canvas";
    }
</script>
</html>

Method 7: Using PDF.js

PDF.js is an open-source PDF document reading and parsing plugin that can render PDF files as Canvas. It consists of two library files: pdf.js and pdf.worker.js.

2. Online preview function for Word, Excel, and PowerPoint files

To achieve online preview for Word, PowerPoint, and Excel files, you can use the Microsoft online preview function (the resource must be publicly accessible).

<iframe src="https://view.officeapps.live.com/op/view.aspx?src=http://storage.xuetangx.com/public_assets/xuetangx/PDF/1.xls" width="100%" height="100%" frameborder="1"></iframe>

3. Word files

You can use XDOC to preview DOC documents represented by DataURI. XDOC can also be used to preview text, parameterized text, HTML text, JSON text, official documents, etc.

4. Excel files

You can use sheet.js to parse Excel files and render them as images.

Summary:

The best choice for free front-end implementation of online preview for Word, Excel, and PowerPoint files is the Microsoft online preview function (read-only).
Convert files to images on the backend and preview them on the front-end as images (feasible solution).
Purchase online preview services such as Baidu DOC Document Service, Yongzhong, I DOC VIEW, etc.