前端文件预览汇总

一、vue中预览word、excel、pdf：

vue-office

vue-office支持多种文件(docx、excel、pdf)预览的vue组件库，支持vue2/3，也支持非Vue框架的预览。

特点：

一站式：提供word(.docx)、pdf、excel(.xlsx, .xls)多种文档在线预览

简单：只需提供文档的src(网络地址、本地地址)即可完成文档预览

体验好：选择每个文档的最佳预览方案，保证用户体验和性能都达到最佳状态

性能好：针对数据量较大做了优化

安装

#docx文档预览
npm install @vue-office/docx#excel文档预览
npm install @vue-office/excel#pdf文档预览
npm install @vue-office/pdf

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

npm install @vue/composition-api

使用例子

文档预览场景大致分为两种：

1.网络地址/本地项目地址，比如 https://***.pdf

2.文件上传时预览，可以通过获取文件的ArrayBuffer或Blob

pdf文件预览

使用网络地址/本地项目地址

<template><div><vue-office-pdf:src="pdfUrl"style="height: 100vh"@rendered="renderedHandler"@error="errorHandler"/></div>
</template><script>
import VueOfficePdf from "@vue-office/pdf";
import "@vue-office/docx/lib/index.css";
export default {name: "PdfView",components: {VueOfficePdf,},data() {return {pdfUrl: "http://localhost:3000/test.pdf",};},mounted() {},methods: {renderedHandler() {console.log("渲染完成");},errorHandler() {console.log("渲染失败");},},
};
</script>
<style scoped>
</style>