vue引用vue-office实现docx、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";
export default {
  name: "PdfView",
  components: {
    VueOfficePdf,
  },
  data() {
    return {
      pdfUrl: "/pdf-test.pdf",
    };
  },
  mounted() {},
  methods: {
    renderedHandler() {
      console.log("渲染完成");
    },
    errorHandler() {
      console.log("渲染失败");
    },
  },
};
</script>
<style scoped>
</style>

此处pdf文件使用的是本地项目下的文件，存在放public目录下

文件上传时预览

<template>
  <div>
    <el-upload
      action=""
      :show-file-list="false"
      :before-upload="beforeAvatarUpload"
    >
      <el-button size="small" type="primary">选择文件</el-button>
    </el-upload>
  </div>
</template>

<script>
import VueOfficePdf from "@vue-office/pdf";
export default {
  name: "PdfView",
  components: {
    VueOfficePdf,
  },
  data() {
    return {
      pdfUrl: "/pdf-test.pdf",
    };
  },
  mounted() {},
  methods: {
    beforeAvatarUpload(file) {
      let fileReader = new FileReader();
      fileReader.readAsArrayBuffer(file);
      fileReader.onload = () => {
        this.pdfUrl = fileReader.result;
      };
    }
  },
};
</script>
<style scoped>
</style>

另外docx和excel文档预览和pdf使用方式一致

参考资料：
https://www.npmjs.com/package/@vue-office/excel