Nhấp chuột theo chương trình trên <a> -tag không hoạt động trong Firefox

Question

Tôi gặp sự cố với hàm số click() từ jquery. Tôi tạo một mã số <a> với document.createElement('a') và muốn gọi số click() -chức năng về yếu tố này. Về phần tử này, tôi muốn tạo một tệp Excel và lưu nó ở màn hình nền.

Mã của tôi:

$('body').on('click', '#test', function(event) { 
    var link = document.createElement('a'); 
    link.download = 'test.xls'; 
    link.href = 'data:application/vnd.ms-excel;utf-8,test'; 
    link.click(); 
}); 

Chức năng này làm việc dưới chrome, nhưng không dưới firefox.

Ví dụ làm việc: http://jsfiddle.net/0hnuw6b4/1/

Có ai biết tại sao không hoạt động?

Answer 1

Bạn có thể sử dụng jquery để tạo phần tử. Nó sẽ làm việc trên cả hai trình duyệt

$(document).on('click', '#test', function (event) { 
    var link = $("<a/>", { 
     "download": "test.xls", 
     "href": "data:application/vnd.ms-excel;utf-8,test" 
    }); 
    $("#test").append(link); 
    link.get(0).click(); 
}); 

Fiddle

Answer 2

Trong Firefox, bạn có thể thêm rõ ràng các yếu tố tạo ra để DOM và nó sẽ làm việc:

$('body').on('click', '#test', function(event) { 
    var link = document.createElement('a'); 
    // Add the element to the DOM 
    document.body.appendChild(link); 
    link.setAttribute("type", "hidden"); // make it hidden if needed 
    link.download = 'test.xls'; 
    link.href = 'data:application/vnd.ms-excel;utf-8,test'; 
    link.click(); 
}); 

Fiddle

Answer 3

Bạn không phải thêm phần tử vào DOM, ngay cả trong FireFox. Thay thế phương thức .click() bằng mã sau:

link.dispatchEvent(new MouseEvent(`click`, {bubbles: true, cancelable: true, view: window}));