[Bug] exportToExcel 无法将包含自定义Vue组件的单元格导出为图片
Open
Nobody has claimed this yet.
bug
- Dominant language
- TypeScript
- Stars
- 3.7k
- Forks
- 486
- Avg merge
- 1d 19h
- Merged PRs (30d)
- 16
Description
Version
1.22.6
Link to Minimal Reproduction
https://codesandbox.io/p/sandbox/viscator-vtable-vue-export-to-excel-forked-qf9vp5
Steps to Reproduce
请看codesandbox代码或下文简略代码。
Current Behavior
exportToExcel 无法将包含自定义Vue组件的单元格导出为图片。
Expected Behavior
期望能将自定义组件导出为图片。
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
为了简便说明使用img代替自定义Vue组件,实际可能是个复杂的自定义Vue组件。
<template>
<div style="width: 100vw; height: 100vh">
<ListTable
ref="tableInstance"
height="50%"
:options="options"
:records="records"
>
<ListColumn
v-for="(column, i) in columns"
:key="column.field"
:field="column.field"
:title="column.title"
>
<template
#customLayout="{ table, row, col, rect, record, height, width }"
>
<Group
:width="width"
:height="height"
display="flex"
align-items="center"
:vue="{}"
>
<img
:width="width"
:height="height"
src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/location.svg"
/>
</Group>
</template>
</ListColumn>
</ListTable>
<button @click="handleExport">导出Excel</button>
</div>
</template>
<script>
const tableExportPlugin = new VTablePlugins.TableExportPlugin({
exportExcelOptions: {
downloadFile: true,
fileName: "测试",
},
});
const options = ref({
columns,
customConfig: {
createReactContainer: true,
},
plugins: [tableExportPlugin],
});
</script>
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the CodeSandbox minimal reproduction and the TableExportPlugin configuration using exportToExcel, then inspect how custom Vue components are represented in the table cell. Verify the behavior with the provided image example and confirm that exporting a cell containing a custom Vue component produces the component as an image.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100