VisActor / VisActor/VTable

[Bug] exportToExcel 无法将包含自定义Vue组件的单元格导出为图片

Open
#4,782 3 comments 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.