要約: この記事はオリジナルであり、Grape City 技術チームによって CSDN に初めて公開されたものです。転載する場合は出典を明記してください:グレープシティ公式ウェブサイト. グレープシティは、開発者に力を与えるための専門的な開発ツール、ソリューション、サービスを開発者に提供します。
序文
Excel をローカルで使用する場合、Word や CAD 図面などを Excel に添付するなど、添付ファイルを Excel に追加する必要がよくあります。同様に、Web に例えると、現在多くの人が使用しているオンラインの Excel も、添付ファイルをローカルの Excel と同じように操作できるでしょうか。答えは「はい」ですが、ローカル側とは異なり、Web 側は添付ファイルを直接開くことはなく、添付ファイルをハイパーリンク セルの形式で表示します。今日は、フロントエンド HTML+JS+CSS テクノロジを使用して、オンライン Excel 添付ファイルのアップロード、ダウンロード、変更操作はセルの形式で実装されます。
JS を使用して添付ファイルをアップロードする
実装は 4 つのステップに分かれています。
1. フロントエンドページを作成する
2 仮添付情報の書き込み方法
3. 添付ファイルをクリアするメソッドを作成する
4. ファイルの保存とファイルのロードのためのメソッドを作成する
1. フロントエンドページを作成する
コアコード:
<div style="margin-bottom: 8px">
<button id="uploadAttach">上传附件</button>
<button id="removeAttach">清除附件</button>
<button id="fileSaver">文件保存</button>
<button id="loadSubmitFile">加载文件</button>
<button id="loadPackage">打包下载</button>
</div>
<div id="fileOperate" style="visibility: hidden;position: absolute;top: 100px;left: 300px;z-index: 10; background-color: #eee;padding: 16px">
<label for="choseFile">选择文件\</label>
<input type="file" id="choseFile" name="choseFile"/>
<button id="submit">提交</button>
<button id="cancel">取消</button>
</div>
「添付ファイルのアップロード」ボタンをクリックして、対応するセルに添付ファイルをアップロードします。添付ファイルをクリアすると、アップロードされたすべての添付ファイル情報が消去されます。パッケージのダウンロードでは、すべての添付ファイルが均一にダウンロードされます。
2. 添付ファイル情報の一時保存方法
この手順は主に、ファイルのアップロード後にセルのハイパーリンクとタグ情報を設定するために使用されます。注意深い学生は、ここにコマンドを登録していることに気づくでしょう。ハイパーリンク自体がジャンプ動作をすることになります。コマンドを記述した後、このデフォルトのジャンプはブロックされ、対応するコマンドが実行されます。登録されたコマンドは主に添付ファイルのダウンロードに使用されます。
コアコード:
function hasAttachFile(sheet,row,col,file){
\*\*
\* 附件文件暂存
\* 这里由于没有服务端，所以我直接存了File对象,但File对象只有在实际使用时才会去获取实际的文件内容。在demo中可行
\* 在实际项目中，需要将file对象上传到文件服务器中
\* 上传完成后tag中的fileInfo应该代表的是文件的访问地址，而不能再是File对象。
\*
sheet.setValue(row,col,file.name)
sheet.setTag(row,col,{
type: hyerlinkType,
fileInfo: file // 实际项目中fileInfo应该为上传完成文件的访问路径
})
sheet.setHyperlink(row, col, {
url: file.name,
linkColor: '#0066cc',
visitedLinkColor: '#3399ff',
drawUnderline: true,
command:'downloadAttachFile',
}, GC.Spread.Sheets.SheetArea.viewport);
}
ここでは、ハイパーリンク セルをクリックしたときに現在の添付ファイルのダウンロードをサポートできるサードパーティ コンポーネント ライブラリ FileSaver を紹介しました。
// 下载文件
spread.commandManager().register("downloadAttachFile",{
canUndo: false,
execute: function(context,options,isUndo){
let sheet = context.getActiveSheet()
let row = sheet.getActiveRowIndex()
let col = sheet.getActiveColumnIndex()
let cellTag = sheet.getTag(row,col)
console.log(sheet,row,col,cellTag)
if(cellTag && cellTag.type==hyerlinkType){
\*\*\*
\* 纯前端demo，文件存在于本地，fileInfo中存储的是File对象，可以直接获取到文件
\* 实际项目中，fileInfo应该是上传到文件服务器上的文件访问地址。
\* 因此这里需要发送请求，先获取文件blob,将获取的blob传递到saveAs的第二个参数中。
\*
saveAs(cellTag.fileInfo,cellTag.fileInfo.name)
}
}
})
3. 添付ファイルをクリアする
document.getElementById("removeAttach").onclick = function(){
\*\*\*
\* 清除附件
\* 清除附件需要先删除远程文件服务器的文件，之后清除单元格的Tag信息。
\* 这里前端演示demo，只删除了tag。
\* 实际项目中tag中的fileInfo应该是文件上传后的路径
\*
let sheet = spread.getActiveSheet()
let row = sheet.getActiveRowIndex()
let col = sheet.getActiveColumnIndex()
spread.commandManager().execute({
cmd:"removeAttachFile",
sheet,row,col
})
}
4. ファイルの保存・読み込み
ファイルを JSON 構造として保存します。
document.getElementById("fileSaver").onclick = function(){
// 保存文件
submitFile = spread.toJSON()
spread.clearSheets()
spread.addSheet(0)
}
加载已保存文件：
document.getElementById("loadSubmitFile").onclick = function(){
// 加载已保存文件
spread.fromJSON(submitFile)
}
機能と効果を実装します。
特定のセルに添付ファイルをアップロードする必要がある場合、モーダル ボックスがポップアップ表示され、モーダル ボックス内でファイルをアップロードできます。送信をクリックした後、ファイルを一時保存し、ファイル情報を のタグに保存できます。セルをクリックしてファイルをダウンロードします。
完全なコードとオンライン デモ アドレス:
https://jscodemine.grapecity.com/share/VHlpNyuP-0CIBNleP5jtyA/
拡張リンク:
Spring Boot フレームワークで Excel サーバーのインポートとエクスポートを実装する
プロジェクト実践：オンライン見積調達システム（React + SpreadJS + Echarts）
SpreadJS と組み合わせた洗練されたフレームワークにより、純粋なフロントエンド Excel オンライン レポート デザインが実装されます。