XDOC 在线word文档表格预览
程序员文章站
2022-07-13 15:29:39
...
http://www.xdocin.com/web.html
XDOC
XDOC表单将文档、表单、报表融为一体，以Flash的形式嵌入在网页中，提供仿纸质的文档式表单。通过表单API可以与表单进行交互，数据还可以与表单结合生成PDF等格式的文档。表单可以用XDOC设计器轻松制作。
JS文件
<script type="text/javascript" src="http://www.xdocin.com/xdoc.js"></script>JS方法
/**
* 创建表单
* @param id html元素ID，表单容器
* @param xdoc xdoc模板，可以是xdoc、json、html或指向这些格式的url
* @param param 表单参数
* onInit(form) 初始化
* onLoad(form) 表单加载完成
* onSave(form) 保存
* onChange(form,item) 数据改变
* onSelect(form,item) 外部弹出选择
*/
XDoc.form = function(id, xdoc, param) {...};
/**
* 获取表单对象
* @param id html元素ID，表单容器
*/
XDoc.form = function(id) {...};
表单对象方法
可以通过XDoc.form方法获取到表单实例，调用下面的API方法，与XDOC表单进行交互，例如：
var form = XDoc.form("formId");
alert(form.getXData());API方法
/**
* 获取数据
* @param format 数据格式:xml、json、csv，默认xml
* xml格式<xdata><row></row></xdata>
* json格式[{}]
* @return 数据
*/
function getXData(format);
/**
* 设置数据
* @param xdata 支持xml、json、csv格式数据，也可以是指向数据的url
*/
function setXData(xdata);
/**
* 获取输入项值
* @param item 输入项名称
* @param format 数据格式:xml、json、csv，默认csv，仅对表格控件有效
* @return 值
*/
function getItemValue(item,format);
/**
* 设置输入项值
* @param item 输入项
* @param value 值，支持xml、json、csv格式
*/
function setItemValue(item, value);
/**
* 设置输入项是否有效
* @param item 输入项名称
* @param enable 是否有效
*/
function setItemEnable(item, enable);
/**
* 设置输入项是否可编辑
* @param item 输入项名称
* @param editable 是否可编辑
*/
function setItemEditable(item, editable);
/**
* 设置输入项的可选值
* @param item 输入项名称
* @param option 可选值
*/
function setItemOption(item, option);
/**
* 设置输入项是否可显示
* @param item 输入项名称
* @param visible 是否可显示
*/
function setItemVisible(item, visible);
/**
* 设置输入项提示信息
* @param item 输入项名称
* @param msg 提示信息
*/
function setItemMessage(item, msg);
/**
* 设置所有输入项是否有效
* @param enable 是否有效
*/
function setEnable(enable);
/**
* 设置所有输入项是否可编辑
* @param editable 是否可编辑
*/
function setEditable(editable);
/**
* 清除输入项值
*/
function clearValue();
/**
* 校验输入项值是否有效
* @return 是否有效
*/
function validate();
/**
* 设置工具条是否显示
* @param visible 是否显示
*/
function setBarVisible(visible);
/**
* 获取工具条是否显示
* @return 是否显示
*/
function isBarVisible();
/**
* 设置打开按钮是否显示
* @param visible 是否显示
*/
function setOpenVisible(visible);
/**
* 设置保存按钮是否显示
* @param visible 是否显示
*/
function setSaveVisible(visible);
/**
* 设置打印按钮是否显示
* @param visible 是否显示
*/
function setPrintVisible(visible);
/**
* 设置数据重拍版按钮是否显示
* @param visible 是否显示
*/
function setLayoutVisible(visible);
/**
* 设置保存格式，多个用逗号分隔
* @param format
*/
function setSaveFormats(formats);
/**
* 设置点击提交保存按钮执行的操作
* @param action
*/
function setAction(action);
/**
* 打印
*/
function print();
/**
* 设置显示比例
* @param scale -1：适合宽度；-2：适合页面；100：原始比例
*/
function setScale(scale);
/**
* 跳转到第几页
* @param page 第几页
*/
function goPage(page);示例
表单模板zfht.xdoc是用XDOC设计器编辑，部署到XDocServer上的
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>XDOC表单示例</title>
<script type="text/javascript" src="http://www.xdocin.com/xdoc.js"></script>
</head>
<body style="margin:0;overflow:hidden;">
<div id="formDiv"></div>
<script type="text/javascript">
XDoc.form("formDiv", "./zfht.xdoc", {
onInit:function(form) {
//alert("初始化完成");
},
onLoad:function(form) {
//放入需要编辑的数据
//form.setXData("");
form.setItemValue("出租人","李晓明");
form.setItemValue("承租人","张军");
},
onSave:function(form) {
//保存数据
alert("出租人=" + form.getItemValue("出租人"));
alert(form.getXData());
//合并输出
//XDoc.run("./zfht.xdoc", "pdf", {_xdata:form.getXData()});
},
onChange:function(form,item) {
//响应change
}
});
</script>
</body>
</html>JSON表单
<script type="text/javascript" src="http://www.xdocin.com/xdoc.js"></script>
<script type="text/javascript">
var xdoc = {
"version": "9.7.9",
"paper": {
"margin": "48"
},
"body": {
"sizeType": "autosize",
"items": [
{
"Class": "para",
"align": "center",
"items": [
{
"Class": "img",
"width": "270",
"height": "129",
"src": "http:\/\/www.baidu.com\/img\/bdlogo.gif"
}
]
},
{
"Class": "para",
"align": "center",
"items": [
{
"Class": "input",
"width": "292",
"name": "wd",
"value": "xdoc",
"color": "#808080"
},
{
"Class": "text",
"text": " "
},
{
"Class": "input",
"fillColor": "#0088cc",
"type": "button",
"value": "百度一下",
"option": "http:\/\/www.baidu.com\/s\n\nget",
"font": "color=#ffffff",
"color": ""
}
]
}
]
}
};
XDoc.form("formDiv", xdoc);
</script>上面说引用的js文件备份地址:http://download.csdn.net/download/joeson7456/10261314
上一篇： HTML 颜色
下一篇： 关于点击改变Class，修改css样式