jQuery fileDownload插件不显示弹出窗口,如何解决?

时间:2019-05-02 07:27:07

标签: javascript jquery jquery-ui jquery-plugins

我正在将jQuery用于应用程序的前端部分(后端在Flask上运行),并且我需要一个插件来在用户等待向其提供文件时向用户显示某种信息(并且我还需要与旧版本的IE一起使用,这就是为什么我决定使用this plugin的原因。

不幸的是,由于我遇到一些奇怪的JS错误(屏幕和下面的示例代码),我无法对其进行任何操作。

示例服务器端代码:

from flask import Flask, send_file, render_template
import os
from time import sleep

app = Flask(__name__)

@app.route('/', methods=['GET'])
def mainRoute():
    return render_template('index.html')

@app.route('/filesfordl/file.txt', methods=['GET'])
def fileRoute():
    sleep(5) # time for window to appear
    fileResponse = send_file(os.path.join(os.getcwd(), 'filesfordl/file.txt'), as_attachment=True, attachment_filename='file.txt')
    fileResponse.set_cookie('fileDownload', 'true')
    return fileResponse

if __name__ == '__main__':
    app.run('0.0.0.0', '5000')

我的index.html:

<html>
    <head>
            <script type="text/javascript" src="{{ url_for('static', filename='js/jquery-3.3.1.min.js') }}"></script>
            <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.fileDownload.js') }}"></script>
            <script type="text/javascript" src="{{ url_for('static', filename='js/script.js') }}"></script>
    </head>


<body>
    <a href="/filesfordl/file.txt" class="fileDownloadSimpleRichExperience">Get file!</a>
</body>
</html>

最后是JS部分:

/*$.fileDownload('/filesfordl/file.txt', {
    successCallback: function (url) {

        alert('You just got a file download dialog or ribbon for this URL :' + url);
    },
    failCallback: function (html, url) {

        alert('Your file download just failed for this URL:' + url + '\r\n' +
                'Here was the resulting error HTML: \r\n' + html
                );
    }
});
*/

$(function() {
    $(document).on("click", "a.fileDownloadSimpleRichExperience", function() {
        $.fileDownload($(this).attr('href'), {
            preparingMessageHtml: "We are preparing your report, please wait...",
            failMessageHtml: "There was a problem generating your report, please try again."
        });
        return false; //this is critical to stop the click event which will trigger a normal file download!
    });
});

^^在这一部分中,如果我取消注释上面的代码,即使我没有单击链接,它也总是在输入index.html后触发failCallback。

单击超链接后,我收到此错误消息(尚无法直接发布图像): this 最终导致插件代码中的这一行。 this

编辑:

我在有问题的行的顶部添加了一些调试打印:

console.log($("<div>").html(settings.preparingMessageHtml).dialog);
console.log($("<div>").html(settings.preparingMessageHtml));

然后输出is。 关于我在做什么错的任何想法吗?

1 个答案:

答案 0 :(得分:0)

好的,没关系,我只是忘了包含jQuery UI文件,这是我遇到问题的唯一原因,可以关闭主题。