Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
日常工作中,報表打印和導(dǎo)出為PDF是經(jīng)常要處理的任務(wù)之一。除了方便我們將信息傳達給同事和客戶外,還可以讓工作看起來更加專業(yè)、漂亮和規(guī)范,從而贏得領(lǐng)導(dǎo)和客戶的信任和支持。
作為一名工作者,掌握高效的報表處理技巧對提高工作效率至關(guān)重要。其中,原生JS打印和導(dǎo)出報表為PDF技巧是一種非常實用、高效且普遍使用的方式。使用原生JS技巧,可以輕松完成報表處理的任務(wù),避免使用繁瑣的第三方庫和軟件,從而節(jié)省時間和金錢。掌握原生JS打印和導(dǎo)出報表為PDF技巧并不需要很高的前端開發(fā)技能,只需一些JS基礎(chǔ)和DOM操作基礎(chǔ)。
本文將向您介紹如何使用原生JS技巧打印和導(dǎo)出報表為PDF,并幫助解決在處理報表時可能遇到的問題和困難。
本文使用軟件Visual Studio Code(以下簡稱“VSCode”)作為編程環(huán)境,請您以管理員身份運行它。
下圖是一個簡單的數(shù)據(jù)報表,并使用餅狀圖展示,右邊兩個按鈕分別是打印報表(Print)和導(dǎo)出報表為Pdf(Export PDF)。分別點擊這兩個按鈕實現(xiàn)報表打印和導(dǎo)出為Pdf。
(Demo運行界面)
(打印報表)
2.1創(chuàng)建工程文件
第一步在文件管理器中創(chuàng)建一個空白的文件夾作為工程并用VSCode打開。
第二步新建三個空白的文件(html文件、CSS文件和JS文件),名稱可以任意取。
至此已經(jīng)完成了創(chuàng)建工程文件,下面介紹JS的編寫。
2.2編寫JS文件
第一步添加表格中的數(shù)據(jù)信息。
function addTableContent (sheet) {
sheet.addSpan(1, 0, 1, 7);
//設(shè)置列高
sheet.setRowHeight(1, 40);
sheet.getCell(1, 0).value("Costs").font("28px Times").foreColor("#11114f").hAlign(spreadNS.HorizontalAlign.headerLeft).vAlign(spreadNS.VerticalAlign.center);、
//合并單元格
sheet.addSpan(2, 0, 1, 7);
sheet.setRowHeight(2, 30);
//獲取指定表單區(qū)域中的指定單元格
sheet.getCell(2, 0).value("Family Business").font("18px Times").foreColor("#11114f").backColor("#f5f5f5").hAlign(spreadNS.HorizontalAlign.headerLeft).vAlign(spreadNS.VerticalAlign.center);
sheet.setColumnWidth(0, 105);
sheet.setRowHeight(3, 35);
sheet.getCell(3, 0).value("Costs Elements").font("Bold 15px Times").foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.headerLeft).vAlign(spreadNS.VerticalAlign.center);
sheet.setColumnWidth(1, 70);
sheet.getCell(3, 1).value("2018").font("Bold 15px Times").foreColor("#171717").backColor("#dfe9fb").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);
sheet.setColumnWidth(2, 70);}
第二步添加餅狀圖。
//添加餅狀圖的方法
function addPieContent(sheet) {
//合并單元格
sheet.addSpan(12, 0, 1, 4);
//獲取指定表單區(qū)域中的指定單元格
sheet.getCell(12, 0).value("Total Costs").font("15px Times").foreColor("#11114f").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);
sheet.addSpan(13, 0, 9, 4);
//在單元格中指定公式
sheet.setFormula(13, 0, '=PIESPARKLINE(G5:G11,"#dfe9fb","#d1dffa","#9bbaf3","#5c7ee6","#1346a4","#102565", "#ededed")');
}
第三步添加導(dǎo)出Pdf的方法。
window.onload=function () {
var spread=new spreadNS.Workbook(document.getElementById("ss"));
document.getElementById('savePDF').onclick=function () {
//下載pdf的方法
spread.savePDF(
function (blob) {
//設(shè)置下載pdf的文件名
saveAs(blob, 'download.pdf');
},
console.log,
{
title: 'Test Title',
author: 'Test Author',
subject: 'Test Subject',
keywords: 'Test Keywords',
creator: 'test Creator'
});
};
var sheet=spread.getActiveSheet();
sheet.suspendPaint();
var style=new GC.Spread.Sheets.Style();
//設(shè)置字體大小
style.font='15px Times';
sheet.setDefaultStyle(style);
//添加表格內(nèi)容
addTableContent(sheet);
//添加餅圖
addPieContent(sheet);
var printInfo=sheet.printInfo();
//showBorder是否打印控件的外邊框線
printInfo.showBorder(true);
//showGridLine是否打印網(wǎng)格線
printInfo.showGridLine(true);
//headerCenter是否打印表頭中心
printInfo.headerCenter("Family Business Costs");
printInfo.headerLeft("&G");
printInfo.footerCenter("&P/&N");
}
第四步添加打印報表的方法。
window.onload=function () {
//打印的方法
document.getElementById('btnPrint').onclick=function () {
// used to adjust print range, should set with printInfo (refer custom print for detail)
spread.sheets[0].setText(31, 8, " ");
spread.print();
};
sheet.resumePaint();
};
至此已經(jīng)完成了JS文件的引入,下面介紹CSS的編寫。
2.3編寫CSS文件
第一步添加按鈕的CSS格式。
input {
padding: 8px 14px;
display: block;
}
第二步添加選項容器和表格的CSS格式。
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
第三步添加選項行、示例教程和主體的CSS樣式。
input {
padding: 8px 14px;
display: block;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
至此已經(jīng)完成了CSS文件的引入,下面介紹Html文件的編寫。
2.4編寫Html文件
第一步引入表格、導(dǎo)出Pdf和打印報表的資源。
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 引入SpreadJS相關(guān)的CSS,默認會有一個CSSSpreadJS默認提供了7種CSS,可以選擇一個適合當(dāng)前項目的引入-->
<link rel="stylesheet" type="text/css" href="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- 核心資源,最小依賴資源,只要引入了該資源,組件運行時就能顯示出來 -->
<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<!--文件保存相關(guān)資源-->
<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/js/FileSaver.js" type="text/javascript"></script>
<!-- 打印相關(guān)資源 -->
<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script>
<!--PDF相關(guān)資源-->
<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js" type="text/javascript"></script>
<!-- 中文資源文件,組件運行時默認會用英文資源,使用中文資源需要引入并設(shè)置 -->
<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script>
</head>
第二步引入導(dǎo)出Pdf和打印報表的按鈕
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<p>Click this button to export the Spread component to a PDF file.</p>
<div class="option-row">
<!--導(dǎo)出Pdf按鈕-->
<input type="button" style="height: 70px;" value="Export PDF" id="savePDF">
<hr>
<!--打印按鈕-->
<input type="button" style="height: 70px;" value="Print" id="btnPrint">
</div>
</div>
</div>
</body>
2.5運行代碼
在運行前需要下載并安裝一個插件:Live Server。
(Live Server插件)
安裝完插件后需要重啟VSCode軟件,然后在Html文件中右鍵點擊Open With The Live Server(以瀏覽器打開)便可運行。
除了JavaScript的使用,還可以在流行的框架如Vue、React中引入打印和導(dǎo)出Pdf功能,不僅如此,還可實現(xiàn)許多花樣操作,如數(shù)據(jù)綁定和單元格透視等,讓表格更具交互性和易用性。
最近筆者終于把H5-Dooring的后臺管理系統(tǒng)初步搭建完成, 有了初步的數(shù)據(jù)采集和數(shù)據(jù)分析能力, 接下來我們就復(fù)盤一下其中涉及的幾個知識點,并一一闡述其在Dooring H5可視化編輯器中的解決方案. 筆者將分成3篇文章來復(fù)盤, 主要解決場景如下: 如何使用JavaScript實現(xiàn)前端導(dǎo)入和導(dǎo)出excel文件(H5編輯器實戰(zhàn)復(fù)盤) 前端如何基于table中的數(shù)據(jù)一鍵生成多維度數(shù)據(jù)可視化分析報表 * 如何實現(xiàn)會員管理系統(tǒng)下的權(quán)限路由和權(quán)限菜單
以上場景也是前端工程師在開發(fā)后臺管理系統(tǒng)中經(jīng)常遇到的或者即將遇到的問題, 本文是上述介紹中的第一篇文章, 你將收獲: 使用JavaScript實現(xiàn)前端導(dǎo)入excel文件并自動生成可編輯的Table組件 使用JavaScript實現(xiàn)前端基于Table數(shù)據(jù)一鍵導(dǎo)出excel文件 * XLSX和js-export-excel基本使用
本文接下來的內(nèi)容素材都是基于H5可視化編輯器(H5-Dooring)項目的截圖, 如果想實際體驗, 可以訪問H5-Dooring網(wǎng)站實際體驗. 接下來我們直接開始我們的方案實現(xiàn).
在開始實現(xiàn)之前, 我們先來看看實現(xiàn)效果.
導(dǎo)入excel文件并通過antd的table組件渲染table:
編輯table組件:
保存table數(shù)據(jù)后實時渲染可視化圖表:
以上就是我們實現(xiàn)導(dǎo)入excel文件后, 編輯table, 最后動態(tài)生成圖表的完整流程.
導(dǎo)入excel文件的功能我們可以用javascript原生的方式實現(xiàn)解析, 比如可以用fileReader這些原生api,但考慮到開發(fā)效率和后期的維護, 筆者這里采用antd的Upload組件和XLSX來實現(xiàn)上傳文件并解析的功能. 由于我們采用antd的table組件來渲染數(shù)據(jù), 所以我們需要手動將解析出來的數(shù)據(jù)轉(zhuǎn)換成table支持的數(shù)據(jù)格式.大致流程如下:
所以我們需要做的就是將Upload得到的文件數(shù)據(jù)傳給xlsx, 由xlsx生成解析對象, 最后我們利用javascript算法將xlsx的對象處理成ant-table支持的數(shù)據(jù)格式即可. 這里我們用到了FileReader對象, 目的是將文件轉(zhuǎn)化為BinaryString, 然后我們就可以用xlsx的binary模式來讀取excel數(shù)據(jù)了, 代碼如下:
// 解析并提取excel數(shù)據(jù)
let reader=new FileReader();
reader.onload=function(e) {
let data=e.target.result;
let workbook=XLSX.read(data, {type: 'binary'});
let sheetNames=workbook.SheetNames; // 工作表名稱集合
let draftObj={}
sheetNames.forEach(name=> {
// 通過工作表名稱來獲取指定工作表
let worksheet=workbook.Sheets[name];
for(let key in worksheet) {
// v是讀取單元格的原始值
if(key[0] !=='!') {
if(draftObj[key[0]]) {
draftObj[key[0]].push(worksheet[key].v)
}else {
draftObj[key[0]]=[worksheet[key].v]
}
}
}
});
// 生成ant-table支持的數(shù)據(jù)格式
let sourceData=Object.values(draftObj).map((item,i)=> ({ key: i + '', name: item[0], value: item[1]}))
經(jīng)過以上處理, 我們得到的sourceData即是ant-table可用的數(shù)據(jù)結(jié)構(gòu), 至此我們就實現(xiàn)了表格導(dǎo)入的功能.
table表格的編輯功能實現(xiàn)其實也很簡單, 我們只需要按照antd的table組件提供的自定義行和單元格的實現(xiàn)方式即可. antd官網(wǎng)上也有實現(xiàn)可編輯表格的實現(xiàn)方案, 如下:
大家感興趣的可以研究一下. 當(dāng)然自己實現(xiàn)可編輯的表格也很簡單, 而且有很多方式, 比如用column的render函數(shù)來動態(tài)切換表格的編輯狀態(tài), 或者使用彈窗編輯等都是可以的.
根據(jù)table數(shù)據(jù)動態(tài)生成圖表這塊需要有一定的約定, 我們需要符合圖表庫的數(shù)據(jù)規(guī)范, 不過我們有了table數(shù)據(jù), 處理數(shù)據(jù)規(guī)范當(dāng)然是很簡單的事情了, 筆者的可視化庫采用antv的f2實現(xiàn), 所以需要做一層適配來使得f2能消費我們的數(shù)據(jù).
還有一點就是為了能使用多張圖表, 我們需要對f2的圖表進行統(tǒng)一封裝, 使其成為符合我們應(yīng)用場景的可視化組件庫.
我們先看看f2的使用的數(shù)據(jù)格式:
const data=[
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 }
];
此數(shù)據(jù)格式會渲染成如下的圖表:
所以說我們總結(jié)下來其主要有2個緯度的指標, 包括它們的面積圖, 餅圖, 折線圖, 格式都基本一致, 所以我們可以基于這一點封裝成組件的可視化組件, 如下:
import { Chart } from '@antv/f2';
import React, { memo, useEffect, useRef } from 'react';
import ChartImg from '@/assets/chart.png';
import styles from './index.less';
import { IChartConfig } from './schema';
interface XChartProps extends IChartConfig {
isTpl: boolean;
}
const XChart=(props: XChartProps)=> {
const { isTpl, data, color, size, paddingTop, title }=props;
const chartRef=useRef(null);
useEffect(()=> {
if (!isTpl) {
const chart=new Chart({
el: chartRef.current || undefined,
pixelRatio: window.devicePixelRatio, // 指定分辨率
});
// step 2: 處理數(shù)據(jù)
const dataX=data.map(item=> ({ ...item, value: Number(item.value) }));
// Step 2: 載入數(shù)據(jù)源
chart.source(dataX);
// Step 3:創(chuàng)建圖形語法,繪制柱狀圖,由 genre 和 sold 兩個屬性決定圖形位置,genre 映射至 x 軸,sold 映射至 y 軸
chart
.interval()
.position('name*value')
.color('name');
// Step 4: 渲染圖表
chart.render();
}
}, [data, isTpl]);
return (
<div className={styles.chartWrap}>
<div className={styles.chartTitle} style={{ color, fontSize: size, paddingTop }}>
{title}
</div>
{isTpl ? <img src={ChartImg} alt="dooring chart" /> : <canvas ref={chartRef}></canvas>}
</div>
);
};
export default memo(XChart);
當(dāng)然其他的可視化組件也可以用相同的模式封裝,這里就不一一舉例了. 以上的組件封裝使用react的hooks組件, vue的也類似, 基本原理都一致.
同樣的, 我們實現(xiàn)將table數(shù)據(jù)一鍵導(dǎo)出為excel也是類似, 不過方案有所不同, 我們先來看看在Dooring中的實現(xiàn)效果.
以上就是用戶基于后臺采集到的數(shù)據(jù), 一鍵導(dǎo)出excel文件的流程, 最后一張圖是生成的excel文件在office軟件中的呈現(xiàn).
一鍵導(dǎo)出功能主要用在H5-Dooring的后臺管理頁面中, 為用戶提供方便的導(dǎo)出數(shù)據(jù)能力. 我們這里導(dǎo)出功能也依然能使用xlsx來實現(xiàn), 但是綜合對比了一下筆者發(fā)現(xiàn)有更簡單的方案, 接下來筆者會詳細介紹, 首先我們還是來看一下流程:
很明顯我們的導(dǎo)出流程比導(dǎo)入流程簡單很多, 我們只需要將table的數(shù)據(jù)格式反編譯成插件支持的數(shù)據(jù)即可. 這里筆者使用了js-export-excel來做文件導(dǎo)出, 使用它非常靈活,我們可以自定義: 自定義導(dǎo)出的excel文件名 自定義excel的過濾字段 * 自定義excel文件中每列的表頭名稱
由于js-export-excel支持的數(shù)據(jù)結(jié)構(gòu)是數(shù)組對象, 所以我們需要花點功夫把table的數(shù)據(jù)轉(zhuǎn)換成數(shù)組對象, 其中需要注意的是ant的table數(shù)據(jù)結(jié)構(gòu)中鍵對應(yīng)的值可以是數(shù)組, 但是js-export-excel鍵對應(yīng)的值是字符串, 所以我們要把數(shù)組轉(zhuǎn)換成字符串,如[a,b,c]變成'a,b,c', 所以我們需要對數(shù)據(jù)格式進行轉(zhuǎn)換, 具體實現(xiàn)如下:
const generateExcel=()=> {
let option={}; //option代表的就是excel文件
let dataTable=[]; //excel文件中的數(shù)據(jù)內(nèi)容
let len=list.length;
if (len) {
for(let i=0; i<len; i++) {
let row=list[i];
let obj:any={};
for(let key in row) {
if(typeof row[key]==='object') {
let arr=row[key];
obj[key]=arr.map((item:any)=> (typeof item==='object' ? item.label : item)).join(',')
}else {
obj[key]=row[key]
}
}
dataTable.push(obj); //設(shè)置excel中每列所獲取的數(shù)據(jù)源
}
}
let tableKeys=Object.keys(dataTable[0]);
option.fileName=tableName; //excel文件名稱
option.datas=[
{
sheetData: dataTable, //excel文件中的數(shù)據(jù)源
sheetName: tableName, //excel文件中sheet頁名稱
sheetFilter: tableKeys, //excel文件中需顯示的列數(shù)據(jù)
sheetHeader: tableKeys, //excel文件中每列的表頭名稱
}
]
let toExcel=new ExportJsonExcel(option); //生成excel文件
toExcel.saveExcel(); //下載excel文件
}
注意, 以上筆者實現(xiàn)的方案對任何table組件都使用, 可直接使用以上代碼在大多數(shù)場景下使用. 至此, 我們就實現(xiàn)了使用JavaScript實現(xiàn)前端導(dǎo)入和導(dǎo)出excel文件的功能.
所以, 今天你又博學(xué)了嗎?
以上教程筆者已經(jīng)集成到H5-Dooring中,對于一些更復(fù)雜的交互功能,通過合理的設(shè)計也是可以實現(xiàn)的,大家可以自行探索研究。
地址:H5-Dooring | 一款強大的H5編輯器
如果想學(xué)習(xí)更多H5游戲, webpack,node,gulp,css3,javascript,nodeJS,canvas數(shù)據(jù)可視化等前端知識和實戰(zhàn),歡迎在《趣談前端》一起學(xué)習(xí)討論,共同探索前端的邊界。
avaScript在前端領(lǐng)域占據(jù)著絕對的統(tǒng)治地位,目前更是從瀏覽器到服務(wù)端,移動端,嵌入式,幾乎所有的所有的應(yīng)用領(lǐng)域都可以使用它。技術(shù)圈有一句很經(jīng)典的話“凡是能用JavaScript實現(xiàn)的東西,最后都會用JavaScript實現(xiàn)”。
Excel 電子表格自 1980 年代以來一直為各行業(yè)所廣泛使用,至今已擁有超過3億用戶,大多數(shù)人都熟悉 Excel 電子表格體驗。許多企業(yè)在其業(yè)務(wù)的各個環(huán)節(jié)中使用了 Excel 電子表格進行數(shù)據(jù)管理。
作為全球領(lǐng)先的軟件開發(fā)技術(shù)和低代碼平臺提供商,葡萄城專注開發(fā)技術(shù)和工具已經(jīng)長達四十余年,一直以來引領(lǐng)著國內(nèi)控件技術(shù)和數(shù)據(jù)分析工具的發(fā)展。SpreadJS表格控件作為葡萄城的核心產(chǎn)品,能夠完美兼容 Excel 的功能和使用體驗并高度匹配在線辦公場景的需求。
SpreadJS可以為我們的Web應(yīng)用提供更好的交互體驗,以及更靈活的權(quán)限控制、數(shù)據(jù)整合、數(shù)據(jù)可視化、戰(zhàn)略績效測量 (SPM)、復(fù)雜的統(tǒng)計分析等。多年來,Excel 兼容性一直是SpreadJS最重要的功能之一。
SpreadJS 提供了熟悉的 Excel 電子表格界面。用戶可以通過SpreadJS直接在頁面端導(dǎo)入和導(dǎo)出 Excel 文件——這一切無需依賴 Excel。
在本博客中,我們將介紹如何按照以下步驟在 JavaScript 中,實現(xiàn)頁面端電子表格導(dǎo)入/導(dǎo)出到 Excel:
1. 設(shè)置 JavaScript 電子表格項目
2. 添加 Excel 導(dǎo)入代碼
3. 將數(shù)據(jù)添加到導(dǎo)入的 Excel 文件
4. 添加迷你圖
5. 添加 Excel 導(dǎo)出代碼
首先,我們可以使用托管在 NPM 上的 SpreadJS 文件。為此,我們可以使用命令行參數(shù)進行安裝。打開命令提示符并導(dǎo)航到應(yīng)用程序的位置。在那里,您可以使用一個命令安裝所需的文件。
在這種情況下,我們需要基本的 Spread-Sheets 庫、Spread-ExcelIO 和 jQuery:
npm i @grapecity/spread-sheets @grapecity/spread-excelio jquery
SpreadJS 不依賴于 jQuery,但在這種情況下,我們使用它來提供簡單的跨域請求支持,稍后我們將對其進行回顧。
一旦安裝了這些,我們就可以在我們的代碼中添加對這些腳本和 CSS 文件的引用:
<!DOCTYPE html>
<html>
<head>
<title>SpreadJS ExcelIO</title>
<script src="./node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<link href="./node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js"></script>
<script type="text/javascript" src="./node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js"></script>
</head>
<body>
<div id="ss" style="height:600px; width :100%; "></div>
</body>
</html>
除了 SpreadJS 和 jQuery 文件之外,我們還需要導(dǎo)入 FileSaver 庫,為了便于后續(xù)程序處理,SpreadJS默認提供完整的文件流,F(xiàn)ileSaver庫可以用來把文件流轉(zhuǎn)成文件下載到本地。
然后我們可以在頁面中添加一個腳本來初始化 Spread.Sheets 組件和一個 div 元素來包含它(因為 SpreadJS 電子表格組件使用了一個畫布,這是初始化組件所必需的):
<script type="text/javascript">
$(document).ready(function () {
var workbook=new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
});
</script>
</head>
<body>
<div id="ss" style="height:600px ; width :100%; "></div>
</body>
我們需要創(chuàng)建一個客戶端 ExcelIO 組件的實例,我們可以使用它來打開文件:
var excelIO=new GC.Spread.Excel.IO();
然后我們需要添加一個函數(shù)來導(dǎo)入文件。在此示例中,我們導(dǎo)入了一個本地文件,但您可以對服務(wù)器上的文件執(zhí)行相同的操作。如果從服務(wù)器導(dǎo)入文件,您需要引用該位置。下面是一個輸入元素的示例,用戶可以在其中輸入文件的位置:
<input type="text" id="importUrl" value="http://www.testwebsite.com/files/TestExcel.xlsx" style="width:300px" />
一旦你有了它,你可以直接在腳本代碼中訪問該值:
var excelUrl=$("#importUrl").val();
導(dǎo)入函數(shù)的以下代碼使用“excelUrl”變量的本地文件:
function ImportFile() {
var excelUrl="./test.xlsx";
var oReq=new XMLHttpRequest();
oReq.open('get', excelUrl, true);
oReq.responseType='blob';
oReq.onload=function () {
var blob=oReq.response;
excelIO.open(blob, LoadSpread, function (message) {
console.log(message);
});
};
oReq.send(null);
}
function LoadSpread(json) {
jsonData=json;
workbook.fromJSON(json);
workbook.setActiveSheet("Revenues (Sales)");
}
無論您是在服務(wù)器上還是在本地引用文件,都需要在 $(document).ready 函數(shù)內(nèi)的腳本中添加以下內(nèi)容:
$(document).ready(function () {
$.support.cors=true;
workbook=new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
//...
});
在這種情況下,我們需要啟用 Cross-Origin-Request-Support,因為我們可能會從 URL 加載文件。因此 $.support.cors=true;行,否則嘗試加載它會導(dǎo)致 CORS 錯誤。
我們使用本教程的“損益表”Excel 模板導(dǎo)入本地文件。
現(xiàn)在我們可以使用 Spread.Sheets 腳本在這個文件中添加另一個收入行。讓我們在頁面上添加一個按鈕來執(zhí)行此操作:
<button id="addRevenue">Add Revenue</button>
我們可以為該按鈕的單擊事件處理程序編寫一個函數(shù)來添加一行并從前一行復(fù)制樣式以準備添加一些數(shù)據(jù)。要復(fù)制樣式,我們需要使用 copyTo 函數(shù)并傳入:
1. 原始和目標行和列索引
2. 行數(shù)和列數(shù)
3. 樣式的 CopyToOptions 值
document.getElementById("addRevenue").onclick=function () {
var sheet=workbook.getActiveSheet();
sheet.addRows(newRowIndex, 1);
sheet.copyTo(10, 1, newRowIndex, 1, 1, 29, GC.Spread.Sheets.CopyToOptions.style);
}
以下用于添加數(shù)據(jù)和 Sparkline 的腳本代碼將包含在此按鈕單擊事件處理程序中。對于大部分數(shù)據(jù),我們可以使用 setValue 函數(shù)。這允許我們通過傳入行索引、列索引和值來在 Spread 中的工作表中設(shè)置值:
sheet.setValue(newRowIndex, 1, "Revenue 8");
for (var c=3; c < 15; c++) {
sheet.setValue(newRowIndex, c, Math.floor(Math.random() * 200) + 10);
}
在 P 列中設(shè)置 SUM 公式以匹配其他行并為 Q 列設(shè)置百分比:
sheet.setFormula(newRowIndex, 15, "=SUM([@[Jan]:[Dec]])")
sheet.setValue(newRowIndex, 16, 0.15);
最后,我們可以再次使用 copyTo 函數(shù)將先前行中的公式復(fù)制到 R 到 AD 列的新行,這次使用 CopyToOptions.formula:
sheet.copyTo(10, 17, newRowIndex, 17, 1, 13, GC.Spread.Sheets.CopyToOptions.formula);
現(xiàn)在,我們可以添加迷你圖來匹配其他數(shù)據(jù)行。為此,我們需要提供一系列單元格以從中獲取數(shù)據(jù)以及迷你圖的一些設(shè)置。在這種情況下,我們可以指定:
1. 單元格的范圍,我們只是將數(shù)據(jù)添加到
2. 使迷你圖看起來像同一列中的其他迷你圖的設(shè)置
var data=new GC.Spread.Sheets.Range(11, 3, 1, 12);
var setting=new GC.Spread.Sheets.Sparklines.SparklineSetting();
setting.options.seriesColor="Text 2";
setting.options.lineWeight=1;
setting.options.showLow=true;
setting.options.showHigh=true;
setting.options.lowMarkerColor="Text 2";
setting.options.highMarkerColor="Text 1";
之后,我們調(diào)用 setSparkline 方法并指定:
1. 迷你圖的位置
2. 數(shù)據(jù)的位置
3. 迷你圖的方向
4. 迷你圖的類型
5. 我們創(chuàng)建的設(shè)置
sheet.setSparkline(11, 2, data, GC.Spread.Sheets.Sparklines.DataOrientation.horizontal, GC.Spread.Sheets.Sparklines.SparklineType.line, setting);
如果您現(xiàn)在嘗試運行代碼,它可能看起來有點慢,因為每次更改數(shù)據(jù)和添加樣式時工作簿都會重新繪制。為了顯著加快速度并提高性能,Spread.Sheets 提供了暫停繪畫和計算服務(wù)的能力。讓我們在添加一行及其數(shù)據(jù)之前添加代碼以暫停兩者,然后在之后恢復(fù)兩者:
workbook.suspendPaint();
workbook.suspendCalcService();
//...
workbook.resumeCalcService();
workbook.resumePaint();
添加該代碼后,我們可以在 Web 瀏覽器中打開該頁面,并查看 Excel 文件加載到 Spread.Sheets 中并添加了收入行。重要提示:請記住,出于安全考慮,Chrome 不允許您打開本地文件,因此您需要使用 Firefox 等網(wǎng)絡(luò)瀏覽器才能成功運行此代碼。或者,從網(wǎng)站 URL 加載文件應(yīng)該可以在任何瀏覽器中正常打開。
最后,我們可以添加一個按鈕來導(dǎo)出包含添加行的文件。為此,我們可以使用 Spread.Sheets 中內(nèi)置的客戶端 ExcelIO 代碼:
function ExportFile() {
var fileName=$("#exportFileName").val();
if (fileName.substr(-5, 5) !=='.xlsx') {
fileName +='.xlsx';
}
var json=JSON.stringify(workbook.toJSON());
excelIO.save(json, function (blob) {
saveAs(blob, fileName);
}, function (e) {
if (e.errorCode===1) {
alert(e.errorMessage);
}
});
}
該代碼從 exportFileName 輸入元素獲取導(dǎo)出文件名。我們可以定義它并讓用戶像這樣命名文件:
<input type="text" id="exportFileName" placeholder="Export file name" value="export.xlsx" />
然后我們可以添加一個按鈕來調(diào)用這個函數(shù):
<button id="export">Export File</button>
document.getElementById("export").onclick=function () {
ExportFile();
}
添加收入行后,您可以使用“導(dǎo)出文件”按鈕導(dǎo)出文件。確保添加 FileSaver 外部庫以允許用戶將文件保存在他們想要的位置:
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
成功導(dǎo)出文件后,您可以在 Excel 中打開它,并查看文件與導(dǎo)入時的外觀相同,只是現(xiàn)在我們添加了額外的收入行。
這只是一個示例,說明如何使用 SpreadJS JavaScript 電子表格將數(shù)據(jù)添加到 Excel 文件,然后使用簡單的 JavaScript 代碼將它們導(dǎo)出回 Excel。
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。