フロントエンドの表をExcelにエクスポートする場合、一般的にxlsxなどのプラグインを使用してエクスポートしますが、表のスタイルを維持したい場合は、幅、フォントの色を維持するなど、他のプラグインを使用する必要があります、背景色、その他のスタイル。
ここでは、短いネイティブ js メソッドを直接使用して、スタイル付きの Excel ファイルをエクスポートできます。
コードに直接
/*原生表格导出 带样式 参数table是原生table的DOM元素 filename是文件名*/
export function tableToXlsx(table, filename) {
const uri = 'data:application/vnd.ms-excel;base64,',
template = `<html>
<head><meta charset="UTF-8"></head>
<body><table border="1">${table.innerHTML}</table></body>
</html>`;
const a = document.createElement('a');
a.href = uri + window.btoa(unescape(encodeURIComponent(template)));
a.download = filename;
a.click();
document.removeChild(a);
}使用シーン
テンプレート
//ref の printRef は dom を取得するために使用されます
//Reconciliation は印刷する必要があるスタイル付きのコンポーネントです
//isExport は表示するかどうかを判断します
//reconciliationData は受信データです
//ref的printRef用来获取dom
//Reconciliation 是需要打印的带有样式的组件
//isExport判断是否展示
//reconciliationData是传入的数据
<template>
<div style="height: 65vh; overflow: auto" ref="printRef">
<Reconciliation :export="isExport" :content-data="reconciliationData"/>
</div>
<a-button type="primary" @click="exportSubmit">导出</a-button>
</template>jsインポート
メソッドを導入し、エクスポートする必要があるテーブルをメソッドの最初のパラメーターに入れます。これは、エクスポートする必要があるスタイルのテーブルです
//引入方法，将需要导出的table放到方法的第一个参数
<script lang="ts" setup>
import { tableToXlsx } from '/@/components/Excel';
const printRef = ref();
const isExport = ref(false);
const exportSubmit = function () {
const time = moment().format('yyyyMMDDHHmmss');
isExport.value = true;
nextTick(() => {
tableToXlsx({
table: printRef.value.firstChild.querySelector('table'),
filename: '导出内容' + time + '.xlsx',
})
nextTick(() => {
isExport.value = false;
})
})
}
</script>次に、[エクスポート] をクリックすると、エクスポートされたコンテンツにスタイルが適用されます。