bootstrapTable 导出中文pdf文件问题

Question

表格导出为pdf文件，如果默认表格的单元格宽度会根据最长的单元格配置所有单元格宽度，这样就会导致表格超界问题表格右侧会有很多信息缺失。
能否手动设置导出表格的单元格宽度问题。

exportOptions : {
                        ignoreColumn: [11],
              pdfmake: {
                            enabled: true,
                                                    format:  'bestfit',
                            docDefinition: {
                                pageOrientation: 'landscape',
                                defaultStyle: {
                                  font: 'fangzhen',
                                  fontSize: 8,
                                }
                            },
                            fonts: {
                                Roboto: {
                                    normal: 'Roboto-Regular.ttf',
                                    bold: 'Roboto-Regular.ttf',
                                    italics: 'Roboto-Regular.ttf',
                                    bolditalics: 'Roboto-Regular.ttf'
                                  },
                                  fangzhen: {
                                    normal: 'fzhei-jt.TTF',
                                    bold: 'fzhei-jt.TTF',
                                    italics: 'fzhei-jt.TTF',
                                    bolditalics: 'fzhei-jt.TTF'
                                  }
                            }
                        },

                    },

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

要解决这个问题，您可以使用Bootstrap Table的bootstrap-table和bootstrap-table-export插件来实现。首先，请确保您已经安装了这两个插件，并且它们在您的项目中是可用的。

以下是一个示例代码：

import { BootstrapTable, Exporter } from "react-bootstrap-table2js";
import { ColumnDef } from "react-bootstrap-table2js";

const columns: ColumnDef[] = [
    {
        dataField: "name",
        text: "Name",
        width: "100px"
    },
    {
        dataField: "email",
        text: "Email",
        width: "300px"
    }
];

class MyTable extends React.Component<any> {
    exportOptions = {
        ignoreColumn: [1],
        pdfMake: {
            enabled: true,
            format: 'bestfit',
            docDefinition: {
                pageOrientation: 'landscape',
                defaultStyle: {
                  font: 'fangzhen',
                  fontSize: 8,
                }
            },
            fonts: {
                Roboto: {
                    normal: 'Roboto-Regular.ttf',
                    bold: 'Roboto-Regular.ttf',
                    italics: 'Roboto-Regular.ttf',
                    bolditalics: 'Roboto-Regular.ttf'
                },
                fangzhen: {
                    normal: 'fzhei-jt.TTF',
                    bold: 'fzhei-jt.TTF',
                    italics: 'fzhei-jt.TTF',
                    bolditalics: 'fzhei-jt.TTF'
                }
            }
        }
    };

    render() {
        return (
            <div>
                <BootstrapTable
                    keyField="id"
                    data={this.props.data}
                    columns={columns}
                    exportButton
                    {...this.exportOptions}
                />
            </div>
        );
    }
}

export default MyTable;

在这个例子中，我们创建了一个名为MyTable的组件，它包含一个BootstrapTable实例。我们设置了ignoreColumn属性来忽略某些列（在这里是第1个列），并设置了pdfMake选项以控制PDF输出的样式。

然后，在渲染函数中，我们返回一个包含BootstrapTable实例的div元素。

请注意，这个解决方案假设您已经在项目中启用了Bootstrap的CSS样式，并且您已正确地将react-bootstrap-table2js和react-bootstrap-table-export导入到你的组件中。此外，您可能还需要根据自己的需求调整其他选项。