Front-end technology to achieve file preview (Word, Excel, PDF, PPT, MP4, pictures, text)

preface

Because of business needs, many files need to be preview in the front end, so let’s take a look today.

Demo address [1] : zhuye1993.github. IO /file-view/d…

Implementation scheme

Some of them can be directly introduced into VUE through NPM.

Docx file front-end preview

Code implementation

• First NPM I DOCX-Preview
• Introduce the renderAsync method
• The BLOB data is propagated into the method, rendering the Word document

import { defaultOptions, renderAsync } from "docx-preview"; renderAsync(buffer, document.getElementById("container"), null, options: { className: String = "docx", // Default and document style class name/prefix inWrapper: Boolean = true, // enable render around document content wrapper ignoreWidth: IgnoreHeight: Boolean = false, // disable page render height: Boolean = false, / / banned font rendering breakPages: Boolean = true, / / on the page break enable paging ignoreLastRenderedPageBreak: Boolean = true,// Disable lastRenderedPageBreak experimental: Boolean = false, // Enable experimental (TAB stop calculation) trimXmlDeclaration: Boolean = true, // If true, the XML declaration will delete the XML document before parsing debug: Boolean = false, // Enable additional logging}); Copy the codeCopy the code

Implementation effect

image.png

PDF implements front-end preview

Code implementation

• First, NPM I PDFJS-dist
• Set the PDFJS. GlobalWorkerOptions. WorkerSrc address
• Pdfjs.getdocument processes the PDF data and returns an object pdfDoc
• Get the data on page 1 separately from pdfdoc.getPage
• Create a DOM element and set the canvas properties of the element
• Render the data onto the canvas using the Page. render method

import * as PDFJS from "pdfjs-dist/legacy/build/pdf"; / / set the PDF. The worker. The introduction of js file address PDFJS. GlobalWorkerOptions. WorkerSrc = the require (" PDFJS - dist/legacy/build/PDF. Worker. Entry. Js "); Pdfjs.getdocument (data).promise. Then (pdfDoc=>{const numPages = pdfdoc.numPages; Pdfdoc.getpage (1). Then (page =>{// Set canvas property const canvas = document.getElementById("the_canvas"); const ctx = canvas.getContext("2d"); const dpr = window.devicePixelRatio || 1; const bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1; const ratio = dpr / bsr; const viewport = page.getViewport({ scale: 1 }); canvas.width = viewport.width * ratio; canvas.height = viewport.height * ratio; canvas.style.width = viewport.width + "px"; canvas.style.height = viewport.height + "px"; ctx.setTransform(ratio, 0, 0, ratio, 0, 0); const renderContext = { canvasContext: ctx, viewport: viewport, }; // Render data to canvas canvas page. Render (renderContext); })}) copy the codeCopy the code

Implementation effect

image.png

Excel implements front-end preview

Code implementation

• Download excelJS, HandsonTable libraries
• Read the file data through ExcelJS
• The workbook.getWorksheet method is used to obtain the data of each worksheet and process the data into a two-dimensional array of data
• Introduce the @handsonTable /vue component HotTable
• Through the Settings property, some configuration parameters and two-dimensional array data are passed into the component and rendered in Excel style for preview

// Load excel data (new Exceljs.workbook ().xlsx.load(buffer)).then(Workbook =>{// Get the first page of Excel data const ws = workbook.getWorksheet(1); Const data = ws.getrows (1, ws.actualRowCount); }) // Render the page import {HotTable} from "@handsonTable /vue"; <hot-table :settings="hotSettings"></hot-table> hotSettings = { language: "zh-CN", readOnly: true, data: this.data, cell: this.cell, mergeCells: this.merge, colHeaders: true, rowHeaders: true, height: "Calc (100vH-107px)", // contextMenu: true, // manualRowMove: true, // disable external click to deselect time outsideClickDeselects: false, // fillHandle: { // direction: 'vertical', // autoInsertRow: true // }, // afterSelectionEnd: AfterSelectionEnd, // bindRowsWithHeaders: 'strict', licenseKey: "non-commercial-and-evaluation"} Copy codeCopy the code

Implementation effect

image.png

PPTX front end preview

Mainly through the JSZIP library, loading binary files, and then through some column processing conversion to achieve preview effect, implementation is more trouble, not stick code, interested can download code to view.

Implementation effect

image.png

conclusion

Mainly introduced the word, excel, PDF files to achieve preview mode, front or PDF make a preview of the best effect, won’t appear some questions writing disorder and garbled, so generally good plan is the backend with different format file into PDF, again by the front end to achieve preview effect, the effect of the some style will retain file, For pictures, TXT file implementation, interested can see the code.

The last

If this article is helpful to you, please like it

The code address

Github.com/zhuye1993/f… [2] : github.com/zhuye1993/f…

About this article

Author: Bamboo industry

Juejin. Cn/post / 707159…