如何使用Odoo集成X-SpreadSheet，超详细步骤，亲测好用。

小咪咪 2023-10-01 22:10 24阅读 0赞

#### 目录 ####

*   *  一、背景
     *  二、集成过程
     *  1、下载X-SpreadSheet源码到本地
     *  2、将X-SpreadSheet集成到Odoo中
     *  3、创建QWeb页面，spreadsheet.xml
     *  4、创建对应的js文件， spreadsheet.js
     *  5、在views的action文件中定义action，并在menu文件中注册该menu
     *  三、使用过程
     *  1、引入xml和js文件
     *  2、在spreadsheet.js中初始化json数据
     *  3、获取excel数据
     *  三、结语

--------------------

### 一、背景 ###

Odoo企业版中是自带documents的excel模块的，我们将企业版中的documents相关模块放到社区版中会发现功能是生效的，但因为社区版和企业版主题样式的问题，会导致此时的documents样式适配问题，故此我们来看看在Odoo社区版如何使用X-SpreadSheet（[https://github.com/odoo/x-spreadsheet][https_github.com_odoo_x-spreadsheet]）来完成这一功能吧！

--------------------

### 二、集成过程 ###

### 1、下载X-SpreadSheet源码到本地 ###

x-spreadsheet.css：[https://unpkg.com/x-data-spreadsheet@1.0.13/dist/xspreadsheet.css][https_unpkg.com_x-data-spreadsheet_1.0.13_dist_xspreadsheet.css]

x-spreadsheet.js： [https://unpkg.com/x-data-spreadsheet@1.0.13/dist/xspreadsheet.js][https_unpkg.com_x-data-spreadsheet_1.0.13_dist_xspreadsheet.js]  
***注：*** 若将源码下载到本地，其对应的svg文件也需要下载，不然在本地的x-spreadsheet.css中会找不到图片资源，可在[https://github.com/odoo/x-spreadsheet/tree/master/dist][https_github.com_odoo_x-spreadsheet_tree_master_dist]中下载

![在这里插入图片描述][bb8d7e537e2e483ebdab9e1c2b8bbcbd.png]  
·

### 2、将X-SpreadSheet集成到Odoo中 ###

将上面的css和js文件放到对应模块的static下，并在template.xml中引入

![在这里插入图片描述][c6e8927e3f234655a98b31a983ff8e6e.png]  
·

### 3、创建QWeb页面，spreadsheet.xml ###

<?xml version="1.0" encoding="utf-8" ?>
    <template>
        <t t-name="x_spreadsheet">
            <div>
                <div id="x-spreadsheet-demo"></div>
            </div>
        </t>
    </template>

### 4、创建对应的js文件， spreadsheet.js ###

odoo.define('x_spreadsheet', function (require) {
        
        var AbstractAction = require('web.AbstractAction')
        var core = require('web.core')
        var spreadsheet = AbstractAction.extend({
        
            template: 'x_spreadsheet',
            start: function () {
        
                var self = this
                $(document).ready(function () {
        
                    // new Spreadsheet(document.getElementById('x-spreadsheet-demo'))
                    window&&window.x_spreadsheet&&(window.x_spreadsheet.$messages=window.x_spreadsheet.$messages||{
        },window.x_spreadsheet.$messages["zh-cn"]={
        toolbar:{
        undo:"撤销",redo:"恢复",print:"打印",paintformat:"格式刷",clearformat:"清除格式",format:"数据格式",fontName:"字体",fontSize:"字号",fontBold:"加粗",fontItalic:"倾斜",underline:"下划线",strike:"删除线",color:"字体颜色",bgcolor:"填充颜色",border:"边框",merge:"合并单元格",align:"水平对齐",valign:"垂直对齐",textwrap:"自动换行",freeze:"冻结",autofilter:"自动筛选",formula:"函数",more:"更多"},contextmenu:{
        copy:"复制",cut:"剪切",paste:"粘贴",pasteValue:"粘贴数据",pasteFormat:"粘贴格式",hide:"隐藏",insertRow:"插入行",insertColumn:"插入列",deleteSheet:"删除",deleteRow:"删除行",deleteColumn:"删除列",deleteCell:"删除",deleteCellText:"删除数据",validation:"数据验证",cellprintable:"可打印",cellnonprintable:"不可打印",celleditable:"可编辑",cellnoneditable:"不可编辑"},print:{
        size:"纸张大小",orientation:"方向",orientations:["横向","纵向"]},format:{
        normal:"正常",text:"文本",number:"数值",percent:"百分比",rmb:"人民币",usd:"美元",eur:"欧元",date:"短日期",time:"时间",datetime:"长日期",duration:"持续时间"},formula:{
        sum:"求和",average:"求平均值",max:"求最大值",min:"求最小值",concat:"字符拼接",_if:"条件判断",and:"和",or:"或"},validation:{
        required:"此值必填",notMatch:"此值不匹配验证规则",between:"此值应在 {} 和 {} 之间",notBetween:"此值不应在 {} 和 {} 之间",notIn:"此值不在列表中",equal:"此值应该等于 {}",notEqual:"此值不应该等于 {}",lessThan:"此值应该小于 {}",lessThanEqual:"此值应该小于等于 {}",greaterThan:"此值应该大于 {}",greaterThanEqual:"此值应该大于等于 {}"},error:{
        pasteForMergedCell:"无法对合并的单元格执行此操作"},calendar:{
        weeks:["日","一","二","三","四","五","六"],months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]},button:{
        next:"下一步",cancel:"取消",remove:"删除",save:"保存",ok:"确认"},sort:{
        desc:"降序",asc:"升序"},filter:{
        empty:"空白"},dataValidation:{
        mode:"模式",range:"单元区间",criteria:"条件",modeType:{
        cell:"单元格",column:"列模式",row:"行模式"},type:{
        list:"列表",number:"数字",date:"日期",phone:"手机号",email:"电子邮件"},operator:{
        be:"在区间",nbe:"不在区间",lt:"小于",lte:"小于等于",gt:"大于",gte:"大于等于",eq:"等于",neq:"不等于"}}});
                    x_spreadsheet.locale('zh-cn');
                    var xs = x_spreadsheet('#x-spreadsheet-demo');
                });
            }
        })
     
        core.action_registry.add('x_spreadsheet', spreadsheet);
        return spreadsheet;
    })

### 5、在views的action文件中定义action，并在menu文件中注册该menu ###

<?xml version="1.0" encoding="utf-8"?>
    <odoo>
        <record model="ir.actions.client" id="x_spreadsheet_action">
            <field name="name">spreadSheet</field>
            <field name="tag">x_spreadsheet</field>
        </record>
    </odoo>

<?xml version="1.0" encoding="utf-8"?>
    <odoo>
        <menuitem
                name="spreadSheet"
                id="spreadSheet_menu"
                action="x_spreadsheet_action"
                sequence="1"/>
    </odoo>

--------------------

### 三、使用过程 ###

### 1、引入xml和js文件 ###

将上面的xml文件和js文件分别在\_\_manifest\_\_.py和template.xml中引入，重启并升级后浏览页面  
![在这里插入图片描述][8257420cb353402ab4ab1b8c4328214f.png]

### 2、在spreadsheet.js中初始化json数据 ###

这个时候，页面已经出来了， 我们该如何初始化数据和获取excel数据呢？可以在spreadsheet.js中初始化json数据，加载并刷新页面，就会发现初始化渲染的数据已经生效了！  
![在这里插入图片描述][3aa1a70ccb6841fa95cceff334308573.png]  
![在这里插入图片描述][0e9344a9a42741c3ac656f2a8850ce4f.png]

### 3、获取excel数据 ###

这一步，我们来获取excel的数据，并修改excel数据时观察控制台打印的数据。  
![在这里插入图片描述][c15d3019063a490397f0c2f41ea38aed.png]![在这里插入图片描述][4fda4c3e25894c4ba3ecf3ba4f760e13.png]

--------------------

### 三、结语 ###

以上就是odoo集成X-SpreadSheet的整个过程和使用方式，还有其他问题的话，欢迎一起交流交流！

**版权声明**:本文由神州数码云基地团队整理撰写，若转载请注明出处。  
公众号搜索神州数码云基地，后台回复Odoo，加入Odoo技术交流群！

[https_github.com_odoo_x-spreadsheet]: https://github.com/odoo/x-spreadsheet
[https_unpkg.com_x-data-spreadsheet_1.0.13_dist_xspreadsheet.css]: https://unpkg.com/x-data-spreadsheet@1.0.13/dist/xspreadsheet.css
[https_unpkg.com_x-data-spreadsheet_1.0.13_dist_xspreadsheet.js]: https://unpkg.com/x-data-spreadsheet@1.0.13/dist/xspreadsheet.js
[https_github.com_odoo_x-spreadsheet_tree_master_dist]: https://github.com/odoo/x-spreadsheet/tree/master/dist
[bb8d7e537e2e483ebdab9e1c2b8bbcbd.png]: https://img-blog.csdnimg.cn/bb8d7e537e2e483ebdab9e1c2b8bbcbd.png
[c6e8927e3f234655a98b31a983ff8e6e.png]: https://img-blog.csdnimg.cn/c6e8927e3f234655a98b31a983ff8e6e.png
[8257420cb353402ab4ab1b8c4328214f.png]: https://img-blog.csdnimg.cn/8257420cb353402ab4ab1b8c4328214f.png
[3aa1a70ccb6841fa95cceff334308573.png]: https://img-blog.csdnimg.cn/3aa1a70ccb6841fa95cceff334308573.png
[0e9344a9a42741c3ac656f2a8850ce4f.png]: https://img-blog.csdnimg.cn/0e9344a9a42741c3ac656f2a8850ce4f.png
[c15d3019063a490397f0c2f41ea38aed.png]: https://img-blog.csdnimg.cn/c15d3019063a490397f0c2f41ea38aed.png
[4fda4c3e25894c4ba3ecf3ba4f760e13.png]: https://img-blog.csdnimg.cn/4fda4c3e25894c4ba3ecf3ba4f760e13.png