Online preview of Word, Excel, PowerPoint and other files

When we are working, we often have the need to view various types of files online, such as Word documents, Excel tables, PowerPoint slides, and PDFs. You can preview it directly here: https://www.compdf.com/webviewer/demo

Front-end preview for Word files

Option One:

XDOC can be used to preview word documents represented by DataURI. In addition, XDOC can also realize online preview of text, text with parameters, html text, json text, official documents, etc. For specific implementation methods, please refer to the official document

The following is a code sample for previewing a DOCX document using XDOC:

Note: The document address must be encoded in utf-8 and accessible from the external network

Sample code:

window.open("https://view.xdocin.com/view?src=" + encodeURIComponent("https://view.xdocin.com/demo/view.docx"));

Option II:

Use docx-preview open source component to realize word file preview

1. npm install docx-preview

2. Get word document blob data stream

3. Call the renderAsync method provided by docx-preview, and pass the obtained blob data stream into the method to render the word document

Sample code:

import Axios from "axios";
import {
    
     renderAsync } from "docx-preview";

Axios.get('文档下载路径',{
    
    
  responseType: 'blob'
}).then(({
     
     data}) => {
    
    
  renderAsync(data, document.getElementById("container")) // 渲染到页面
})

Front-end preview for Excel files

1. Install the library using the npm command:

   npm i exceljs handsontable @handsontable/vue

2. workbook.getWorksheetUse exceljs to parse the data, get the data of each worksheet through the method, and process the data into a two-dimensional array of data

3. Imported @handsontable/vuecomponent HotTable

4. Through the settings attribute, some configuration parameters and two-dimensional array data are passed into the component, rendered into excel style, and previewed

<template>
  <input type="file" @hange='handleFile' />
  <hot-table  :settings="hotSettings"></hot-table>
</template>

<script setup>
  import Excel from 'exceljs';
  import { HotTable } from "@handsontable/vue";
  import { ref } from 'vue';

  const data = ref([]);
  const handleFile = (e) => {
    const file = e.target.files[0];

    const workbook = new Excel.Workbook();
    await workbook.xlsx.load(file)

    // 第一个工作表
    const worksheet = workbook.getWorksheet(1);

    // 遍历工作表中的所有行（包括空行）
    data.value = worksheet.getRows(1, worksheet.actualRowCount);
  })

  const hotSettings = {
    language: "zh-CN",
    readOnly: true,
    data: data.value,
    mergeCells: this.merge,
    colHeaders: true,
    rowHeaders: true,
    height: "auto",
    outsideClickDeselects: false,
    licenseKey: "non-commercial-and-evaluation"
  }
</script>

Front-end preview of PowerPoint files

Use jszip and pptxjs to realize PowerPoint file preview

<div id="slide-resolte-contaniner" ></div> 

<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/jszip.min.js"></script> <!-- v2.. , NOT v.3.. -->
<script type="text/javascript" src="./js/filereader.js"></script> <!--https://github.com/meshesha/filereader.js -->
<script type="text/javascript" src="./js/d3.min.js"></script> <!-- for charts graphs -->
<script type="text/javascript" src="./js/nv.d3.min.js"></script> <!-- for charts graphs -->
<script type="text/javascript" src="./js/pptxjs.js"></script>
<script type="text/javascript" src="./js/divs2slides.js"></script> <!-- for slide show -->

<script> 
  $("#slide-resolte-contaniner").pptxToHtml({
      
       
    pptxFileUrl: "Sample_demo1.pptx", 
    slidesScale: "50%", 
    slideMode: false, 
    keyBoardShortCut: false 
  }); 
</script>

Front-end preview of PDF files

Online preview of PDF files using ComPDFKit PDF SDK

Step 1: Add ComPDFKit PDF SDK package

1. Add the @comppdfkit folder to the root of your project or to the lib directory under the assets directory . This will serve as import file for ComPDFKit PDF SDK for Web and import it into your project.

2. Add the webviewer folder containing the static resource files needed to run ComPDFKit PDF SDK for Web to the static resource folder of the project.

Step 2: Display the PDF document

1. Import the webviewer.js file in the @comppdfkit folder into your project.

2. Call to ComPDFKitViewer.init()initialize the ComPDFKit Web Viewer in your project.

3. Pass the address of the PDF to display and the license key to the init function

// Import the JS file of ComPDFKit Web Viewer
import ComPDFKitViewer from "/@compdfkit/webviewer";
const viewer = document.getElementById('webviewer');
ComPDFKitViewer.init({
    
    
  pdfUrl: 'Your PDF Url',
  license: 'Input your license here'
}, viewer)
.then((core) => {
    
    
  const docViewer = core.docViewer;
  docViewer.addEvent('documentloaded', () => {
    
    
    console.log('ComPDFKit Web Viewer loaded');
  })
})

4. After the project runs, you can see the PDF file to be displayed.