Vue集成PageOffice实现在线编辑word、excel(前端配置)

一、什么是PageOffice

PageOffice是一款在线的office编辑软件,帮助Web应用系统或Web网站实现用户在线编辑Word、Excel、PowerPoint文档。可以完美实现在线公文流转,领导批阅,盖章。可以给文件添加水印,在线安全预览防止用户下载和复制文件等。

二、环境要求

前端Vue项目:Node.js10及以上版本(当前集成方式不支持vue3,原因是vue3不兼容ie)

三、前端配置

1、 在index.html页面引用后端项目(samples-springboot-back)根目录下的pageoffice.js

javascript 复制代码
<script type="text/javascript" src="http://localhost:8081/samples-springboot-back/pageoffice.js"></script>

2、在vue.config.js中配置代理

javascript 复制代码
devServer: {
        proxy: {
        '/api': {
          target: 'http://localhost:8081/samples-springboot-back', //"/api"对应后端项目"http://localhost:8081/samples-springboot-back"地址 
          ws: true,
          changeOrigin: true, // 允许跨域
          pathRewrite: {
           '^/api': ''   // 标识替换,使用 '/api' 代替真实的接口地址
          }
        }
      }
    }

3、使用v-html解析(其实也可以嵌在iframe标签中)

完成这个需要有后端项目配合.

多看看文档多研究一下。
介绍 | PageOffice 开发者中心

javascript 复制代码
<template>
	<div class="Word">
		<div style="height: 800px; width: auto" v-html="poHtmlCode" />
	</div>
</template>
<script>
const axios = require("axios");
export default {
  name: "Word",
  data() {
    return {
      poHtmlCode: "",
    };
  },
  created: function () {
    axios
      .post("/api/SimpleWord/Word")
      .then((response) => {
        this.poHtmlCode = response.data;
      })
      .catch(function (err) {
        console.log(err);
      });
  },
  methods: {
    //控件中的一些常用方法都在这里调用,比如保存,打印等等
    /**
     * Save()方法是/api/SimpleWord/Word这个后台controller中PageOfficeCtrl控件通过poCtrl.addCustomToolButton定义的方法,除了保存还有另存到本地、打印等功能。
     */
    Save() {
      document.getElementById("PageOfficeCtrl1").WebSave();
    }
  },
  mounted: function () {
    // 将PageOffice控件中的方法通过mounted挂载到window对象上,只有挂载后才能被vue组件识别
    window.Save = this.Save;
  },
};
</script>
 
相关推荐
秋名山大前端6 小时前
Chrome GPU 加速优化配置(前端 3D 可视化 / 数字孪生专用)
前端·chrome·3d
今天不要写bug6 小时前
antv x6实现封装拖拽流程图配置(适用于工单流程、审批流程应用场景)
前端·typescript·vue·流程图
luquinn6 小时前
实现统一门户登录跳转免登录
开发语言·前端·javascript
用户21411832636026 小时前
dify案例分享-5分钟搭建智能思维导图系统!Dify + MCP工具实战教程
前端
augenstern4167 小时前
HTML(面试)
前端
excel7 小时前
前端常见布局误区:1fr 为什么撑爆了我的容器?
前端
烛阴7 小时前
TypeScript 类型魔法:像遍历对象一样改造你的类型
前端·javascript·typescript
vayy7 小时前
uniapp中 ios端 scroll-view 组件内部子元素z-index失效问题
前端·ios·微信小程序·uni-app
专注API从业者7 小时前
基于 Node.js 的淘宝 API 接口开发:快速构建异步数据采集服务
大数据·前端·数据库·数据挖掘·node.js
前端无冕之王7 小时前
一份兼容多端的HTML邮件模板实践与详解
前端·css·数据库·html