文章目錄
新建一個flask項目
使用
從數據庫讀取數據解析為表格
在flask中使用xspread-sheet
項目地址:link
使用
一個最簡單的demo,只用一個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>
現在的問題是如何把插件加載json數據,以及處理保存的問題。數據導出成excel應該沒問題。
在npm中使用
作者說不推薦,放棄
導入和導出
作者給的例子是另一個項目里的:link
這個例子下載后在win上有bug:
index.html第45,46行,引用的兩個文件是鏈接,在win是不生效的,手動下載這兩個文件
index.html 第55行,var xspr = x.spreadsheet(HTMLOUT),變量x未定義,改成x_spreadsheet(HTMLOUT)
改了之后就,瀏覽器打開index.html后就可以使用了,效果還不錯。導出之后會丟失所有格式。
從數據庫讀取數據解析為表格
先看一個加載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("表格返回的數據為:\n", xs.getData()) // getData得到一個object對象,要把它轉為json用JSON.stringify()
console.log("json字符串格式為:\n", JSON.stringify(xs.getData()))
</script>
</div>
上面的例子中,各出的json格式和從數據庫拿到的不一樣,所以我們如果想把從數據庫拿出的直接json樣式展示出來,需要自己寫一個轉換函數。這個在后端還是前端都可以,我們就在后端完成這個工作。
假設由數據庫得到一個df對象,現在把它拼接成這種形式的json字符串。
現在用 python 來實現格式轉換:
dataframe -> dict -> dict2 -> list
dict2的格式
這是一個四維字典,用:
dict2['0']['cells']['0']['text']
可以訪問到 第一個數據,這里就是 id, 但實際上數據是二維的,二四維是固定的‘cells’和’text’。
方案一:直接用字符串拼接
def df2xspreadsheetjson(df) -> str: '''
df對象轉為 x-spreadsheet格式的json字符串
:param df: 從數據庫得到的dataframe
:return: str
'''
cols = [] for col in df.columns: if col == "":
cols.append("N/A") elif col
該文章在 2024/6/12 12:31:21 編輯過