XDOC 在线word文档表格预览

最新推荐文章于 2024-06-08 14:31:04 发布

Json_M

最新推荐文章于 2024-06-08 14:31:04 发布

阅读量7k

点赞数

分类专栏：前端文章标签： xdoc word预览表单预览在线预览

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

Json_M

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
XDOC 在线word文档表格预览

http://www.xdocin.com/web.htmlXDOCXDOC表单将文档、表单、报表融为一体，以Flash的形式嵌入在网页中，提供仿纸质的文档式表单。通过表单API可以与表单进行交互，数据还可以与表单结合生成PDF等格式的文档。表单可以用XDOC设计器轻松制作。JS文件&lt;script type="text/javascript" src="http:...
复制链接

扫一扫