Vue3实现文件预览word、pdf、excel、图片以及txt文件

Vue3实现文件预览word、pdf、excel、图片以及txt文件

由于工作需要，需要对上传的各种不同文件类型进行预览
使用的插件是vue-office 插件地址: vue-office

vue-office简介
vue-office是一个支持多种文件(docx、.xlsx、pdf)预览的vue组件库，支持vue2和vue3。
目标是成为使用最简单，功能最强大的文件预览库

// 安装演示   vue-demi（此包是针对vue2、vue3项目兼容转换配合使用的）
#docx文档预览组件
npm install @vue-office/docx vue-demi

#excel文档预览组件
npm install @vue-office/excel vue-demi

#pdf文档预览组件
npm install @vue-office/pdf vue-demi

注意：

如果是vue2.6版本或以下还需要额外安装 @vue/composition-api
npm install @vue/composition-api

word预览

docx、xlsx、pdf三种文件的预览方式几乎一致，我们先以docx文档的预览为例，介绍下组件用法。
docx的预览如下： 此处进行封装组件，父组件传参方便使用
<template>
    <vue-office-docx
        :src="docx"
        style="height: 100vh;"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
</template>

<script setup>
  import {  ref } from "vue";
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'

const docx=ref("http://static.shanhuxueyuan.com/test6.docx") //设置文档网络地址，可以是相对地址
// docx作为参数通过父组件传参
const renderedHandler=()=>{
  console.log("渲染完成")
}
const errorHandler=()=>{
  console.log("渲染失败")
}

excel预览

excel以及pdf同理，以下代码演示进行简化
//excel
<template>
    <vue-office-excel
        :src="excel"
        style="height: 100vh;"
    />
</template>

<script setup>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'
const excel=ref("http://static.shanhuxueyuan.com/demo/excel.xlsx")
</script>

pdf预览

//pdf
<vue-office-pdf 
        :src="pdf"
    />

<script setup>
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
const pdf=ref("http://static.shanhuxueyuan.com/test.pdf")
</script>

注意：此处我写项目的时候遇到一个打包的问题，找到开发这个插件的作者有个更方便的方法

附带作者文章地址: https://juejin.cn/post/7251199685130059833

以上的安装的包不需要删除，还以word文件预览进行代码演示
安装依赖库 npm i @js-preview/docx

word预览

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

<script setup>
import {  ref,onMounted } from "vue";
import jsPreviewDocx from "@js-preview/docx";
import "@js-preview/docx/lib/index.css";

const docx = ref("http://static.shanhuxueyuan.com/test6.docx");
onMounted(() => { // setup下先再获取到dom节点之后再进行挂载
  const myDocxPreviewer = jsPreviewDocx.init(document.getElementById("docx"));
  //传递要预览的文件地址即可
  myDocxPreviewer
    .preview(
      docx.value
    )
    .then((res) => {
       console.log("预览完成");
    })
    .catch((e) => {
      console.log("预览失败", e);
    });
});

</script>

excel预览

excel文件预览
npm i @js-preview/excel

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

<script setup>
import {  ref,onMounted } from "vue";
import jsPreviewExcel from "@js-preview/excel";
import '@js-preview/excel/lib/index.css';

const excel = ref("http://static.shanhuxueyuan.com/demo/excel.xlsx");
onMounted(() => { // setup下先再获取到dom节点之后再进行挂载
  const myExcelPreviewer = jsPreviewExcel.init(document.getElementById('excel'));
myExcelPreviewer.preview(excel.value).then(res=>{
    console.log('预览完成');
}).catch(e=>{
    console.log('预览失败', e);
    });
});

pdf预览

pdf文件预览
npm i @js-preview/pdf

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

<script setup>
import {  ref,onMounted } from "vue";
import jsPreviewPdf from "@js-preview/pdf";

const pdf = ref("http://static.shanhuxueyuan.com/test.pdf");
onMounted(() => { // setup下先再获取到dom节点之后再进行挂载
  const myPdfPreviewer = jsPreviewPdf.init(document.getElementById('pdf'));
myPdfPreviewer.preview(pdf.value).then(res=>{
    console.log('预览完成');
}).catch(e=>{
    console.log('预览失败', e);
    });
});

txt文件的预览前端可以直接针对文件进行解读

安装axios包 npm i @axios

<template>
  <div class="txt" style="white-space: pre-wrap">
    {{ textContent }}
  </div>
</template> 

<script setup>


import axios from "axios"; 
import { ref,onMounted } from "vue";

const textContent = ref("");

const transformData = (data) => {
      return new Promise((resolve) => {
        let reader = new FileReader();
        reader.readAsText(data, "GBK");//这里如果出现乱码可改成reader.readAsText(data, "")试试
        reader.onload = () => {
          resolve(reader.result);
        };
      });
    };
    axios
      .get(sourcePdf.value, {
        responseType: "blob",
        transformResponse: [
          async function (data) {
            return await transformData(data);
          },
        ],
      })
      .then((res) => {
        res.data.then((data) => {
          textContent.value = data;// 编译好的txt重新赋值给textContent
        });
      });

图片预览

图片预览直接img标签就够用了，后端返回数据流或者接口地址可以直接进行访问的
<img style="width: 300px" :src="url" alt="图片加载失败" />

url为图片的动态地址/数据流，这里比较简单自己可以找合适的方法进行处理