如何在js调用pageoffice组件 window
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在js调用pageoffice组件 window相关的知识，希望对你有一定的参考价值。
window下在js调用pageoffice组件：第一步：拷贝文件到WEB项目的“WEB-INF/lib”目录下。拷贝PageOffice示例中下的“WEB-INF/lib”路径中的pageoffice.cab和pageoffice.jar到新建项目的“WEB-INF/lib”目录下。
第二步：修改WEB项目的配置文件。将如下代码添加到配置文件中：
<!-- PageOffice Begin -->
<servlet>
<servlet-name>poserver</servlet-name><servlet-class>com.zhuozhengsoft.pageoffice.poserver.Server
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>poserver</servlet-name>
<url-pattern>/poserver.do</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>poserver</servlet-name>
<url-pattern>/pageoffice.cab</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>poserver</servlet-name>
<url-pattern>/popdf.cab</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>poserver</servlet-name>
<url-pattern>/sealsetup.exe</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>adminseal</servlet-name>
<servlet-class>com.zhuozhengsoft.pageoffice.poserver.AdminSeal
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>adminseal</servlet-name>
<url-pattern>/adminseal.do</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>adminseal</servlet-name>
<url-pattern>/loginseal.do</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>adminseal</servlet-name>
<url-pattern>/sealimage.do</url-pattern>
</servlet-mapping>
<mime-mapping>
<extension>mht</extension>
<mime-type>message/rfc822</mime-type>
</mime-mapping>
<context-param>
<param-name>adminseal-password</param-name>
<param-value>123456</param-value>
</context-param>
<!-- PageOffice End -->
第三步：添加引用。在WEB项目的WebRoot目录下添加动态页面Word.jsp。在该页面后台代码中
添加自定义标签库：“<%@ taglib uri="http://java.pageoffice.cn" prefix="po"%>”
引入PageOffice类库：“<%@page import=” com.zhuozhengsoft.pageoffice.*,com.zhuozhengsoft.pageoffice.wordwriter.*”%>”。
在html的<body>中添加PageOffice引用：
“<po:PageOfficeCtrl id="PageOfficeCtrl1"></po:PageOfficeCtrl>”，并设置控件所在层（<div></div>）的高和宽。
再在<body>中添加两个文本框，用于输入书签名称和书签文本内容，部分如下：
插入书签时，请先输入要插入的书签名称和文本；删除书签时，请先输入相应的书签名称！<label>书签名称：</label>
<inputid="txtBkName"type="text"value="test"/>
<label>书签文本：</label>
inputid="txtBkText"type="text"value="[测试]"/>
第四步：WordAddBKMK.jsp后台编写代码。打开Word文件，部分代码如下：
//*******************卓正PageOffice组件的使用***********************
PageOfficeCtrl poCtrl1 = new PageOfficeCtrl(request);
poCtrl1.setServerPage("poserver.do"); //此行必须
//添加自定义按钮
poCtrl1.addCustomToolButton("插入书签","addBookMark",5);
poCtrl1.addCustomToolButton("删除书签","delBookMark",5);
poCtrl1.webOpen("doc/template.doc", OpenModeType.docNormalEdit, "张三");
poCtrl1.setTagId("PageOfficeCtrl1"); //此行必须
然后在HTML页面添加JS函数，代码如下：
var range;
function addBookMark()
var obj = document.getElementById("PageOfficeCtrl1").Document;
var bkName = document.getElementById("txtBkName").value;
var bkText = document.getElementById("txtBkText").value;
range = obj.Application.Selection.Range;
range.Text = bkText;
obj.Bookmarks.Add(bkName, range);
obj.Bookmarks(bkName).Select();
function delBookMark()
var bkName = document.getElementById("txtBkName").value;
var obj = document.getElementById("PageOfficeCtrl1").Document;
range = obj.Application.Selection.Range;
if(obj.Bookmarks.Exists(bkName))
obj.Bookmarks(bkName).Select();
obj.Application.Selection.Range.Text = "";
参考技术A 有两种选择, 你可以把父窗口的函数写在一个外部js文件中,然后在子窗口引用这个js来调用. 如果你还需要父窗口的参数的话,那建议你把函数和参数以param的方式传入子窗口,例如 window.open(pageURL,name,param);请在param中将函数和参数一并传递过.
如何在 vue.js 2 的其他组件中调用方法？
【中文标题】如何在 vue.js 2 的其他组件中调用方法？【英文标题】：How can I call method in other component on vue.js 2? 【发布时间】：2017-12-19 05:15:26 【问题描述】：我的第一个组件是这样的：
<template>
...
</template>
<script>
export default
...
methods:
addPhoto()
const data = id_product: this.idProduct
const item = this.idImage
this.$store.dispatch('addImage', data)
.then((response) =>
this.createImage(item, response)
);
,
</script>
如果调用addPhoto方法，它会调用ajax，然后会得到响应ajax
我想将响应 ajax 和另一个参数发送到方法 createImage。方法createImage位于其他组件（第二个组件）
我的第二个组件是这样的：
<template>
<div>
<ul class="list-inline list-photo">
<li v-for="item in items">
<div v-if="clicked[item]">
<img :src="image[item]" >
<a href="javascript:;" class="thumb-check"><span class="fa fa-check-circle"></span></a>
</div>
<a v-else href="javascript:;" class="thumb thumb-upload"
title="Add Photo">
<span class="fa fa-plus fa-2x"></span>
</a>
</li>
</ul>
</div>
</template>
<script>
export default
...
data()
return
items: [1,2,3,4,5],
clicked: [], // using an array because your items are numeric
,
methods:
createImage(item, response)
this.$set(this.clicked, item, true)
,
</script>
如何在第二个组件上运行 createImage 方法，然后它可以更改第二个组件中的元素？
【问题讨论】：
这可能吗？如果不是，是否有其他方案可以在执行 addPhoto 方法时改变第二个组件中的元素？ 第一个组件和第二个组件是什么关系？他们是亲子还是兄弟姐妹？通常，您会$emit 来自子级的事件并在父级中为该事件注册一个处理程序，否则您可以使用 ref 获取对组件的引用并使用它直接调用该方法。
【参考方案1】：
没有两个组件没有父/子关系。它们都是通过根 vue 实例连接的。要访问根 vue 实例，只需调用 this.$root 即可获得根实例。
....
.then((response) =>
this.$root.$emit('createImage', item, response)
);
并在第二个组件中制作需要触发的功能
...
mounted()
this.$root.$on('createImage', (item, response) =>
// your code goes here
)
它更像是一个套接字。由于$root，该活动将在全球范围内进行。
注意将 vue 实例添加到全局窗口对象是一种不好的做法
【讨论】：
【参考方案2】：如果这 2 个组件是兄弟组件（没有父子组件），那么一种解决方案是使用事件总线。
一般的想法是像这样构建一个全局事件处理程序：
在main.js
window.Event = new Vue();
然后在你的第一个组件中触发一个事件：
....
.then((response) =>
Event.$emit('createImage', item, response)
);
并在第二个组件中注册一个处理程序以在mounted()钩子中监听createImage事件：
...
mounted()
Event.$on('createImage', (item, response) =>
// your code goes here
您可以通过阅读this turtorial 和观看this screen cast 找到更多信息。
【讨论】：
以上是关于如何在js调用pageoffice组件 window的主要内容，如果未能解决你的问题，请参考以下文章
国产UOS操作系统调用PageOffice在线编辑保存Office文档
[原创]Java调用PageOffice在线打开数据库中保存的Word文件