Regarding the implementation of online document preview, there are two implementation methods mentioned in the previous article:
1. Convert documents into pictures: For details, see "Online preview of documents (1) Online preview function by converting txt, word, and pdf into pictures" ;
2. Convert documents to HTML: For details, see "Document Online Preview (2) Convert word and pdf files to HTML to achieve online document preview" ;
In fact, in addition to these two implementation methods, there is another common way to implement preview on the front end through related online preview components.
Implementation plan
I searched around for implementation solutions on the Internet and found that there are quite a few open source components that can be implemented. I sorted out these open source components and put them in the table below. Some of them can be directly introduced into Vue through npm.
| Document format | Related open source components |
|---|---|
| word(docx) | docx-preview、mammoth |
| pdf.js、pdfobject.js、vue-pdf | |
| excel | sheetjs js-xlsx、canvas-datagrid、handsontable、DataTables |
| powerpoint（pptx） | pptxjs |
1. Implement front-end preview of docx files
1、docx-preview
It is a pure front-end JavaScript library. Its advantage is that it can preview .docx files online on the backend, but its disadvantage is that it does not support .doc (emphasis added).
github address: https://github.com/VolodymyrBaydalka/docxjs
Install:
npm install docx-preview -S
Effect:
2、Mammoth
Mammoth works by taking a .docx document and converting it to HTML. Note that during the Mammoth conversion process, complex styles such as centering, first line indentation, etc. are ignored. In addition, only .docx documents can also be converted.
Github address: https://github.com/mwilliamson/mammoth.js
Install:
npm install mammoth
2. Front-end preview of PDF files
1、pdf.js
pdf.js is a very excellent pdf parsing tool. In fact, the pdf preview parser that comes with the Firefox browser core is pdf.js. We use Firefox to open the pdf file and press F12 to open the console to see the source code. content.
Official website address: PDF.js
Github address: https://github.com/mozilla/pdf.js
Effect:
2、pdfobject.js
PDFObject.js - Embed PDF into a div instead of occupying the entire page. The browser is required to support displaying PDF (all major browsers support it). If the browser does not support it, it can also be achieved by configuring PDF.js
Official website address: PDFObject: A JavaScript utility for embedding PDFs
github address: https://github.com/pipwerks/PDFObject
Realization effect:
3, vue-pdf
Vue-pdf is a component that implements the display, operation and generation of PDF files based on the pdf.js component under Vue.
github address: https://github.com/FranckFreiburger/vue-pdf
Install:
npm install --save vue-pdf
Realization effect:
4、iframe / object/ embed
The usage method and effect of iframe / object / embed are the same. That is, pdf is embedded as a plug-in in these three HTML tags. The following uses iframe as an example. The effect is the same as opening a pdf file directly with a link, which is equivalent to a new The page is embedded in the current page.
<iframe style="width: 100%; height: 100%;" src="/static/xxx.pdf"></iframe>
Realization effect:
3. Front-end preview of Excel files
1、sheetjs js-xlsx
js-xlsx is a tool library produced by sheetJS for reading and exporting various ecxels. It is very powerful.
xlsx official documentation: xlsx - npm
github repository: https://github.com/SheetJS/sheetjs
Install:
npm install xlsx
js-xlsx can read the entire excel table object using binary stream mode
let workbook = XLSX.read(data, { type: "array" }); //表格对象
let sheetNames = workbook.SheetNames; //获取到所有表格
let worksheet = workbook.Sheets[sheetNames[0]]; //取第一张表
After obtaining the table data, call the method provided by js-xlsx to directly convert the table data into html code, and then render the html code to the specified container and you are done.
let html = XLSX.utils.sheet_to_html(worksheet);
Realization effect:
2、canvas-datagrid
Rendering tables based on canvas supports table filtering, data editing, custom operation menus, big data scene optimization, and theme style modifications.
github address: https://github.com/TonyGermaneri/canvas-datagrid
Install:
npm install canvas-datagrid
3、 handsontable
Handsontable renders tables based on DOM elements. It is powerful and supports all the functions supported by canvas-datagrid`, and the theme style expansion is more convenient.
Official website address: Tutorial: Custom build - Handsontable Documentation
Github address: https://github.com/handsontable/handsontable
Document address: JavaScript Data Grid - Documentation | Handsontable
Install:
npm install handsontable @handsontable/vue
Realization effect:
4、DataTables
A table plug-in based on the Jquery table plug-in DataTables. If you are still using Jquery, you can consider this.
Official website address: https://www.datatables.net
Install:
Official website download address . To use DataTables in your project, you only need to introduce three files, the jQuery library, a DataTables core js file and a DataTables css file. Sometimes you also need some resources in the DataTables style.
<link href="DataTables/datatables.min.css" rel="stylesheet"/>
<script src="DataTables/datatables.min.js"></script>
How to use:
$('#example').DataTable( {
data: data
} );
4. Front-end preview of pptx files
1、PPTXJS
PPTXJS is a plug-in for jquery. Its main function is to convert pptx to html for online display.
Official website address: PPTXjs
github address: https://github.com/meshesha/PPTXjs
Usage example:
<div id="slide-resolte-contaniner" ></div>
<script>
$("#slide-resolte-contaniner").pptxToHtml({
pptxFileUrl: "Sample_demo1.pptx",
slidesScale: "50%",
slideMode: false,
keyBoardShortCut: false
});
</script>
Realization effect:
Summarize
This article mainly introduces the pure front-end online preview method for word, excel, pdf, ppt and other files. The specific implementation can be:
1. The front end uses corresponding online preview components for online preview according to different file types.
The front end performs online preview by judging different file types and using corresponding online preview components. Because different types of online preview components will have different preview interfaces when used, if it needs to be more perfect, it is best to encapsulate all used components into an online preview UI interface.
2. The back-end cooperates to convert files in different formats into pdf and into a unified file format, and then the front-end realizes the preview effect.
From the test results of this article, it can be seen that the best preview effect of the front-end is PDF. There will be no problems with garbled text and garbled characters. This can retain some style effects of the file. At the same time, the front-end only supports the preview of one file format. , the workload can also be greatly reduced.
The above is the entire content of how to use js front-end to realize online preview of word, excel, pdf, ppt and other files. Thank you for reading!