var React, viewer, tableDataExtractor;
/**
* 表データ抽出を行う領域を指定する座標情報
* フォーマット: [x1, y1, x2, y2]
* 座標の起点はページの左下
*/
const selectionBounds = [29.259600728808035, 334.3295250560871, 688.918658156098, 490.80681277047995];
/**
* 抽出された表データに関するログ
* @param {Object} data - 抽出された表データ
*/
function logTableData(data) {
if (Array.isArray(data) && data.length > 0) {
data = data[0];
}
if (data?.cols && data?.rows) {
console.log(`抽出結果＝列数: ${data.cols.length}, 行数: ${data.rows.length}`);
} else {
console.log("抽出された表データはありません。");
}
}
/**
* 指定されたオプション設定で表データ抽出を行う
* @param {Object} extractOptions - オプション設定
*/
async function applyExtraction(extractOptions) {
const extractedData = await tableDataExtractor.extractTableData(0, selectionBounds, undefined, { extractOptions });
logTableData(extractedData);
}
/**
* ツールバーに配置するボタンをスタイル付きで生成する
* @param {string} text - ボタンのラベル
* @param {Function} callback - クリック時に実行される処理
* @returns {Object} 生成されたボタン（React要素）
*/
function createToolbarButton(text, callback) {
const disabled = !viewer.canEditDocument;
return React.createElement("button", {
className: "gc-btn gc-btn--accent",
disabled,
style: { padding: "0 10px" },
onClick: disabled ? null : callback,
title: text
}, text);
}
/**
* PDFビューワの初期化処理（PDFファイルのロードを含む）
* @param {string} selector - ビューワコンテナのDOMセレクタ
*/
function loadPdfViewer(selector, pdfUrlToOpen) {
viewer = new DsPdfViewer(selector, {
supportApi: getSupportApiSettings()
});
React = viewer.getType("React");
tableDataExtractor = viewer.tableDataExtractor;
tableDataExtractor.activate();
const panelHandle = viewer.addTableExtractionPanel();
viewer.expandPanel(panelHandle);
// 異なるオプション設定ごとに表データ抽出を行うボタンをセカンドツールバー上に配置する
viewer.options.secondToolbar = {
render: function(toolbarKey) {
if (toolbarKey === "sample-toolbar") {
return [
createToolbarButton("列間認識：狭く", async () => {
applyExtraction({ CoefMinimumDistanceBetweenCols: 0.2 });
}),
createToolbarButton("列間認識：広く", async () => {
applyExtraction({ CoefMinimumDistanceBetweenCols: 1.0 });
}),
createToolbarButton("行間認識：狭く", async () => {
applyExtraction({ CoefMinimumDistanceBetweenRows: 0.5 });
}),
createToolbarButton("行間認識：広く", async () => {
applyExtraction({ CoefMinimumDistanceBetweenRows: 0.9 });
}),
createToolbarButton("最小行高：低い", async () => {
applyExtraction({ MinimumRowHeight: 1.0 });
}),
createToolbarButton("最小行高：高い", async () => {
applyExtraction({ MinimumRowHeight: 20.0 });
}),
createToolbarButton("最小列幅：狭い", async () => {
applyExtraction({ MinimumColWidth: 1.0 });
}),
createToolbarButton("最小列幅：広い", async () => {
applyExtraction({ MinimumColWidth: 30.0 });
})
];
}
return null;
}
};
viewer.addDefaultPanels();
viewer.open(pdfUrlToOpen).then(function() {
viewer.zoomMode = 1;
});
// カスタマイズしたセカンドツールバーを表示する
viewer.showSecondToolbar("sample-toolbar");
}
window.onload = function() {
//DsPdfViewer.LicenseKey = "***key***";
var pdfUrlToOpen = "/diodocs/pdfviewer/demos/product-bundles/assets/pdf/table-data-one-page.pdf";
loadPdfViewer("#viewer", pdfUrlToOpen);
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>コードでの表データ抽出</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./src/styles.css">
<script src="/diodocs/pdfviewer/demos/product-bundles/build/dspdfviewer.js"></script>
<script src="/diodocs/pdfviewer/demos/product-bundles/build/wasmSupportApi.js"></script>
<script src="/diodocs/pdfviewer/demos/resource/js/init.js"></script>
<script src="./src/app.js"></script>
</head>
<body>
<div id="viewer"></div>
</body>
</html>
#viewer {
height: 100%;
}
