The front end can Preview pdf, word, xls, ppt and other files online

Posted by FutonGuy on Sun, 19 Dec 2021 01:44:48 +0100

1. The front end realizes the online preview function of pdf files

Method 1. pdf files can theoretically be previewed directly in the browser, but a new page needs to be opened. When you only Preview pdf files and the UI requirements are not high, you can preview them directly through the a tag href attribute

<a href="Document address"></a>
Copy code

Mode 2: through jquery plug-in jquery.media.js Implementing this plug-in can realize pdf preview function (including other functions) Media files )However, there is nothing to do with word and other types of files. Implementation method: js code:

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

html structure:

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

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

Method 3: directly embed iframe on the page

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

In addition, you can provide a prompt between 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>
Copy code

Method 4: embed content through labels

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

This label h5 property contains four attributes: height, width, type, preview file src! Unlike < iframe > < / iframe >, this tag is self closing, that is, if the browser does not support PDF embedding, the content of this tag can't be seen!

Mode 5. There is little difference between tags and iframe

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

In addition to the second method, the other methods are to directly introduce the content into the page through labels to realize preview

Mode 6: PDFObject

PDFObject is actually a direct code implemented through tags

<!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 web page
        PDFObject.embed("index.pdf", "#pdf_viewer" );
    } else {
        location.href = "/canvas";
    }
</script>
</html>
Copy code

You can also use the following code to determine whether 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");
}
Copy code

Method 7. PDF js

PDF. JS can browse PDF documents directly under html. It is an open-source PDF document reading and parsing plug-in. It is very powerful and can render PDF files into Canvas. PDF. JS mainly contains two library files, a PDF JS and a PDF worker. JS, one is responsible for API parsing and the other is responsible for core parsing.

2. Online preview function of word, xls and ppt files

The online preview of word, ppt and xls files is relatively simple and can be realized directly by calling Microsoft's online preview function (preview premise: 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>
Copy code

src is the file address to preview. See this document for details Microsoft interface documentation

Add: the online preview of google documents is the same as that of Microsoft (resources must be publicly accessible)

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

3. word file

XDOC Preview can be implemented to DataURI In addition, XDOC can also realize online preview of text, text with parameters, html text, json text, official documents, etc. Please refer to the official documents for specific implementation methods

The following method can quickly preview word, but there may be some restrictions on the editor used for files

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

4. excel file

At present, excel files have similar PDF JS like parsing sheet.js

Summary:

1. Free pure front-end mode to realize online preview. The best choice of word, excel and ppt is Microsoft online preview (non editable)

2. Use the back-end to convert files into pictures, and the front-end preview in the form of pictures (feasible scheme)

3. Purchase online preview services such as Baidu DOC document service,evermore ,I DOC VIEW etc.

Topics: Web Development html5 JQuery Vue html

Programmer Think