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

VueOfficeDocx 是一个 Vue.js 组件库,用于在 Vue.js 应用程序中创建和编辑 Microsoft Word 文档(.docx)。下面是一些常见的属性和知识点以及它们的用法:

一、安装包

使用终端命令安装包
//docx文档预览组件
npm install @vue-office/docx

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

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

二、代码示例


<template>
	<div>
		<vue-office-docx :src="docxUrl" @rendered="renderingCompleted" />
	div>
template>
<script setup lang="ts">
	import { ref } from 'vue';
	//引入VueOfficeDocx组件
	import VueOfficeDocx from '@vue-office/docx';
	
	//赋值文档路径 此目录可以是http地址,也可以是本地文件
	const docxUrl= ref("./src/assets/docx/test.docx");
	const renderingCompleted = () => {
		console.log("渲染完成");
	};
script>

<template>
	<div>
		<vue-office-excel :src="excelUrl" @rendered="renderingCompleted"/>
	div>
template>
<script setup lang="ts">
	import { ref } from 'vue';
	//引入VueOfficeExcel组件
	import VueOfficeExcel from '@vue-office/excel'
	
	//赋值文档路径 此目录可以是http地址,也可以是本地文件
	const excelUrl= ref("./src/assets/excel/test.xlsx");
	const renderingCompleted = () => {
		console.log("渲染完成");
	};
script>

<template>
	<div>
		<vue-office-pdf :src="pdfUrl" @rendered="renderingCompleted "/>
	div>
template>
<script setup lang="ts">
	import { ref } from 'vue';
	//引入VueOfficePdf组件
	import VueOfficePdf from '@vue-office/pdf'
	
	//赋值文档路径 此目录可以是http地址,也可以是本地文件
	const pdfUrl= ref("./src/assets/pdf/test.pdf");
	const renderingCompleted = () => {
		console.log("渲染完成");
	};
script>

三、vue-office属性以及使用示例

  1. template 属性:

    • 描述:指定要加载和显示的初始文档模板。
    • 用法:
      <VueOfficeDocx :template="myTemplate">VueOfficeDocx>
      
      data() {
        return {
          myTemplate: '/path/to/template.docx'
        };
      }
      
  2. options 属性:

    • 描述:配置文档编辑器的选项,如工具栏的显示与隐藏、编辑器的尺寸等。
    • 用法:
      <VueOfficeDocx :options="editorOptions">VueOfficeDocx>
      
      data() {
        return {
          editorOptions: {
            toolbar: true,
            width: '800px',
            height: '600px'
          }
        };
      }
      
  3. editor 属性:

    • 描述:文档编辑器的实例,通过它可以操作和访问文档的内容和样式。
    • 用法:
      <VueOfficeDocx ref="docxEditor">VueOfficeDocx>
      
      mounted() {
        const editor = this.$refs.docxEditor.editor;
        // 使用 editor 实例执行操作
      }
      
  4. save 方法:

    • 描述:保存文档的方法,将编辑后的文档保存为 .docx 文件。
    • 用法:
      methods: {
        saveDocument() {
          this.$refs.docxEditor.save('/path/to/save.docx');
        }
      }
      
  5. load 方法:

    • 描述:加载文档的方法,用于将已有的 .docx 文件加载到编辑器中进行编辑。
    • 用法:
      methods: {
        loadDocument() {
          this.$refs.docxEditor.load('/path/to/document.docx');
        }
      }
      
  6. events 事件:

    • 描述:组件触发的事件,如文档加载完成、保存成功等,可以监听这些事件并执行相应的操作。
    • 用法:
      <VueOfficeDocx @document-loaded="handleDocumentLoaded">VueOfficeDocx>
      
      methods: {
        handleDocumentLoaded() {
          // 文档加载完成后执行的操作
        }
      }
      

四、使用

你可能感兴趣的:(vue,前端,vue.js,word,excel,pdf,前端,前端框架,html)