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
avaScript在前端領域占據著絕對的統治地位,目前更是從瀏覽器到服務端,移動端,嵌入式,幾乎所有的所有的應用領域都可以使用它。技術圈有一句很經典的話“凡是能用JavaScript實現的東西,最后都會用JavaScript實現”。
Excel 電子表格自 1980 年代以來一直為各行業所廣泛使用,至今已擁有超過3億用戶,大多數人都熟悉 Excel 電子表格體驗。許多企業在其業務的各個環節中使用了 Excel 電子表格進行數據管理。
作為全球領先的軟件開發技術和低代碼平臺提供商,葡萄城專注開發技術和工具已經長達四十余年,一直以來引領著國內控件技術和數據分析工具的發展。SpreadJS表格控件作為葡萄城的核心產品,能夠完美兼容 Excel 的功能和使用體驗并高度匹配在線辦公場景的需求。
SpreadJS可以為我們的Web應用提供更好的交互體驗,以及更靈活的權限控制、數據整合、數據可視化、戰略績效測量 (SPM)、復雜的統計分析等。多年來,Excel 兼容性一直是SpreadJS最重要的功能之一。
SpreadJS 提供了熟悉的 Excel 電子表格界面。用戶可以通過SpreadJS直接在頁面端導入和導出 Excel 文件——這一切無需依賴 Excel。
在本博客中,我們將介紹如何按照以下步驟在 JavaScript 中,實現頁面端電子表格導入/導出到 Excel:
1. 設置 JavaScript 電子表格項目
2. 添加 Excel 導入代碼
3. 將數據添加到導入的 Excel 文件
4. 添加迷你圖
5. 添加 Excel 導出代碼
首先,我們可以使用托管在 NPM 上的 SpreadJS 文件。為此,我們可以使用命令行參數進行安裝。打開命令提示符并導航到應用程序的位置。在那里,您可以使用一個命令安裝所需的文件。
在這種情況下,我們需要基本的 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 文件之外,我們還需要導入 FileSaver 庫,為了便于后續程序處理,SpreadJS默認提供完整的文件流,FileSaver庫可以用來把文件流轉成文件下載到本地。
然后我們可以在頁面中添加一個腳本來初始化 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>
我們需要創建一個客戶端 ExcelIO 組件的實例,我們可以使用它來打開文件:
var excelIO = new GC.Spread.Excel.IO();
然后我們需要添加一個函數來導入文件。在此示例中,我們導入了一個本地文件,但您可以對服務器上的文件執行相同的操作。如果從服務器導入文件,您需要引用該位置。下面是一個輸入元素的示例,用戶可以在其中輸入文件的位置:
<input type="text" id="importUrl" value="http://www.testwebsite.com/files/TestExcel.xlsx" style="width:300px" />
一旦你有了它,你可以直接在腳本代碼中訪問該值:
var excelUrl = $("#importUrl").val();
導入函數的以下代碼使用“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)");
}
無論您是在服務器上還是在本地引用文件,都需要在 $(document).ready 函數內的腳本中添加以下內容:
$(document).ready(function () {
$.support.cors = true;
workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
//...
});
在這種情況下,我們需要啟用 Cross-Origin-Request-Support,因為我們可能會從 URL 加載文件。因此 $.support.cors = true;行,否則嘗試加載它會導致 CORS 錯誤。
我們使用本教程的“損益表”Excel 模板導入本地文件。
現在我們可以使用 Spread.Sheets 腳本在這個文件中添加另一個收入行。讓我們在頁面上添加一個按鈕來執行此操作:
<button id="addRevenue">Add Revenue</button>
我們可以為該按鈕的單擊事件處理程序編寫一個函數來添加一行并從前一行復制樣式以準備添加一些數據。要復制樣式,我們需要使用 copyTo 函數并傳入:
1. 原始和目標行和列索引
2. 行數和列數
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);
}
以下用于添加數據和 Sparkline 的腳本代碼將包含在此按鈕單擊事件處理程序中。對于大部分數據,我們可以使用 setValue 函數。這允許我們通過傳入行索引、列索引和值來在 Spread 中的工作表中設置值:
sheet.setValue(newRowIndex, 1, "Revenue 8");
for (var c = 3; c < 15; c++) {
sheet.setValue(newRowIndex, c, Math.floor(Math.random() * 200) + 10);
}
在 P 列中設置 SUM 公式以匹配其他行并為 Q 列設置百分比:
sheet.setFormula(newRowIndex, 15, "=SUM([@[Jan]:[Dec]])")
sheet.setValue(newRowIndex, 16, 0.15);
最后,我們可以再次使用 copyTo 函數將先前行中的公式復制到 R 到 AD 列的新行,這次使用 CopyToOptions.formula:
sheet.copyTo(10, 17, newRowIndex, 17, 1, 13, GC.Spread.Sheets.CopyToOptions.formula);
現在,我們可以添加迷你圖來匹配其他數據行。為此,我們需要提供一系列單元格以從中獲取數據以及迷你圖的一些設置。在這種情況下,我們可以指定:
1. 單元格的范圍,我們只是將數據添加到
2. 使迷你圖看起來像同一列中的其他迷你圖的設置
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";
之后,我們調用 setSparkline 方法并指定:
1. 迷你圖的位置
2. 數據的位置
3. 迷你圖的方向
4. 迷你圖的類型
5. 我們創建的設置
sheet.setSparkline(11, 2, data, GC.Spread.Sheets.Sparklines.DataOrientation.horizontal, GC.Spread.Sheets.Sparklines.SparklineType.line, setting);
如果您現在嘗試運行代碼,它可能看起來有點慢,因為每次更改數據和添加樣式時工作簿都會重新繪制。為了顯著加快速度并提高性能,Spread.Sheets 提供了暫停繪畫和計算服務的能力。讓我們在添加一行及其數據之前添加代碼以暫停兩者,然后在之后恢復兩者:
workbook.suspendPaint();
workbook.suspendCalcService();
//...
workbook.resumeCalcService();
workbook.resumePaint();
添加該代碼后,我們可以在 Web 瀏覽器中打開該頁面,并查看 Excel 文件加載到 Spread.Sheets 中并添加了收入行。重要提示:請記住,出于安全考慮,Chrome 不允許您打開本地文件,因此您需要使用 Firefox 等網絡瀏覽器才能成功運行此代碼?;蛘?,從網站 URL 加載文件應該可以在任何瀏覽器中正常打開。
最后,我們可以添加一個按鈕來導出包含添加行的文件。為此,我們可以使用 Spread.Sheets 中內置的客戶端 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 輸入元素獲取導出文件名。我們可以定義它并讓用戶像這樣命名文件:
<input type="text" id="exportFileName" placeholder="Export file name" value="export.xlsx" />
然后我們可以添加一個按鈕來調用這個函數:
<button id="export">Export File</button>
document.getElementById("export").onclick = function () {
ExportFile();
}
添加收入行后,您可以使用“導出文件”按鈕導出文件。確保添加 FileSaver 外部庫以允許用戶將文件保存在他們想要的位置:
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
成功導出文件后,您可以在 Excel 中打開它,并查看文件與導入時的外觀相同,只是現在我們添加了額外的收入行。
這只是一個示例,說明如何使用 SpreadJS JavaScript 電子表格將數據添加到 Excel 文件,然后使用簡單的 JavaScript 代碼將它們導出回 Excel。
PDF 轉Word 是一個非常非常普遍的需求,可謂人人忌危,為什么如此普遍的需求,卻如此難行呢,還得看為什么會有這樣的一個需求。
PDF文檔遵循iOS32000的規范是由Adobe 公司推出的文檔格式,之所以應用如此廣泛,是因為PDF精確定位了每個字符的坐標、根據坐標繪制的各種形狀,使用PDF格式傳輸和打印文檔可以保證格式的一致性,然后很多PDF文件是可用于閱讀,展示,打印,但編輯起來是非常困難,如格式調整,文字修改,樣式調整等,那么就衍生了PDF 轉Word這一歷史性的需求,但因為兩者之間采用的編碼規范以及布局機制的完全不一致,導致轉換起來會非常復雜,一般的工具不是格式錯亂,就是內容錯亂,很難達到客戶的原生期望。
其難點在于建立從PDF基于元素位置的格式到Word基于內容的格式的映射。PDF文檔實際并不存在段落、表格的概念,PDF轉Word要做的就是將PDF文檔中“橫、豎線條圍繞著文本”解析為Word的“表格”,將“文本及下方的一條橫線”解析為“文本下劃線”,等等。
兩個工具兩套規則,自古以來兩個工具之間的兼容轉換,除非是為一家所有,會有通用的標準和接口預留,達到很好的兼容性,但 Adobe和微軟都是巨大的科技企業,且兩款軟件功能都是非常強大且覆蓋面全,要做到完美的匹配所有規則更是非常苦難。
對于報表用戶來說,很多用戶會將報表理解為報告,報告自然會聯想到Word,那么就很希望在頁面中展示的內容能夠成 Word 文件來進行存檔,編輯等作用。
ActiveReportsJS 是一款前端的報表開發工具,不與后端關聯,因此想要將展示的HTML 生成Word,研發團隊經過一些調研發現整個過程會非常復雜非常困難,正如他們反饋:“不是一個sprint能解決的問題”,就PDF.js 背后都有強大的Mozilla支撐,更何況Word文檔是依托微軟的Office開發組件去生成的。
但在實際接觸客戶的時候,許多用戶都會來詢問相關內容包括如何用報表設計類似審批表、人事履歷表、檢測報告等很常見的Word報告。用戶對結果都比較滿意,但唯一用戶不滿的是報表結果只能生成pdf。這是傳統,這也是核心需求,也是痛點。
本葡萄就有些很著急,于是不信這個邪,在前端工具如此豐富的情況下,竟沒有一個這樣可用的工具?
開始搜索,打開google,榨干全部腦汁的詞匯量輸入了我需要的關鍵詞,搜索到了以下結果。
乍一看,第一條完全吻合,Node.js 雖說是服務端也不是不可以接受,只要有方案即可。
看著非常有戲。
代碼簡單:
但仔細看看代碼,果然老天在為我們送東西的時候都在背后的標好了價格:
心想如果可以,付費就付費吧,畢竟我們也是做付費商業軟件的專業er,版權意識還是需要有的。
點擊登錄,用谷歌賬號登陸成功后,即可在項目中引用cloudmersive-convert-api-client 安裝包。
該JS 庫提供了將近幾十種的API及Class用于處理轉換不同的格式文件:除了將PDF轉Word外,還有其他發的文件格式轉換,使用起來也是非常簡單,
可以識別本地的PDF 文件,轉換結果:
因為整個轉換API 只是CloudMersive 的一個API功能,整個產品還附加其他的安全檢驗等功能,因此產品是按月及并發數收費的。大家可自行搜索了解,不過他們網站倒是提供好了幾個文件轉換的工具非常好用,無需登錄直接獲取轉換結果
通過搜索發現PDF對象流直接用JS 轉換為Word 文件是非常困難的, 而且經過驗證ARJS 導出PDF 文件可以用Word軟件打開,那么突然想到是否可以找一個中間件,將PDF流直接轉換為doc或docx格式,但搜索一番,嘗試之后,只是在.pdf前面加了document.docx.pdf
該方法嘗試失敗。
跟技術大咖聊了之后,才發現pdf和word雖然本質都是二進制流,但內部的聲明等都是各自文件特有的屬性,因此不能直接轉換,簡而言之就是是什么文件流就只能保存什么文件流。且PDF 和 Word是兩大技術公司背書,直接轉換得用專業的工具,因此此路不通。
于是乎,退而求其次,HTML 是萬能的,HTML 可以轉萬物, HTML 轉PDF, HTML 轉圖片,HTML 轉Excel等等等,那么 ActiveReportsJS 提供了可將報表導出為HTML 文件且格式完全一致,那么方法來了,我直接使用HTML 轉 Word不是更方便些?Google搜索果然此類資料比PDF 轉Word多了百倍,而且看代碼也是操作非常簡單:
只需3步驟:
1、將報表導出HTML
var pageReport = new ARJS.PageReport();
pageReport.load('./BandedReport.rdlx-json')
.then(function() { return pageReport.run() })
.then(function(pageDocument) { return HTMLExport.exportDocument(pageDocument) })
2、加工HTML 代碼增加office 標記
var header = "<html xmlns:o='urn:schemas-microsoft-com:office:office' "+
"xmlns:w='urn:schemas-microsoft-com:office:word' "+
"xmlns='http://www.w3.org/TR/REC-html40'>"
let reg=/<html>/;
console.log(reg.test(htmlcode));
var test= htmlcode.replace(reg,header);
var sourceHTML='data:application/vnd.ms-word;charset=utf-8,'+encodeURIComponent(test);
3、 創建 a 標簽,直接下載 doc格式
var fileDownload = document.createElement("a");
document.body.appendChild(fileDownload);
fileDownload.href = sourceHTML;
fileDownload.download = 'document.doc';
fileDownload.click();
document.body.removeChild(fileDownload);
看看結果:效果很Nice
兩種轉化結果總結如下:
通過一番嘗試也算是有一個Workaround,考慮到報告類的報表一般以文本內容為主,樣式也比較樸素,所以使用html到Word轉換不失為一個快速簡潔的方法,大部分需要保存為Word 還是為了進行二次編輯。本葡萄也在努力尋找HTML 轉Word 樣式保留的方法,有新的進展會給大家更新第二篇。
轉載請注明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。微信公眾號:“葡萄城社區”。
> 簡單、好用且輕量級的海量excel,csv文件導入導出解決方案。解決火狐瀏覽器中文編碼問題。
> 注:excel的合并功能及復雜功能,使用代碼實現比較復雜,框架只提供單行的導入導出。
引入Maven依賴或下載jar包
<dependency> <groupId>com.github.fartherp</groupId> <artifactId>framework-poi</artifactId> <version>3.0.4</version> </dependency>
CSV常用例子:
CSVRead.read(CSVReadTest.class.getResourceAsStream("/a.csv"), new CSVReadDeal<CsvReadDto>() { // 單條數據處理(每一行對應一個javabean) public CsvReadDto dealBean(String[] arr) { CsvReadDto dto = new CsvReadDto(); dto.setId(Long.valueOf(arr[0])); dto.setName(arr[1]); dto.setAge(Integer.valueOf(arr[2])); return dto; } // 批量數據處理(可以批量入庫) public void dealBatchBean(List<CsvReadDto> list) { Assert.assertEquals("name1";, list.get(0).getName()); Assert.assertEquals("name2", list.get(1).getName()); Assert.assertEquals("name3", list.get(2).getName()); } // 批量加載多少數據,統一處理(默認1000) public int getBatchCount() { return super.getBatchCount(); } // 從第幾行開始加載(默認跳過第一行) public int skipLine() { return super.skipLine(); } });
2.CSV文件導出:
String filename = "TEST"; String[] title = SheetsTitlesEnum.USER_LOGIN_LOG.getTitle(); List<String[]> bodyList = new ArrayList<>(); CsvUtil.writeCsvFile(filename, title, bodyList);
3.瀏覽器下載CSV文件:
HttpServletResponse response = null; HttpServletRequest request = null; String filename = "TEST"; String[] title = SheetsTitlesEnum.USER_LOGIN_LOG.getTitle(); List<String[]> bodyList = new ArrayList<>(); CsvUtil.writeCsvFile(response, request, filename, title, bodyList);
Excel常用例子:
1.Excel文件導入:
ExcelRead.read(ExcelReadTest.class.getResourceAsStream("/a.xls"), new ExcelReadDeal<ExcelReadDto>() { // 單條數據處理(每一行對應一個javabean) public ExcelReadDto dealBean(Row row) { ExcelReadDto dto = new ExcelReadDto(); dto.setId(new BigDecimal(row.getCell(0).toString()).longValue()); dto.setName(row.getCell(1).toString()); dto.setAge(Integer.valueOf(row.getCell(2).toString())); return dto; } // 批量數據處理(可以批量入庫) public void dealBatchBean(List<ExcelReadDto> list) { Assert.assertEquals("name1", list.get(0).getName()); Assert.assertEquals("name2", list.get(1).getName()); Assert.assertEquals("name3", list.get(2).getName()); } // 批量加載多少數據,統一處理(默認1000) public int getBatchCount() { return super.getBatchCount(); } // 從第幾行開始加載(默認跳過第一行) public int skipLine() { return super.skipLine(); } });
2.Excel文件導出:
String[] title = new String [6]; title[0] = "登錄時間"; title[1] = "用戶名"; title[2] = "訪問端"; title[3] = "版本系統"; title[4] = "登錄IP"; title[5] = "狀態"; String fileName = "D:\\style1.xls"; FileExcelWrite.<ExcelDto>build(title, fileName) .setLargeDataMode(false) .deal(obj -> { String[] result = new String[6]; result[0] = obj.getTime(); result[1] = obj.getName(); result[2] = obj.getClient(); result[3] = obj.getVersion(); result[4] = obj.getIp(); result[5] = obj.getStatus() + ""; return result; }) .list(ExcelWriteStyleTest.getList())// 默認情況下導出數據達到excel最大行,自動切換sheet,(xlsx=1048576,xls=65536) .list(ExcelWriteStyleTest.getList1()) .write();
3.Excel文件導出(風格,可以自定義風格):
Map<String, Object> map = new HashMap<>(); map.put("quoteCurrency", "ETH"); map.put("symbol", "USDT_ETH"); map.put("startTime", "2019-01-09 00:00:00"); map.put("endTime", "2019-01-09 12:00:00"); String fileName = "D:\\styleInputStream.xls"; FileExcelWrite.<ExcelDto>build(this.getClass().getResourceAsStream("/c.xls"), fileName) .additional(map) .deal(new WriteDeal<ExcelDto>() { public String[] dealBean(ExcelDto obj) { String[] result = new String[3]; result[0] = obj.getId() + ""; result[1] = obj.getName(); result[2] = obj.getAge() + ""; return result; } public int skipLine() { return 4; } }) .list(getList()) .write();
4.瀏覽器下載Excel文件:
String[] title = new String [6]; title[0] = "登錄時間"; title[1] = "用戶名"; title[2] = "訪問端"; title[3] = "版本系統"; title[4] = "登錄IP"; title[5] = "狀態"; String fileName = "D:\\style1.xls"; HttpServletResponseExcelWrite.<ExcelDto>build(title, fileName, request, response) .setLargeDataMode(false) .deal(obj -> { String[] result = new String[6]; result[0] = obj.getTime(); result[1] = obj.getName(); result[2] = obj.getClient(); result[3] = obj.getVersion(); result[4] = obj.getIp(); result[5] = obj.getStatus() + ""; return result; }) .list(ExcelWriteStyleTest.getList())// 默認情況下導出數據達到excel最大行,自動切換sheet,(xlsx=1048576,xls=65536) .list(ExcelWriteStyleTest.getList1()) .write();
公告模塊框架 framework-common
包括各種util,例如:日期DateUtil,BigDecimalUtil等等
壓縮框架 framework-compress
提供各種壓縮方式 1.bzip2 2.gzip 3.jar 4.tar 5.zip 6.zlib 7.shell命令(gzip,targz)
核心框架 framework-core
1.整合easyui分頁功能 2.驗證碼 3.整合easyui樹結構 4.統一前端請求后的返回參數 5.發送郵件,包括html郵件
db操作框架 framework-database
封裝操作數據庫的基本操作(增刪改查)
異常體系框架 framework-exception
1.mysql數據庫返回的錯誤信息,轉成可識別信息 2.oracle數據庫返回的錯誤信息,轉成可識別信息 3.通用的異常返回的錯誤信息,轉成可識別信息
文件處理框架 framework-file
1.ftp 2.nfs
net框架 framework-net
1.ftp 2.sftp
poi框架 framework-poi
1.csv讀取及下載 2.excel讀取
加密解密框架 framework-security
1.不可逆:base64,MD5 2.對稱密鑰:AES,DES,3DES 3.非對稱密鑰:RSA
framework-filter
1、支持切面過濾 2、和spring環境集成 配置方式是: web.xml <filter> <filter-name>frameworkFilter</filter-name> <filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class> <init-param> <param-name>targetFilterLifecycle</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>frameworkFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> spring 配置文件 <bean id="frameworkFilter" class="cn.vanskey.filter.web.FrameworkFilterFactoryBean"> <property name="filters"> //過濾器配置 <util:map> <entry key="myfilter"> <bean class="com.zrj.pay.cashier.action.demo.MyFilter"/> </entry> </util:map> </property> <property name="filterChainDefinitions"> <value> /** = myfilter //過濾器和路徑的對應關系 </value> </property> </bean>
*請認真填寫需求信息,我們會在24小時內與您取得聯系。