Question

情况：我需要使用html2canvas捕获屏幕截图，获取结果dataURL，将其发送到支持bean，生成带有图片的JasperReport，然后打开下载对话框，用户可以下载带有屏幕图片的PDF。

我尝试过的解决方案（100％无效）：

这是执行所有操作的命令链接：

<p:commandLink ajax="true" value="Print PDF" onclick="printPDF();" oncomplete="clickPrintButton();" />

我的javascript文件中的printPDF（）函数：

function printPDF() {

    html2canvas($('#mainForm'), {
        onrendered : function(canvas) {
            var dataURL = canvas.toDataURL("image/png");
            var hiddenField = document.getElementById('mainForm:dataURLfield');
            hiddenField.setAttribute('value', dataURL);
            hiddenField.onchange(); 
        }
    });
}

如您所见，我将dataURL值发送到隐藏字段并调用onchange（）事件。这是我隐藏的领域：

<h:inputText id="dataURLfield" style="display:none">
    <f:ajax event="change" listener="#{myController.printPDFListener}" />
</h:inputText>

在更改事件的侦听器中，我在myController中使用dataURL的值设置了一个属性。在ajax完成之后，图像应该正确保存在我的支持bean中，我应该能够生成报告并开始下载文件。

在'oncomplete'事件上调用的函数：

function clickPrintButton(){
    var hiddenButton = document.getElementById('mainForm:printPDFButton');
    hiddenButton.click();
}

应该启动文件下载的隐藏按钮：

<h:commandButton ajax="false" id="printPDFButton" style="display:none">
    <p:fileDownload value="#{myController.downloadPDF}" />
</h:commandButton>

问题是，有时候它有效，有时它没有，有时我在页面中出错，有时我得到一个空白的PDF。你们有什么感想？有什么想法吗？

Answer 1

我认为问题是html2canvas是异步操作。因此，printPDF()方法可以在完成生成之前立即返回。然后oncomplete="clickPrintButton();事件过早提升。

要检查一下，您可以添加一些“console.writeline()”，例如在“printPDF()”方法的末尾和“onrendered”回调中，以查看是否第一个是在第二个之前提出的。

我认为要解决您的问题，您可能需要移动clickPrintButton()来电，只有在您确定已html2canvas完成时才启动它。

仅在ajax完成后下载文件

1 个答案: