Question

在我的页面中，我有一个下载按钮，可以在CSV文件中下载屏幕内容。

CSV文件由Javascript中的其他函数根据我的网格数据生成。

我用来生成数据的代码基于that post。

一切都很好，除了我不想在我的屏幕上有一个标签，而是一个风格的按钮。我也不能在那个地方有表格。只是一个简单的按钮。

所以，我必须动态创建它，然后将其删除。

这是我的代码：

<button type='button' onclick='buttonClicked(); return false;' class='btn btn-primary btn-xs'>Export</button>

现在我的职能：

var buttonClicked = function () {

    var content = getMyCsvData(); /// custom function to get CSV data

    if (window.navigator.msSaveOrOpenBlob) {
        alert('blob');
        var fileData = [content];
        blobObject = new Blob(fileData);
        window.navigator.msSaveOrOpenBlob(blobObject, "download_data");
    } else {
        var tempRef = $("<a download='' href='#'>download</a>");
        var url = "data:text/plain;charset=utf-8," + encodeURIComponent(content);
        $(tempRef).attr("href", url);
        this.element.append(tempRef);
        $(tempRef).click();
        this.element.remove(tempRef);
    }

这段代码听起来很奇怪，而且不适用于Chrome（使用href方法下载数据）。

所以，排队：

是否有更好的方法将事件附加到按钮而不创建？
如果没有，我如何创建我的锚点，触发我的临时锚点然后删除它而不影响我当前的屏幕？

感谢您的帮助。

Answer 1

您可以使用window.location导航到URL，包括数据：

window.location = 'data:....';

请参阅http://jsfiddle.net/KngFC/

上的示例

但是，当类型可以在浏览器中显示时，这不会触发下载，而是用下载替换您的应用程序，除非该类型无法在浏览器中显示。您可以触发一个新窗口/选项卡，这可能是您想要的：

window.open('data:....', '_blank');

这将导致新标签打开，下载将开始，一旦被接受或拒绝，如果数据无法在浏览器中显示，则标签将被关闭。

在http://jsfiddle.net/EHV6m/

查看工作示例（使用CSV）

新开发人员尝试的一种常见方法（不起作用）是尝试使用jQuery的.click（）触发对元素的点击。但是，在不带参数的情况下调用click（）将触发jQuery注册的Javascript事件时，它不会触发内置的浏览器操作。

以下是此方法的示例（这不起作用）：http://jsfiddle.net/t5uvP/1/

Javascript创建，触发锚标记并删除它的替代品

1 个答案: