序文
最近、著者はついにH5ドアバックグラウンド管理システムの予備確立を完了し、予備データ収集およびデータ分析機能を備えています。次に、関連するいくつかの知識ポイントを確認し、ドアH5での視覚化について説明します。エディターでの解決策著者はレビューするために3つの記事に分けられ、主な解決策のシナリオは次のとおりです。
JavaScriptを使用してフロントエンドのインポートおよびエクスポートexcelファイルを実装する方法（H5エディターの実際の戦闘レビュー）
フロントエンドがワンクリックでテーブル内のデータに基づいて多次元データ視覚化分析レポートを生成する方法
メンバー管理システムで権限ルーティングと権限メニューを実現する方法
上記のシナリオは、フロントエンドエンジニアがバックエンド管理システムの開発で頻繁に遭遇する、または遭遇する問題でもあります。この記事は、上記の紹介の最初の記事です。
JavaScriptを使用して、フロントエンドでExcelファイルをインポートし、編集可能なテーブルコンポーネントを自動的に生成します
JavaScriptを使用して、テーブルデータに基づいてexcelファイルのワンクリックエクスポートを実現します
XLSXとjs-export-excelの基本的な使用法
テキスト
この記事の以下のコンテンツ資料はすべて、H5ビジュアルエディター（H5-Dooring）プロジェクトのスクリーンショットに基づいています。実際の体験をしたい場合は、H5-Dooring Webサイトの実際の体験にアクセスしてください。次に、ソリューションを直接開始します。
1. JavaScriptを使用してExcelファイルをインポートし、編集可能なテーブルコンポーネントを自動的に生成します
達成を開始する前に、実装の効果を見てみましょう。
1.1実現効果
エクセルファイルをインポートし、antdのテーブルコンポーネントを介してテーブルをレンダリングします。テーブルコンポーネントを 編集します。
テーブルデータを保存した後、視覚化チャートをリアルタイムでレンダリングします。
上記は、エクセルファイルをインポートし、テーブルを編集し、最後にチャートを動的に生成する完全なプロセスです。
1.2ワンクリックでExcelファイルをインポートしてテーブルフォームを生成する
エクセルファイルをインポートする機能は、javascriptネイティブな方法で解析できます。たとえば、fileReaderなどのネイティブAPIを使用できますが、開発効率とその後のメンテナンスを考慮して、作成者はantdのUploadコンポーネントとXLSXを使用して、ファイルのアップロードと分析の機能を実現しています。 antdのテーブルコンポーネントを使用してデータをレンダリングするため、解析されたデータをテーブルでサポートされているデータ形式に手動で変換する必要があります。一般的なプロセスは次のとおりです。 したがって、Uploadで取得したファイルデータをxlsxに渡すだけです。 xlsxは分析オブジェクトを生成し、最後にjavascriptアルゴリズムを使用してxlsxオブジェクトをant-tableでサポートされるデータ形式に処理します。ここではFileReaderオブジェクトを使用します。目的はファイルをBinaryStringに変換することであり、xlsxバイナリモードを使用できます。エクセルデータを読み取るためのコードは次のとおりです。
// 解析并提取excel数据
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支持的数据格式
let sourceData = Object.values(draftObj).map((item,i) => ({ key: i + '', name: item[0], value: item[1]}))
复制代码
上記の処理の後、取得するsourceDataは、ant-tableで使用可能なデータ構造です。これまでのところ、テーブルインポートの機能を実現しています。
1.3テーブルの編集機能の実現
テーブルの編集機能は実際には非常に単純です。antdテーブルコンポーネントによって提供されるカスタム行とセルの実装に従うだけで済みます。antd公式Webサイトには、次のように編集可能なテーブルの実装もあります。 誰もが興味を持っています。 以下を個人的に学ぶことができます。もちろん、編集可能なテーブルを自分で実装するのは非常に簡単で、列レンダリング機能を使用してテーブルの編集状態を動的に切り替える、ポップアップ編集を使用するなど、さまざまな方法が可能です。
1.4編集されたテーブルデータに基づいてチャートを動的に生成する
テーブルデータに基づいてチャートを動的に生成するには、特定の規則が必要です。チャートライブラリのデータ仕様に準拠する必要があります。ただし、テーブルデータがあります。データ仕様の処理はもちろん非常に簡単です。作成者の視覚化ライブラリは、antvのf2によって実装されます。 、したがって、f2がデータを消費できるようにするには、適応のレイヤーが必要です。
もう1つのポイントは、複数のチャートを使用できるようにするには、f2チャートを均一にカプセル化して、アプリケーションシナリオに適合するビジュアルコンポーネントライブラリにする必要があるということです。まず、f2で使用されるデータ形式を見てみましょう。
const data = [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 }
];
复制代码
このデータ形式は、次のグラフにレンダリングされます。 そこで、エリアチャート、円グラフ、線図など、主要な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: 处理数据
const dataX = data.map(item => ({ ...item, value: Number(item.value) }));
// Step 2: 载入数据源
chart.source(dataX);
// Step 3：创建图形语法，绘制柱状图，由 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);
复制代码
もちろん、他のビジュアルコンポーネントも同じモードでカプセル化できるので、ここでは例を1つずつ示しません。上記のコンポーネントのカプセル化では、reactのフックコンポーネントを使用します。vueのコンポーネントも同様であり、基本的な原則は同じです。
2. JavaScriptを使用して、フロントエンドのテーブルデータに基づいてexcelファイルのワンクリックエクスポートを実現します
同様に、Excelへのテーブルデータのワンクリックエクスポートも同様であることに気付きましたが、スキームが異なります。Dooringでの実装効果を見てみましょう。
2.1効果を達成するために優れたワンクリックエクスポート
上記は、バックグラウンドで収集されたデータに基づいて、ユーザーがワンクリックでエクセルファイルをエクスポートするプロセスです。最後の図は、オフィスソフトウェアで生成されたエクセルファイルの表示です。
2.2javascriptを使用してワンクリックでexcelファイルのエクスポート機能を実現
ワンクリックエクスポート機能は、主にH5-Dooringのバックグラウンド管理ページで使用され、ユーザーにデータをエクスポートする便利な機能を提供します。ここでのエクスポート機能は、xlsxを使用して実装できますが、包括的な比較の結果、より簡単な解決策があることがわかりました。次に、作成者が詳細を紹介します。まず、プロセスを見てみましょう。 明らかに、エクスポートプロセスはインポートプロセスよりもはるかに単純です。テーブルのデータ形式をプラグインでサポートされているデータに逆コンパイルするだけで済みます。ここで、作成者はjsを使用します。 -export-excelはファイルのエクスポートを実行します。これを使用すると非常に柔軟性があり、カスタマイズできます。
エクスポートされたexcelファイル名をカスタマイズします
カスタムエクセルフィルターフィールド
excelファイルの各列のヘッダー名をカスタマイズします
js-export-excelでサポートされているデータ構造は配列オブジェクトであるため、テーブルデータを配列オブジェクトに変換するためにある程度の労力を費やす必要があります。antテーブルデータ構造のキーに対応する値は配列でもかまいませんが、jsであることに注意してください。 -export-excelキーに対応する値は文字列であるため、配列を文字列に変換する必要があります。たとえば、[a、b、c]は 'a、b、c'になります。したがって、データ形式を具体的に変換する必要があります。実装は次のとおりです。
const generateExcel = () => {
let option = {}; //option代表的就是excel文件
let dataTable = []; //excel文件中的数据内容
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); //设置excel中每列所获取的数据源
}
}
let tableKeys = Object.keys(dataTable[0]);
option.fileName = tableName; //excel文件名称
option.datas = [
{
sheetData: dataTable, //excel文件中的数据源
sheetName: tableName, //excel文件中sheet页名称
sheetFilter: tableKeys, //excel文件中需显示的列数据
sheetHeader: tableKeys, //excel文件中每列的表头名称
}
]
let toExcel = new ExportJsonExcel(option); //生成excel文件
toExcel.saveExcel(); //下载excel文件
}
复制代码
著者が実装した上記のソリューションは、どのテーブルコンポーネントにも使用でき、上記のコードはほとんどのシナリオで直接使用できることに注意してください。これまで、JavaScriptを使用してフロントエンドのインポートおよびエクスポートのexcelファイル機能を実装してきました。
それで、あなたは今日また知識がありますか？
やっと
上記のチュートリアルの作成者はH5-Dooringに統合されています。より複雑なインタラクティブ機能については、合理的な設計によって実現できます。自分で探索して学習することができます。
github ????：H5オンラインエディターH5-Dooring
または、以下のQRコードをスキャンしてアクセスします。
H5ゲーム、webpack、node、gulp、css3、javascript、nodeJS、キャンバスデータの視覚化、その他のフロントエンドの知識と実際の戦闘について詳しく知りたい場合は、「興味深いフロントエンド」で一緒に勉強して話し合い、フロントエンドの境界を一緒に探索してください。
コメントエリア
最後に、まだまだエネルギーがある場合は、クリックして元のテキストを読み、フォームに入力し続けることができます〜