一、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>