Zusammenfassung: Dieser Artikel wurde ursprünglich vom technischen Team von Grape City im Bloggarten erstellt und veröffentlicht. Bitte geben Sie die Quelle des Nachdrucks an: Offizielle Website von Grape City . Grape City bietet Entwicklern professionelle Entwicklungstools, Lösungen und Dienste, um Entwickler zu unterstützen.
Vorwort | Problemhintergrund
Als hervorragendes Arbeitsmittel ist Excel eine unverzichtbare Bürosoftware, mit der jeder arbeiten kann. Mit dem Aufkommen des Internetzeitalters haben immer mehr Unternehmen begonnen, verschiedene B/S-Systeme zur Verarbeitung tabellarischer Datendateien zu nutzen. Gibt es also ein Excel-Add-In, mit dem man Daten direkt im Browser verarbeiten kann? Die Antwort ist ja. Der Herausgeber dieses Artikels stellt vor, wie das SpreadJS-Online-Formular-Plug-In (im Folgenden als „SpreadJS“ bezeichnet) und der Online-Formular-Editor (Excel-ähnliches Browser-Plug-In) in das Vue-Framework integriert werden, um das Excel-Plug-In zu verwenden. im Browser eingeben, um Daten zu verarbeiten.
In diesem Tutorial verwenden wir node.js. Bitte stellen Sie sicher, dass die neueste Version installiert ist. Darüber hinaus müssen Sie die Software Visual Studio Code (im Folgenden als „VSCode“ bezeichnet) als Programmierumgebung verwenden. Bitte führen Sie sie als aus ein Administrator.
So integrieren Sie das Tabellen-Plugin (SpreadJS) in das Vue-Framework
In diesem Abschnitt zeigt Ihnen der Editor, wie Sie SpreadJS-Ressourcen in das Vue-Framework einführen und zwei einfache Funktionen zum Hoch- und Herunterladen von Dateien realisieren.
SpreadJS in Vue integrieren:
1. Öffnen Sie zunächst die VSCode-Software mit Administratorrechten und öffnen Sie dann mit VSCode die ursprüngliche Codedatei (im Ressourcenpaket unter dem Artikel). Alternativ können Sie selbst ein Vue-Projekt erstellen. Die relevante Erstellungssyntax lautet wie folgt:
\# npm 6.x
npm create vite@latest Vue3-spread-ts --template Vue-ts
\# npm 7+, extra double-dash is needed:
npm create vite@latest Vue3-spread-ts --template Vue-ts
\# yarn
yarn create vite Vue3-spread-ts --template Vue-ts
\# pnpm
pnpm create vite Vue3-spread-ts -- --template Vue-ts
2. Öffnen Sie nach dem Erstellen des Vue-Projekts den Ordner package.json im Projekt. Zu diesem Zeitpunkt müssen wir das SpreadJS-Komponentenpaket im Ordner einführen:
{
"name": "vue3-spread-ts",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview"
},
"dependencies": {
"@grapecity/spread-excelio": "15.1.0",
"@grapecity/spread-sheets": "15.1.0",
"@grapecity/spread-sheets-barcode": "15.1.0",
"@grapecity/spread-sheets-charts": "15.1.0",
"@grapecity/spread-sheets-languagepackages": "15.1.0",
"@grapecity/spread-sheets-pdf": "15.1.0",
"@grapecity/spread-sheets-pivot-addon": "15.1.0",
"@grapecity/spread-sheets-print": "15.1.0",
"@grapecity/spread-sheets-resources-zh": "15.1.0",
"@grapecity/spread-sheets-shapes": "15.1.0",
"@grapecity/spread-sheets-tablesheet": "15.1.0",
"@grapecity/spread-sheets-vue": "15.1.0",
"element-plus": "\^2.2.5",
"file-saver": "\^2.0.5",
"vue": "\^3.2.25"
},
"devDependencies": {
"@vitejs/plugin-vue": "\^2.3.3",
"typescript": "\^4.5.4",
"vite": "\^2.9.9",
"vue-tsc": "\^0.34.7"
}
}
（需要引入的spreadJS组件）
Nachdem Sie diese Komponenten importiert haben, verwenden Sie den Befehl npm install, um diese Komponenten herunterzuladen (der erste Download kann einige Zeit dauern). Verwenden Sie nach Abschluss des Downloads den Befehl npm run dev, um das Projekt zu starten. Wenn Sie es im Browser öffnen können, bedeutet dies, dass das Projekt gestartet und erfolgreich installiert wurde.
3. Öffnen Sie nach dem Projektstart die Datei OnlineSpread.Vue im Verzeichnis src\components. Diese Datei ist der Speicherort des Hauptcodes von SpreadJS, der vom Vue-Framework integriert wird. (Wenn Sie die .Vue-Datei zum Schreiben von Code anpassen möchten, können Sie dies auch tun. Beachten Sie jedoch, dass Sie den Code in der APP.Vue-Datei ändern müssen, um onlineSpread aus „./components/OnlineSpread.Vue“ in eine benutzerdefinierte Datei zu importieren Name).
3.1 Einführung in SpreadJS-Ressourcen:
Um SpreadJS in das Vue-Framework zu integrieren, müssen einige Ressourcen in das Projekt eingeführt werden. Zu diesen Ressourcen gehören die Hauptressourcen von SpreadJS, Dateiimport und -export usw.
import {
defineComponent} from 'Vue'
// SpreadJS组件运行时资源
import \* as GC from "@grapecity/spread-sheets"
//引入符合自己项目主题的样式
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
//设置中文
import "@grapecity/spread-sheets-resources-zh"
// 引入导入导出文件相关的资源
import \* as ExcelIO from "@grapecity/spread-excelio"
//引入文件导出
import {
saveAs} from 'file-saver'
//引入打印相关资源
import "@grapecity/spread-sheets-print"
//引入导出pdf资源
import "@grapecity/spread-sheets-pdf"
//引入语言资源（支持中英文）
GC.Spread.Common.CultureManager.culture('zh-cn')
(Von SpreadJS in Vue eingeführte Ressourceninformationen)
3.2 Nach dem Importieren von Ressourcen habe ich festgestellt, dass der Browser nur eine Zeile Inhalt in Ihrer Tabelle anzeigt. Dies liegt daran, dass das Format der Tabelle nicht festgelegt wurde. Sie müssen das hostStyle-Tag und das workbookInitialized-Tag von SpreadJS verwenden, um die Größe und festzulegen Breite des Tisches. Die spezifische Einstellungsmethode besteht darin, zuerst das hostStyle-Format im div-Tag festzulegen ( achten Sie darauf, das zurückgegebene hostStyle-Tag nicht zu vergessen ) und dann das Höhenformat in der Setup-Methode festzulegen.
// 引入组件
components:{
'gc-spread-sheets':GcSpreadSheets
}
//div标签
\<gc-spread-sheets :hostStyle="hostStyle" @workbookInitialized="initWorkbook"\>
\</gc-spread-sheets\>
//设置高度格式，写在setup方法中
const hostStyle={
height:'90vh'
}
return{
hostStyle
}
(Code zum Formatieren der Tabellengröße)
Dateien hochladen und Dateien herunterladen:
Die Methode zum Hoch- und Herunterladen von Dateien entspricht genau der Methode zum Festlegen der Tabellengröße. Legen Sie zunächst die entsprechende Schaltfläche im div-Tag fest.
\<el-upload
class="upload-demo"
accept=".xlsx"
:before-upload="importFile"
action=''
\>
\<el-button type="primary"\>上传文件\</el-button\>
\</el-upload\>
\<el-button type="primary" @click="downloadFile"\>下载文件
\</el-button\>
(Legen Sie die Schaltflächen zum Hochladen und Herunterladen von Dateien im div-Tag fest.)
Legen Sie dann die Methode zum Hoch- und Herunterladen von Dateien in der Setup-Methode fest ( Einzelheiten finden Sie im API-Referenzdokument von SpreadJS ).
//文件上传的方法
const importFile = (file) =\> {
let io = new ExcelIO.IO()
// excelio打开文件，回调函数中的参数时SpreadJS支持的json格式
io.open(file,(fileJSON) =\> {
// fromJSON中第二个参数为导入文件的控制参数，默认均为false,根据自己的需求添加,都不要修改时可不传
spread.fromJSON(fileJSON,{
ignoreFormula: false, //导入忽略公式
ignoreStyle: false, //导入忽略样式
frozenColumnsAsRowHeaders: false, //将冻结列当作行头
frozenRowsAsColumnHeaders: false, //将冻结行作为列头
// 导入文件不立即计算. Excel文件保存时会自动计算,当文件比较大时,可以导入后不计算,提高导入效率.
doNotRecalculateAfterLoad: false
})
})
return false
}
//文件下载的方法
const downloadFile = () =\> {
//获取当前工作簿json,toJSON也可以根据需求设置参数,参考学习指南导入导出json
let fileJson = spread.toJSON()
//创建文件IO实例
let io = new ExcelIO.IO()
//保存文件
io.save(fileJson,(blob)=\>{
// excelIO将文件转化为blob,传递给回调函数,然后执行file-saver的saveAs保存excel文件.
saveAs(blob,'导出文件.xlsx')
},(e) =\> {
console.log(e)
})
}
(Legen Sie den Code zum Hoch- und Herunterladen von Dateien fest)
Anschließend können Sie im Browser Dateien hochladen, Dateiinhalte ändern und Dateien herunterladen. Außerdem können Sie das Tabellen-Plug-in erleben und verwenden (die Verwendung ähnelt stark der von Excel).
PS: Aufmerksamen Internetnutzern dürfte aufgefallen sein, dass im Browser nur die Tabelle angezeigt wird und der Inhalt des oberen Editors in Excel nicht angezeigt wird. Der Grund dafür ist, dass die Einleitung aufgrund der begrenzten Länge des Artikels nicht auf einmal abgeschlossen werden kann, sodass der Herausgeber den Inhalt des in Vue integrierten Online-Editors in den nächsten Artikel einfügt.
Anmerkung:
Der vollständige Quellcode ist an die Datei vue3-spreadJS-ts im Ordner day1 unterhalb des Artikels angehängt und kann mit dem Befehl npm run dev direkt im Terminal ausgeführt werden.
Quelllink: https://gitee.com/GrapeCity/SpreadJS__20230605BiaoGeChaJian (Gitee)
https://github.com/GrapeCityXA/SpreadJSBiaoGEcHAJian (Github)
Weitere Referenzen:
Das Video-Tutorial zu diesem Artikel
Technisches Informationsdokument zur Tischsteuerung
Erweiterte Informationen: