kuc-arc-f/Layout.astro

## index.astro
---
import Layout from '../../layouts/Layout.astro';

---

<Layout title="Welcome to Astro.">
    <div class="container">
        <h3>test</h3>
        <hr />
        <button id="btn_test" class="btn btn-primary">Put
        </button>
    </div>
</Layout>

<style>
</style>
<!-- -->
<script src="./Test.ts"></script>

## Layout.astro
---
export interface Props {
	title: string;
}

const { title } = Astro.props;
---

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="generator" content={Astro.generator} />
		<title>{title}</title>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
		rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
		<link href="/styles/globals.css" rel="stylesheet" />
		<!-- SQLITE -->
		<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.6.2/sql-wasm.min.js"></script>
		<!-- exceljs -->
		<script is:inline src="https://cdn.jsdelivr.net/npm/exceljs@4.3.0/dist/exceljs.min.js"></script>
	</head>
	<body>
		<!-- Header -->
		<div class="text-center my-2">
			<a href={`/`}>[ Top ]</a>
			&nbsp;<a href={`/test`}>[ Test ]</a>
			&nbsp;<a href={`/test_auth5`}>[ TestAuth ]</a>
			&nbsp;<a href={`/todo`}>[ Todo ]</a>
			&nbsp;<a href={`/git_count`}>[ Git Count ]</a>
			&nbsp;<a href={`/plan`}>[ Plan ]</a>
			&nbsp;<a href={`/er_chart`}>[ ErChart ]</a>
			&nbsp;<a href={`/task_project`}>[ Tasks ]</a>
			&nbsp;<a href={`/login`}>[ Login ]</a>
			<hr />
		</div>
		<slot />
	</body>
</html>
<style is:global>
</style>
<script src="../lib/Layout.ts"></script>

<!--
&nbsp;<a href={`/test_auth4`}>[ TestAuth ]</a>
 -->

## Test.ts
import LibConfig from '../../lib/LibConfig';
//
const Crud = {
  /**
   *
   * @param key: any
   *
   * @return
   */
  xlsTest : async function() : Promise<any>
  {
    try{
      let ret = false;
      console.log("#xlsTest");
      //@ts-ignore
      const workbook = new ExcelJS.Workbook();
      workbook.addWorksheet('My Sheet');
      const worksheet = workbook.getWorksheet('My Sheet');
      // 列を定義
      worksheet.columns = [
        { header: 'ID', key: 'id' },
        { header: 'Name', key: 'name' },
        { header: 'Price', key: 'price' },
      ];
      // 行を定義
      worksheet.addRow({id: 1001, name: 'oracnge', price: 170});
      worksheet.addRow({id: 1002, name: 'banana', price: 200});
      worksheet.addRow({id: 1003, name: 'apple', price: 260});
      worksheet.addRow({id: 1004, name: 'tomoto', price: 190});
      // UInt8Arrayを生成
      const uint8Array = await workbook.xlsx.writeBuffer();
      // Blob
      const blob = new Blob([uint8Array], {type: 'application/octet-binary'});
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `sample.xlsx`;
      a.click();
      // ダウンロード後は不要なのでaタグを除去
      a.remove()
      return ret;
    } catch (e) {
      console.error(e);
    }
  },
  /**
  * startProc
  * @param
  *
  * @return
  */
  startProc :async function (): Promise<void>
  {
    try{
      console.log("#startProc");
      //btn
      const button: any = document.querySelector('#btn_test');
      button.addEventListener('click', async () => {
console.log("#button");
        const resulte = await this.xlsTest();
      });
    } catch (e) {
      console.error(e);
    }
  }
}
//
Crud.startProc();

export default Crud;
	---
	import Layout from '../../layouts/Layout.astro';

	---

	<Layout title="Welcome to Astro.">
	<div class="container">
	<h3>test</h3>
	<hr />
	<button id="btn_test" class="btn btn-primary">Put
	</button>
	</div>
	</Layout>

	<style>
	</style>
	<!-- -->
	<script src="./Test.ts"></script>
	---
	export interface Props {
	title: string;
	}

	const { title } = Astro.props;
	---

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width" />
	<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
	<meta name="generator" content={Astro.generator} />
	<title>{title}</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
	rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
	<link href="/styles/globals.css" rel="stylesheet" />
	<!-- SQLITE -->
	<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.6.2/sql-wasm.min.js"></script>
	<!-- exceljs -->
	<script is:inline src="https://cdn.jsdelivr.net/npm/exceljs@4.3.0/dist/exceljs.min.js"></script>
	</head>
	<body>
	<!-- Header -->
	<div class="text-center my-2">
	<a href={`/`}>[ Top ]</a>
	<a href={`/test`}>[ Test ]</a>
	<a href={`/test_auth5`}>[ TestAuth ]</a>
	<a href={`/todo`}>[ Todo ]</a>
	<a href={`/git_count`}>[ Git Count ]</a>
	<a href={`/plan`}>[ Plan ]</a>
	<a href={`/er_chart`}>[ ErChart ]</a>
	<a href={`/task_project`}>[ Tasks ]</a>
	<a href={`/login`}>[ Login ]</a>
	<hr />
	</div>
	<slot />
	</body>
	</html>
	<style is:global>
	</style>
	<script src="../lib/Layout.ts"></script>

	<!--
	<a href={`/test_auth4`}>[ TestAuth ]</a>
	-->
	import LibConfig from '../../lib/LibConfig';
	//
	const Crud = {
	/**
	*
	* @param key: any
	*
	* @return
	*/
	xlsTest : async function() : Promise<any>
	{
	try{
	let ret = false;
	console.log("#xlsTest");
	//@ts-ignore
	const workbook = new ExcelJS.Workbook();
	workbook.addWorksheet('My Sheet');
	const worksheet = workbook.getWorksheet('My Sheet');
	// 列を定義
	worksheet.columns = [
	{ header: 'ID', key: 'id' },
	{ header: 'Name', key: 'name' },
	{ header: 'Price', key: 'price' },
	];
	// 行を定義
	worksheet.addRow({id: 1001, name: 'oracnge', price: 170});
	worksheet.addRow({id: 1002, name: 'banana', price: 200});
	worksheet.addRow({id: 1003, name: 'apple', price: 260});
	worksheet.addRow({id: 1004, name: 'tomoto', price: 190});
	// UInt8Arrayを生成
	const uint8Array = await workbook.xlsx.writeBuffer();
	// Blob
	const blob = new Blob([uint8Array], {type: 'application/octet-binary'});
	const url = window.URL.createObjectURL(blob);
	const a = document.createElement('a');
	a.href = url;
	a.download = `sample.xlsx`;
	a.click();
	// ダウンロード後は不要なのでaタグを除去
	a.remove()
	return ret;
	} catch (e) {
	console.error(e);
	}
	},
	/**
	* startProc
	* @param
	*
	* @return
	*/
	startProc :async function (): Promise<void>
	{
	try{
	console.log("#startProc");
	//btn
	const button: any = document.querySelector('#btn_test');
	button.addEventListener('click', async () => {
	console.log("#button");
	const resulte = await this.xlsTest();
	});
	} catch (e) {
	console.error(e);
	}
	}
	}
	//
	Crud.startProc();

	export default Crud;