XZ

Xiao Z's blog

Learn, build, share

Frontend Implementation of Online Preview for PDF, Word, Excel, and PPT Files

frontend pdf previewoffice document previewword excel ppt viewerpdf.jsmicrosoft office viewer
Published·Modified·

1. Frontend Implementation of PDF Online Preview Functionality

Method 1: Direct Browser Opening PDF files can theoretically be opened directly in the browser for preview, but this requires opening a new page. If you only need to preview PDF files and have low UI requirements, you can directly use the href attribute of an <a> tag to achieve preview.

<a href="Document URL"></a>

Method 2: Using jQuery Plugin Use the jQuery plugin jquery.media.js to implement PDF preview functionality (including other various media files), but it is powerless for Word and other file types.

Implementation steps:

JavaScript Code:

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

HTML Structure:

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

Call Method:

<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: Embedding via Iframe

$('<iframe src=\'' + this.previewUrl + '\' width=\'100%\' height=\'362px\' frameborder=\'1\'>').appendTo($('.video-handouts-preview'));

Additionally, you can provide a prompt between the iframe tags like this:

<iframe :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>
</iframe>

Method 4: Embedding via Embed Tag

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

This tag includes four H5 attributes: height, width, type, and the preview file src! Unlike <iframe>, this tag is self-closing. If the browser does not support PDF embedding, the content of this tag will not be visible.

Method 5: Using Object Tag The difference between the object tag and iframe is minimal.

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

Except for Method 2, all other methods directly introduce content into the page using tags to achieve preview.

Method 6: PDFObject PDFObject is also implemented using tags. Here is the code:

<!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){
        // Embed PDF into webpage
        PDFObject.embed("index.pdf", "#pdf_viewer" );
    } else {
        location.href = "/canvas";
    }
</script>
</html>

You can also use the following code to check if PDFObject preview is supported:

if(PDFObject.supportsPDFs){
   console.log("Yay, this browser supports inline PDFs.");
} else {
   console.log("Boo, inline PDFs are not supported by this browser");
}

Method 7: PDF.js PDF.js allows direct browsing of PDF documents in HTML. It is a powerful open-source PDF document reading and parsing plugin that can render PDF files into Canvas. PDF.js mainly includes two library files: pdf.js and pdf.worker.js. One is responsible for API parsing, and the other for core parsing.

2. Online Preview Functionality for Word, Excel, and PPT Files

The method to implement online preview for Word, PPT, and Excel files is relatively simple: you can directly call Microsoft's online preview function (prerequisite: resources 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>

src is the file address to be previewed. For specific documentation, see the Microsoft API documentation.

Supplement: Google Document Online Preview Google's document online preview implementation is similar to Microsoft's (resources must be publicly accessible).

<iframe :src="'https://docs.google.com/viewer?url=' + fileurl + '"></iframe>

3. Word Files

XDOC can preview DOC documents represented by DataURI. Additionally, XDOC can implement online preview for text, parameterized text, HTML text, JSON text, official documents, etc. For specific implementation methods, please refer to the official documentation.

The following method can achieve quick Word preview, but there may be some limitations on the editors used for the files.

<a href="http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=http://www.xdocin.com/demo/demo.docx" target="_blank" rel="nofollow">XDOC</a>

4. Excel Files

Currently, there is a parser for Excel files similar to PDF.js called sheet.js.

Summary:

  1. The best choice for free, pure frontend online preview of Word, Excel, and PPT is Microsoft's online preview (non-editable).
  2. Convert files to images on the backend and preview them as images on the frontend (a feasible solution).
  3. Purchase online preview services such as Baidu DOC Document Service, Yozosoft, or I DOC VIEW, etc.