使用滚动条打印 md-dialog 内容

Question

我有一个用 md-list 制作的长报告，显示在 md 对话框中，但是当我尝试打印它时，它只显示我在屏幕上看到的部分，而不是 md 的整个长度-列表。我在@media 上尝试过这个 css 技巧：

    @media print {
        .grid-comissoes {
            height: 100%;
            width: 100%;
            position: absolute;
            overflow: hidden;
            zoom: 0.8;

            .grid-wrapper {
                min-width: 0;
            }
        }
    }

这是我要打印的部分：

     <md-dialog-content class="md-dialog-content">
    <div layout="row" layout-align="start center" layout-padding class="sd-mixed-row grey">
        <span class="grey">Comissões a partir de</span>           
        <md-input-container flex="20" flex-xs="50" layout-no-padding>
            <label>Início</label>
            <input sd-datepicker="{changeMonth: false, changeYear: false}" ng-change="detalheCtrl.load()" aria-label="Início do período" ng-model="detalheCtrl.filter.startDh" ng-model-options="{debounce:300}">
        </md-input-container>
        <span class="grey">até</span>
        <md-input-container flex="20" flex-xs="50" layout-no-padding>
            <label>Fim</label>
            <input sd-datepicker="{changeMonth: false, changeYear: false}" ng-change="detalheCtrl.load()" aria-label="Fim do período" ng-model="detalheCtrl.filter.endDh" ng-model-options="{debounce:300}">
        </md-input-container>
    </div>
    <div layout="row" ng-if="detalheCtrl.loading" layout-align="center center">
        <md-progress-circular md-mode="indeterminate"></md-progress-circular>
    </div>
    <div layout="column" ng-if="!detalheCtrl.loading">
        <md-list layout-fill-width class="grey md-body-1 grid-comissoes" ng-repeat="regra in detalheCtrl.regrasComissoes">
            <md-list-item layout="row" class="regra-header">
                {{ detalheCtrl.getInfoRegra(regra) }}
            </md-list-item>
            <div class="grid-wrapper" ng-if="regra.tipoPagamento === 1">
                <md-list-item layout="row">
                    <span>Finalizado em</span>
                    <span flex="20">Paciente</span>
                    <span flex>Tratamento</span>
                    <span>Valor do tratamento</span>
                    <span>Comissão</span>
                </md-list-item>
                <md-divider></md-divider>
                <div ng-repeat="recebimentoTratamento in regra.recebimentosTratamentos">
                    <md-list-item layout="row">
                        <span>{{ recebimentoTratamento.tratamento.dataFinal | dateFormat }}</span>
                        <span flex="20">{{ recebimentoTratamento.tratamento.paciente.nome }}</span>
                        <span flex>{{ recebimentoTratamento.tratamento.procedimento.nome }} {{ recebimentoTratamento.tratamento.denteDTO.nome }}</span>
                        <span>
                            {{ recebimentoTratamento.tratamento.valor | currency }}
                        </span>
                        <span>{{ recebimentoTratamento.valorCalculadoComissao | currency }}</span>
                    </md-list-item>
                    <md-divider></md-divider>
                </div>
                <md-list-item layout="row" class="footer-grid">
                    <span></span>
                    <span flex="20"></span>
                    <span flex></span>
                    <span></span>
                    <span>Total</span>
                    <span>{{ regra.total | currency }}</span>
                </md-list-item>
            </div>
            <div class="grid-wrapper" ng-if="regra.tipoPagamento === 2">
                <md-list-item layout="row">
                    <span>Pago em</span>
                    <span flex="20">Paciente</span>
                    <span flex>Tratamento</span>
                    <span flex="20">Valor Pago</span>
                    <span>Parcela</span>
                    <span>Comissão</span>
                </md-list-item>
                <md-divider></md-divider>
                <div ng-repeat="recebimentoTratamento in regra.recebimentosTratamentos">
                    <md-list-item layout="row">
                        <span>{{ recebimentoTratamento.recebimento.dataPagamento | dateFormat }}</span>
                        <span flex="20">{{ recebimentoTratamento.tratamento.paciente.nome }}</span>
                        <span flex>{{ recebimentoTratamento.tratamento.procedimento.nome }} {{ recebimentoTratamento.tratamento.denteDTO.nome }}</span>
                        <div layout="row" flex="20">
                            <span ng-if="!detalheCtrl.showInfo(recebimentoTratamento)" flex>{{ recebimentoTratamento.valor | currency }}</span>
                            <span ng-if="detalheCtrl.showInfo(recebimentoTratamento)" flex>
                                {{ recebimentoTratamento.valor | currency }} de {{ recebimentoTratamento.recebimento.valor | currency }}
                                <md-icon style="fill: #2193D7 !important;" class="info-popover-comissao" md-svg-icon="info-full" ng-if="detalheCtrl.showInfo(recebimentoTratamento)">
                                    <sd-popover class="popover-comissoes" event="hover" align="bottom center">
                                        <div layout="column" class="md-body-1 grey">
                                            <span>O paciente pagou a parcela {{ recebimentoTratamento.recebimento.parcela }}/{{recebimentoTratamento.recebimento.numeroDeParcelas}} de {{ recebimentoTratamento.recebimento.valor | currency }} para a clínica.</span>
                                            <span layout-margin-top>A comissão da {{ detalheCtrl.profissional.nome }} será gerada apenas sobre o valor de {{ recebimentoTratamento.valor | currency }} correspondente ao tratamento {{ recebimentoTratamento.tratamento.procedimento.nome }}.</span>
                                            <span layout-margin-top>O restante do recebimento é referente a tratamentos realizados por outros profissionais.</span>
                                        </div>
                                    </sd-popover>
                                </md-icon>
                            </span>
                        </div>
                        <span>{{ recebimentoTratamento.recebimento.parcela }}/{{recebimentoTratamento.recebimento.numeroDeParcelas}}</span>
                        <span>{{ recebimentoTratamento.valorCalculadoComissao | currency }}</span>
                    </md-list-item>
                    <md-divider></md-divider>
                </div>
                <md-list-item layout="row" class="footer-grid">
                    <span></span>
                    <span flex="20"></span>
                    <span flex></span>
                    <span></span>
                    <span>Total</span>
                    <span>{{ regra.total | currency }}</span>
                </md-list-item>
            </div>
        </md-list>
        <div layout="column" layout-align="center end" layout-margin-top>
            <span layout-margin-top>Total a pagar {{ detalheCtrl.total | currency }}</span>
        </div>
    </div>
</md-dialog-content>

Answer 1

我认为它已经在 angular repo 中报告了

但是，您可以通过手动设置模态的下降高度来获得简单的解决方法：

    config: MdDialogConfig = {
    disableClose: true,
    width: '',
    height: '600px',
    position: {
      top: '',
      bottom: '',
      left: '',
      right: ''
    }
  };