vue-office文件预览

最新推荐文章于 2025-04-22 16:01:17 发布

不爱学习的同学

最新推荐文章于 2025-04-22 16:01:17 发布

阅读量297

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_44308944/article/details/133783409

版权

<div class="file-content" v-loading="loading">
	<vue-office-pdf
	 :src="fileUrl"
	 style="height: 600px"
	 @rendered="renderingCompleted"
	/>
	<vue-office-excel
	 :src="fileUrl"
	 style="height: 600px"
	 @rendered="renderingCompleted"
	/>
	<vue-office-docx
	 :src="fileUrl"
	 style="height: 600px"
	 @rendered="renderingCompleted"
	/>
</div>

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";
import VueOfficePdf from "@vue-office/pdf";

 data() {
    return {
      fileUrl:'',
      loading: false,
    };
  },
  created() {
    this.loading = true;
  },
  methods: {
	 renderingCompleted() {
	    this.loading = false;
	  },
  }