Question

在我的应用程序（Yii）中，我有一个Ajax Submit Button，它触发生成Excel文件（使用PHPExcel）。成功后，我使用隐藏的表单提交文件以下载：

<div class="reporting">
    <?php
        $this->beginWidget('zii.widgets.jui.CJuiDialog',array(
            'id'=>'mydialog',
            'options'=>array(
                'title'=>'Warning!',
                'autoOpen'=>false, //true,
                'modal'=>'true',
                'width'=>'auto',
                'height'=>'auto',
                'open' => 'js:function(event, ui) {
                }',
                'close' => 'js:function(event, ui) {
                    $(".ui-dialog:has(#mydialog)").empty().remove();
                }',
            )
        )); 
    ?>
    <table class="contentheader">
        <tr>
            <td>
                <?php echo CHtml::DropDownList('dropDownId', $lastyear, $yearslist, array('options'=>array($lastyear=>array('selected'=>true)) )); ?>
            </td>
        </tr>
    </table>
    <br />
    <?php echo CHtml::ajaxSubmitButton('Form Ajax Submit Button',
        CHtml::normalizeUrl(array('/planning/xlsAbsences')), 
            array(
                'type'=>'POST',
                'beforeSend' => "function(request) { console.log('beforeSend'); }",
                'data'=>'js:$("#select-year-form").serialize()+"&year="+$("#dropDownId :selected").text()',
                'success' => function(response, status, request){
                    $("#mydialog").dialog("close"); 
                    var disp = request.getResponseHeader("Content-Disposition");
                    if (disp && disp.search("attachment") != -1) {
                        var filename = disp.substring(disp.indexOf("filename=") + 10, disp.length-1);
                        var form = $("<form method=\"POST\" action=\"index.php?r=planning/dl\">");
                        form.append($("<input type=\"hidden\" name=\"content\" value=\"" + request.responseText + "\">"));
                        form.append($("<input type=\"hidden\" name=\"filename\" value=\"" + filename + "\">"));
                        $("body").append(form);
                        form.submit();
                    }
                }
                'complete' => "function(request) { console.log(request); }",
                'error' => "function(data) { alert('erro'+data); }",
            ),
            array('name' => 'run', 'class' => 'btn btn-success')
    ); ?>
    <?php $this->endWidget('zii.widgets.jui.CJuiDialog');
        echo CHtml::link(Yii::t('app','app.menu.reporting.planning.xlsabsence'), '#', array( 
            'onclick'=>'$("#mydialog").dialog("open"); return false;',
        ));
    ?>
</div>

问题是生成的文件不是有效的Excel文件。我想Excelfile的内容在request.responseText中。我已经看到，Excel无法打开的生成文件以UTF（无BOM）编码。如果我生成没有Ajax Submit Button的文件，那么文件就可以了。但它似乎是用ANSI编码的。我使用Notpad ++来查看编码信息。当我将UTF（无BOM）转换为ANSI时，结果并不是更好。

我在这里缺少什么？

编辑：我不知道我的描述是否不够清晰 - Excel文件不存在。在CJuiDialog中提交Ajax Submit Button时会生成Excel文件内容 - 例如，用户打开对话框并选择参数 - 这将根据用户选择的参数生成Excel文件。由于该文件不存在，我无法看到如何下载它。我找到的唯一解决方案是隐藏的形式。

EDIT2：我发布了整个视图代码（上图）

Answer 1

在这里，这是你想要实现的目标：http://jqueryfiledownload.apphb.com/

点击此处了解详情：Download a file by jQuery.Ajax

Answer 2

使用ajax调用无需执行此操作。

如果您向返回带有Content-Disposition标题集的内容的网址提交数据，则浏览器不会打开该网页，但会提示下载。

让我们说这就是你现在所拥有的：

$.ajax({
    type: 'POST',
    url: '/excel/generate.php',
    'success' => function(response, status, request){
        $("#mydialog").dialog("close"); 
        var disp = request.getResponseHeader("Content-Disposition");
        if (disp && disp.search("attachment") != -1) {
            var filename = disp.substring(disp.indexOf("filename=") + 10, disp.length-1);
            var form = $("<form method=\"POST\" action=\"index.php?r=planning/dl\">");
            form.append($("<input type=\"hidden\" name=\"content\" value=\"" + request.responseText + "\">"));
            form.append($("<input type=\"hidden\" name=\"filename\" value=\"" + filename + "\">"));
            $("body").append(form);
            form.submit();
        }
    }
});

您可以将其替换为

var form = $('<form/>', {method: 'POST', action: '/excel/generate.php'});
form.appendTo('body');
form.submit();

从request.responseText下载Excel文件

2 个答案: