轉載自個人我的主頁html
在開發ExcelWeb插件的時候,一大亮點就是能夠在web項目中操做Excel,讀取Excel的內容,也能夠將服務端的數據寫入的 Excel中,大大方便的用戶使用Excel,提升工做效率vue
Ranges表示Excel的區域,例如一個單元格的區域是=A1,多個單元格的區域,B1:B4表示連續的4個單元格,對Excel 內容的讀寫,便是對Ranges的讀寫。git
numberFormat,二維數組,區域的格式,有文本、日期、數值等,和Excel右擊設置單元格的格式裏全部的格式一致github
格式 | 值 |
---|---|
General | General |
Number | 0 |
Currency | $#,##0.00;[Red]$#,##0.00 |
Accounting | ($* #,##0.00);($* (#,##0.00);($* "-"??);(@_) |
Date | m/d/yy |
Time | [$-F400]h:mm:ss am/pm |
Percentage | 0.00% |
Fraction | # ?/? |
Scientific | 0.00E+00 |
Text | @ |
Special | ;; |
Custom | #,##0_);Red |
來源 | Stack Overflow上的回答 |
準備工做:web
npm install excel-addin --save
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
const Office = window.Office Office.initialize = () => { //初始化內容 }
//其中context表示Excel的上下文,操做Excel的東西均經過該參數 Excel.run(function(context) { //此處寫操做Excel的方法 //處理完以後要提交,Excel纔會識別,另外全部的//讀寫數據的操做均在, //context.sync().then(=>{ //此處讀寫數據 }) return context.sync() }
write: function() { Excel.run(function(context) { //獲取指定名字的工做薄sheet // var sheet = context.workbook.worksheets.getItem('sheetName') //獲取當前活動工做薄 var sheet = context.workbook.worksheets.getActiveWorksheet() var data = [ ['Product', 'Qty', 'Unit Price', 'Total Price'], ['Almonds', '2', '7.5', '15'], ['Coffee', '1', '34.5', '34.5'], ['Chocolate', '5', '9.56', '47.8'], ['', '', '', '97.3'] ] //此二維數組的長度要和數據的保持一致,不然無效 var formats = [ ['@', '@', '@', '@'], //設置格式爲文本 ['0.00', '0.00', '0.00', '0.00'], ['0.00', '0.00', '0.00', '0.00'], ['0.00', '0.00', '0.00', '0.00'], ['0.00', '0.00', '0.00', '0.00'] ] var range = sheet.getRange('A1:D5') //選中該區域 range.select() // 設置背景色和字體 range.format.fill.color = '#4472C4' range.format.font.color = 'white' //設置區域的格式 range.numberFormat = formats //表示加載values屬性,若是不加載在下面是不可使用的 range.load('values') return context.sync().then(function() { //寫入方法必須在該方法內執行纔有效 range.values = data }) }).catch(_this.errorHandler) },
read: function() { let _this = this Excel.run(function(context) { //獲取指定名字的工做薄sheet // var sheet = context.workbook.worksheets.getItem('sheetName') // 獲取當前選中的單元格 var range = context.workbook.getSelectedRange() //獲取當前選中的單元格 //表示加載如下屬性,若是不加載在下面是不可使用的 range.load('values') range.load('address') range.load('formulas') range.load('text') return context.sync().then(function() { //寫入方法必須在該方法內執行纔有效 _this.content = { values: range.values, formulas: range.formulas, address: range.address, texts: range.text } console.log(_this.content) }) }).catch(_this.errorHandler) }
deleteOne: function() { let _this = this Excel.run(function(context) { //獲取指定名字的工做薄sheet // var sheet = context.workbook.worksheets.getItem('sheetName') // 獲取當前選中的單元格 var sheet = context.workbook.worksheets.getActiveWorksheet() var range = sheet.getRange('A2:D2') range.delete(Excel.DeleteShiftDirection.up) //提交操做 return context.sync() }).catch(_this.errorHandler) },
clear: function() { let _this = this Excel.run(function(context) { //獲取指定名字的工做薄sheet // var sheet = context.workbook.worksheets.getItem('sheetName') // 獲取當前選中的單元格 var sheet = context.workbook.worksheets.getActiveWorksheet() var range = sheet.getRange('A1:D4') range.clear() //提交操做 return context.sync() }).catch(_this.errorHandler) },
項目連接數組