vue-office文件预览

最新推荐文章于 2024-07-02 17:05:26 发布

不爱学习的同学

最新推荐文章于 2024-07-02 17:05:26 发布

阅读量152

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_44308944/article/details/133783409

版权

本文介绍了如何在Vue应用中使用Vue-Office-PDF、Vue-Office-Excel和Vue-Office-Docx组件库来实现实时加载和转换Word、Excel和PDF文件。创建了一个简单的组件，展示了如何在页面上渲染这些文件并处理加载完成事件。

摘要由CSDN通过智能技术生成

<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;
	  },
  }