首都之窗门户网站首页,石岩做网站的公司,文章分享网站模版,建设视频网站需要什么知识一、什么是PageOffice PageOffice是一款在线的office编辑软件#xff0c;帮助Web应用系统或Web网站实现用户在线编辑Word、Excel、PowerPoint文档。可以完美实现在线公文流转#xff0c;领导批阅#xff0c;盖章。可以给文件添加水印#xff0c;在线安全预览防止用户下载…一、什么是PageOffice PageOffice是一款在线的office编辑软件帮助Web应用系统或Web网站实现用户在线编辑Word、Excel、PowerPoint文档。可以完美实现在线公文流转领导批阅盖章。可以给文件添加水印在线安全预览防止用户下载和复制文件等。 二、环境要求
前端Vue项目Node.js10及以上版本当前集成方式不支持vue3原因是vue3不兼容ie)
三、前端配置
1、 在index.html页面引用后端项目samples-springboot-back根目录下的pageoffice.js
script typetext/javascript srchttp://localhost:8081/samples-springboot-back/pageoffice.js/script
2、在vue.config.js中配置代理
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 开发者中心
templatediv classWorddiv styleheight: 800px; width: auto v-htmlpoHtmlCode //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
