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

16 篇文章 0 订阅
13 篇文章 0 订阅

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为图片的动态地址/数据流,这里比较简单自己可以找合适的方法进行处理

  • 18
    点赞
  • 67
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值