vue 使用vue-office预览word、excel,pdf同理

在此,我只使用了docx和excel, pdf我直接使用的iframe进行的展示就不作赘述了

java 复制代码
//docx文档预览组件
npm install @vue-office/docx

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

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

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

java 复制代码
npm install @vue/composition-api/
复制代码
<template>
  <div>
    <input
      id="file"
      ref="files"
      type="file"
      @change="changeHandle"
      multiple="multiple"
    />

    <!-- accept=".doc,.docx,.pdf,.ai,.psd,.xlsx,.xls" -->

    <!-- <vue-office-docx :src="src" @rendered="renderingCompleted" /> -->
    <vue-office-excel
      style="flex: 1; height: 0"
      v-show="src"
      :src="src"
      @rendered="renderingCompleted"
    />
  </div>
</template>

<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
//引入相关样式
import '@vue-office/docx/lib/index.css'
import VueOfficeExcel from "@vue-office/excel";
import '@vue-office/excel/lib/index.css'
export default {
  data() {
    return {
      src: "",
    };
  },
  components: {
    VueOfficeDocx,
    VueOfficeExcel,
  },
  mounted() {
    //赋值文档路径 此目录可以是http地址,也可以是本地文件
    //   const src = ref("./src/assets/docx/test.docx");
  },
  methods: {
    // 获取文件 这里是使用的 vue3.0 语法
    changeHandle(event) {
      console.log(event.target.files[0]);

      const file = event.target.files[0];

      let fileReader = new FileReader();
      fileReader.readAsArrayBuffer(file);
      fileReader.onload = () => {
        this.src = fileReader.result;
      };

        // const blob = new Blob([file], { type: "application/pdf;charset=utf-8" });
        // const blob = new Blob([file], { type: file.type });
        // this.src = window.URL.createObjectURL(blob); //这里是通过blob拿到url
        console.log("src--", this.src);
    },
    renderingCompleted() {
      console.log("渲染完成");
    },
  },
};
</script>

<style>
</style>

参考:

1、vue + vue-office 实现多种文件(docx、excel、pdf)的预览

2、vue 预览word、excel、pdf文档 vue-office(VueOfficeDocx、VueOfficeExcel、VueOfficePdf)

3、vue 实现 word/excel/ppt/pdf 等文件格式预览操作

4、npm官网解释vue-office

相关推荐
ElasticPDF-新国产PDF编辑器16 分钟前
Vue use pdf.js and Elasticpdf tutorial
vue.js·pdf
Billy Qin2 小时前
Tree - Shaking
前端·javascript·vue.js
月明长歌2 小时前
Vue + Axios + Mock.js 全链路实操:从封装到数据模拟的深度解析
前端·javascript·vue.js·elementui·es6
CodeCraft Studio2 小时前
Excel处理控件Spire.XLS系列教程:C# 合并、或取消合并 Excel 单元格
前端·c#·excel
头顶秃成一缕光2 小时前
若依——基于AI+若依框架的实战项目(实战篇(下))
java·前端·vue.js·elementui·aigc
冴羽yayujs2 小时前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·vue.js·前端框架·react
海石3 小时前
vue2升级vue3踩坑——【依赖注入】可能成功了,但【依赖注入】成功了不太可能
前端·vue.js·响应式设计
cypking4 小时前
解决 axios get请求瞎转义问题
vue.js
向阳2564 小时前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程
艾克马斯奎普特4 小时前
Vue.js 3 渐进式实现之响应式系统——第一节:系列开篇与响应式基本实现
vue.js