?Excel表格可是幾乎每天都能用的到,不是自己編輯發給同事,就是別人發來的,而且有時候不僅是對Excel表格進行編輯,還需要進行格式轉換,最常見的就是Excel轉PDF。幾天你那小編給大家講一個不常見的【Excel轉HTML】,有需要的小伙伴趕緊看過來吧,只需要一個PDF轉換器即可。
??第一步,打開已經安裝好的極強PDF轉換器,點擊頁面左側的【其他文檔格式轉換】,看見了,有一個【文件轉HTML】選項,沒錯點它。然后點擊【添加文件】,把需要進行轉換的Excel表格文件加進來。?
??第二步,在頁面下方勾選【自定義】選項,先把文件存儲為設置好,然后點擊【開始轉換】。?
??第三步,稍等片刻,轉換完成之后會有一個如下圖所示的提示框,點擊【確定】即可。?
??第四步,下面就預覽一下Excel轉HTML的成果如何,如下圖所示還不錯吧。?
??極強PDF轉換器不僅是PDF轉換器,還可以實現其他文件的格式轉換,還等什么,趕緊來本站免費下載吧。
、在exl中編輯好你想要的表格形式,復制有內容的表格到dw右側,如圖:
2、將途中寬度去除,選中一個寬度,按Ctrl+F,點擊“替換全部”。如圖:
3、途中選中部分換成表格的表頭代碼:
表頭代碼:<table align="center" border="1" cellpadding="0" cellspacing="1" class="biaoge" style="text-align:center" width="100%">
<tbody>
4、將表格標題中的td和/td改成th和/th。如圖:
5、選中右側表格中有鏈接的表格,選擇上方窗口中的屬性面板,在html狀態下,目標選擇”_blank”。
6、左側代碼就是匯總表格的代碼,復制到后臺內容頁的源碼狀態下即可。
如今各類BI產品大行其道,“數據可視化”成為一個熱門詞匯。相比價格高昂的各種BI軟件,用Excel來制作動態報表就更加經濟便捷。今天小編就將為大家介紹一下如何使用葡萄城公司的純前端表格控件——SpreadJS來實現一個Excel動態報表:
制作這樣的數據大屏首先必須要明確目的,比如在這里圍繞銷售金額制作一個數據大屏,首先點擊數據源,然后點擊插入找到數據透視表,隨后將年份放在行字段,然后將銷售金額放在值字段,因為在這里數值比較大,可以選擇銷售金額這一列數據,然后按快捷鍵Ctrl 1調出格式窗口,點擊自定義,將類型設置為0!.0,這樣的話就變為了萬元顯示,然后在設計中找到總計,選擇對行和列禁用,將數據透視表中的總計禁用掉。
選擇數據區域,然后在圖表中找到餅圖,隨后為餅圖添加數據標簽,緊接著點擊標簽按Ctrl + 1調出格式窗口,勾選類別名稱然后將分隔符設置為新的文本行,最后將無用的圖例刪掉即可,至此的第一個圖表就制作完畢了。
為了添加更多圖表,復制剛才設置的數據透視表,在復制的數據透視表中將年份這個字段拖走,然后將省份這個字段放在行字段,最后將數字更改為萬元顯示,然后插入一個橫向的條形圖,將無用的圖例刪除掉即可。需要注意的是,你需要設置幾個圖表,就需要復制幾次數據透視表,更改為自己需要的字段,最后插入圖表,在這里就以3個為例跟大家演示制作方法。
為了讓多張圖表能夠聯動變化,點擊數據透視表,在工具欄中找到插入切片器,然后分別勾選,年份,省份,廠商點擊確定,這樣的話就插入了3個切片器,隨后將他們更改下大小放在合適的位置即可。隨后點擊一個切片器,在切片器選項中選擇鏈接到報表,勾選其他的兩個報表即可,以此類推,其余的2個切片器也需要這樣設置,設置完畢后就制作完畢了。
至此,一張簡單的可視化數據報表就制作好了。有時候,制作好的可視化報表需要通過網絡讓更多的人查閱,那么有什么好辦法呢?
下面小編為大家介紹如何使用借助SpreadJS實現在線化查看:
首先打開SpreadJS的學習指南:
按照學習指南上的代碼進行編程實踐:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Spread-CDN</title>
<link rel='icon' href='./assets/images/logo.png' type='image/x-icon'>
<link
href='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets/styles/gc.spread.sheets.excel2013white.css'
rel='stylesheet' type='text/css' />
<script type='text/javascript'
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets/dist/gc.spread.sheets.all.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-print/dist/gc.spread.sheets.print.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-barcode/dist/gc.spread.sheets.barcode.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-formula-panel/dist/gc.spread.sheets.formulapanel.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-excelio/dist/gc.spread.excelio.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-io/dist/gc.spread.sheets.io.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js'></script>
<script>
GC.Spread.Common.CultureManager.culture('zh-cn')
</script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
overflow: hidden;
}
#spread-container {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<input type="file" id="file"/>
<div id='app'>
<div id='spread-container'></div>
</div>
<script>
const spread = new GC.Spread.Sheets.Workbook('spread-container')
let sheet = spread.getActiveSheet()
const fileElement = document.querySelector('#file')
fileElement.addEventListener('change', function (e) {
const file = e.target.files[0]
spread.import(file, ()=>{
fileElement.style.display = 'none'
})
})
</script>
</body>
</html>
這里使用<input type="file" />來選擇本地文件,在成功導入后將該元素隱藏,以便在全屏預覽報表時沒有多余元素干擾。想導入其他模板時,只需刷新頁面,用來選擇模板文件的按鈕就又出現了。
最后導入在Excel中制作好的報表模板,一張可在線瀏覽的動態Excel報表就大功告成了。
文章只是簡單演示,沒有加復雜的樣式,如果您想做出更好的顯示效果,可以充分調用自己的藝術細胞,做出更加美觀炫酷的動態報表,甚至做一個數據大屏也是可以實現的,如果您對的SpreadJS感興趣的話,也歡迎訪問SpreadJS官網。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。