【vue3进阶】vite项目引入文件预览功能

Vite项目引入文件预览功能的几种方式

原创

已于 2024-12-25 09:11:06 修改 · 2.5k 阅读

59 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2024-12-19 15:09:13 首次发布

项目当中经常会遇到文件需要预览的功能，大多数是 pdf、word、excel、img等类型，pdf 类型的文件预览方式很多，也很简单，主要是word和excel类型的文件，大多数支持docx和xlsx类型的，之前doc和xls类型的支持的比较少。下面介绍几种预览的方式，每种方式都有有优缺点，按需求选择。

1. vue-office 插件

vue-office 这个插件使用起来方便，可以网络地址，也可以二进制预览。

支持类型：pdf、docx、xlsx、xls、pptx。

缺点：

xls 类型需要加单独的配置，xlsx 类型不需要单独加配置，2者复杂样式都会有问题。

pptx 类型的预览比较慢。

安装插件

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

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

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

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

vue2.6以下的还需要的单独安装一个插件 @vue/composition-api

npm install @vue/composition-api

使用方式一（网络地址）

<template>
    <vue-office-pdf :src="pdfUrl" style="height: 100vh" @rendered="renderedHandler"  @error="errorHandler"/>
    <vue-office-docx :src="docxUrl" style="height: 100vh" />
    <vue-office-excel :src="xlsxUrl" style="height: 100vh" />
    <vue-office-excel :options="options" :src="xlsUrl" style=