項(xiàng)目地址：link

使用

一個(gè)最簡單的demo，只用一個(gè)html，不需要任何其它配置

<link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet@1.1.1/dist/xspreadsheet.css">
<script src="https://unpkg.com/x-data-spreadsheet@1.1.1/dist/xspreadsheet.js"></script>
<script src="https://unpkg.com/x-data-spreadsheet@1.1.1/dist/locale/zh-cn.js"></script>
<div id="x-spreadsheet-demo">
  <script>
    x_spreadsheet.locale('zh-cn');  //中文
    var htmlout = document.getElementById('x-spreadsheet-demo')
    var xs = x_spreadsheet(htmlout
  </script>
</body>
</div>

現(xiàn)在的問題是如何把插件加載json數(shù)據(jù)，以及處理保存的問題。數(shù)據(jù)導(dǎo)出成excel應(yīng)該沒問題。

在npm中使用

作者說不推薦，放棄

導(dǎo)入和導(dǎo)出

作者給的例子是另一個(gè)項(xiàng)目里的：link

這個(gè)例子下載后在win上有bug：

1. index.html第45,46行，引用的兩個(gè)文件是鏈接，在win是不生效的，手動(dòng)下載這兩個(gè)文件

2. index.html 第55行，var xspr = x.spreadsheet(HTMLOUT)，變量x未定義，改成x_spreadsheet(HTMLOUT)

改了之后就，瀏覽器打開index.html后就可以使用了，效果還不錯(cuò)。導(dǎo)出之后會丟失所有格式。

從數(shù)據(jù)庫讀取數(shù)據(jù)解析為表格

先看一個(gè)加載json的例子

<link rel="stylesheet"
    href="https://unpkg.com/x-data-spreadsheet@1.1.1/dist/xspreadsheet.css">
<script src="https://unpkg.com/x-data-spreadsheet@1.1.1/dist/xspreadsheet.js"></script>
<script src="https://unpkg.com/x-data-spreadsheet@1.1.1/dist/locale/zh-cn.js"></script>
<div id="x-spreadsheet-demo">
    <script>
        x_spreadsheet.locale('zh-cn');  //中文
        var htmlout = document.getElementById('x-spreadsheet-demo')
        data = [{
    "name":"Sheet1","freeze":"A1","styles":[],"merges":[],
        "rows":{
    
            "0":{
    "cells":{
    "0":{
    "text":"id"},"1":{
    "text":"name"}}},
            "1":{
    "cells":{
    "0":{
    "text":"1"},"1":{
    "text":"Tom"}}},
            "2":{
    "cells":{
    "0":{
    "text":"2"},"1":{
    "text":"Hall"}}},
            "3":{
    "cells":{
    "0":{
    "text":"3"},"1":{
    "text":"Sure"}}},
            "len":5},
            "cols":{
    "len":6},
            "validations":[],
            "autofilter":{
    }}]
        var xs = x_spreadsheet(htmlout).loadData(data)
        console.log("表格返回的數(shù)據(jù)為：\n", xs.getData())  // getData得到一個(gè)object對象，要把它轉(zhuǎn)為json用JSON.stringify()
        console.log("json字符串格式為：\n", JSON.stringify(xs.getData()))
    </script>
</div>

上面的例子中，各出的json格式和從數(shù)據(jù)庫拿到的不一樣，所以我們?nèi)绻氚褟臄?shù)據(jù)庫拿出的直接json樣式展示出來，需要自己寫一個(gè)轉(zhuǎn)換函數(shù)。這個(gè)在后端還是前端都可以，我們就在后端完成這個(gè)工作。

假設(shè)由數(shù)據(jù)庫得到一個(gè)df對象，現(xiàn)在把它拼接成這種形式的json字符串。

• 我們發(fā)現(xiàn)json中指定的行和列，如果新增行列是在前面加，所以指定的時(shí)候就比數(shù)據(jù)庫的數(shù)據(jù)多一行一列。

現(xiàn)在用 python 來實(shí)現(xiàn)格式轉(zhuǎn)換：
dataframe -> dict -> dict2 -> list
dict2的格式

這是一個(gè)四維字典，用：

dict2['0']['cells']['0']['text']

可以訪問到 第一個(gè)數(shù)據(jù)，這里就是 id, 但實(shí)際上數(shù)據(jù)是二維的，二四維是固定的‘cells’和’text’。

方案一：直接用字符串拼接

def df2xspreadsheetjson(df) -> str:    '''
    df對象轉(zhuǎn)為 x-spreadsheet格式的json字符串
    :param df: 從數(shù)據(jù)庫得到的dataframe
    :return: str
    '''
    cols = []    # 重命名標(biāo)題行，主要考慮標(biāo)題行空等情況    for col in df.columns:        if col == "":
            cols.append("N/A")  # 標(biāo)題行空，一般不可能        elif col