Front-end vue3 implements local and online file preview (including pdf/txt/mp3/mp4/docx/xlsx/pptx)

1. Only online preview is required, and the file address is accessible from the public network

(1) Free preview of Microsoft office (recommended)

Supports free preview of multiple office file formats such as doc/docx/xls/xlsx/ppt/pptx

//Sample code

//? Splice the address that needs to be previewed after https://view.officeapps.live.com/op/view.aspx?src=, as follows:\

let url="http://xxx.com/files/demo.doc"
window.open("?https://view.officeapps.live.com/op/view.aspx?src=" + encodeURIComponent(?url))

(2) XDOC document preview cloud service

Preview PDF, OFD, Word, WPS and other format documents without plug-ins on mobile and PC

//Example

let url="http://xxx.com/files/demo.doc"

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

2. Online preview of local and non-public network files

Local or intranet preview needs to be implemented with the help of plug-ins. PDF, mp3, mp4, etc. mainly rely on native tags or browser built-in functions, minimizing the installation of plug-ins.

(1) pdf, txt

Directly use ifrem to embed the page, and use the browser’s built-in preview function to meet basic needs. For others, you can also try the vue-office pdf plug-in.

pdf preview effect

txt preview effect

(2)mp3, mp4

Using native audio and video tags can meet basic needs. If you need other functions, you can use plug-ins such as video.js.

mp3 preview effect

mp4 preview effect

(3) docx, xlsx

vue-office/docx and vue-office/excel preview docx and xlsx files. Personally, I feel it is more convenient to implement. You can also query more implementation methods by yourself. There are many cases and the sample code will not be listed here.

docx preview effect

xlsx preview effect

pdf/txt/mp3/mp4/docx/xlsx and image sample code:

<template>
  <div>
    <el-button @click="getSrc">Click to get the background file and preview</el-button>
    <input type="file" @change="uploadFile($event)" />
    <!-- pdf/text -->
    <iframe v-if="['pdf', 'text'].includes(type)" :src="src"></iframe>
    <!-- mp3, ogg, wav -->
    <audio
      v-if="['mp3', 'ogg', 'wav'].includes(type)"
      controls
      :src="src"
    ></audio>
    <!-- mp4, webm, ogv -->
    <video
      v-if="['mp4', 'webm', 'ogv'].includes(type)"
      controls
      :src="src"
    ></video>
    <!-- docx -->
    <vue-office-docx
      v-if="type == 'docx'"
      :src="src"
      @rendered="fileRendered"
      @error="fileError"
    />
    <!-- xlsx -->
    <vue-office-excel
      v-if="type == 'xlsx'"
      :src="src"
      @rendered="fileRendered"
      @error="fileError"
    />
    <!-- Picture -->
    <img v-if="['jpg', 'png'].includes(type)" :src="src" />

    <!-- doc -->
    <!-- The preview of doc and other format files needs to be processed into html in the background and then displayed using vue's built-in v-html -->
    <!-- <div class="docHtml" v-html="html"></div> -->
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { getImgPath } from "@/api/testApi";
import VueOfficeDocx from "@vue-office/docx"; //Introduce docx preview plug-in
import "@vue-office/docx/lib/index.css"; //docx preview plug-in style
import VueOfficeExcel from "@vue-office/excel"; //Introduce excel preview plug-in
import "@vue-office/excel/lib/index.css"; //Introduce excel preview plug-in style

const src = ref("");
const type = ref("");
// Get the background file and process the data according to the actual interface
const getSrc = async () => {
  await getImgPath().then((res: any) => {
    let imgBlob = new Blob([res]);
    src.value = URL.createObjectURL(imgBlob);
  });
};
//Local uploaded files
const uploadFile = (ev: any) => {
  let file = ev.target.files[0];
  if (file.name) {
    src.value = URL.createObjectURL(file);
  }
};
// vueOffice rendering completed callback
const fileRendered = (e: any) => {
  console.log("Rendering completed", e);
};

// vueOffice rendering error callback
const fileError = (e: any) => {
  console.log("Rendering error", e);
};
</script>

<style lang="scss" scoped>
</style>

(3)pptx

The pptx preview uses the pptx.js file

1. Download the compressed package from pptx.js official website

PPTXjshttps://pptx.js.org/index.html

(1) Enter the official website and click the download button

(2) Select version to download

2. Add pptxjs dependency files in the public folder

3.Introduced into index.html

 <link rel="stylesheet" href="/PPTXjs/css/pptxjs.css" />

    <link rel="stylesheet" href="/PPTXjs/css/nv.d3.min.css" />
    <!-- for charts graphs -->

    <script
      type="text/javascript"
      src="/PPTXjs/js/jquery-1.11.3.min.js"
    ></script>

    <script type="text/javascript" src="/PPTXjs/js/jszip.min.js"></script>
    <!-- v2.. , NOT v.3.. -->

    <script type="text/javascript" src="/PPTXjs/js/filereader.js"></script>
    <!--https://github.com/meshesha/filereader.js -->

    <script type="text/javascript" src="/PPTXjs/js/d3.min.js"></script>
    <!-- for charts graphs -->

    <script type="text/javascript" src="/PPTXjs/js/nv.d3.min.js"></script>
    <!-- for charts graphs -->

    <script type="text/javascript" src="/PPTXjs/js/pptxjs.js"></script>

    <script type="text/javascript" src="/PPTXjs/js/divs2slides.js"></script>
    <!-- for slide show -->

4. Use in the page

<template>
  <div id="pptx"></div>
</template>

<script lang="ts" setup>
const pptxShow = (src: any) => {
  nextTick(() => {
    $("#pptx").pptxToHtml({
      pptxFileUrl: src, //pptx file address
      slidesScale: "100%",
    });
  });
</script>

<style lang="scss" scoped>
</style>

pptx preview effect

When previewing pptx, please note: The page reports the error Uncaught (in promise) TypeError: $(…).pptxToHtml is not a function. Check whether the jequry version introduced in index.html is the same as other versions in the project. If there is a conflict between versions used locally, just choose to keep one version.

If the above content is helpful to you, please give it a like and add it to your favorites~~