在 JS 中单击锚点

Question

我正在尝试在 js 中创建一个锚点并单击它以触发文件的下载。这是我的代码：

      var anchor = $('.vcard-hyperlink');
      var windowUrl = window.URL || window.webkitURL;
      anchor.attr({
                    href: 'data:text/plain;base64,' + btoa(unescape(encodeURIComponent(request.response))),
                    download: 'test.xml',
                });
      anchor.get(0).click();

其中 request.response 只是来自服务器的文档。我遇到的问题是 anchor.get(0) 结果未定义。我怎样才能解决这个问题？提前致谢

更新：这是整个场景

var request = new XMLHttpRequest();
request.open('GET', url + formatParams(data));
request.setRequestHeader('Authorization', 'Bearer ' + appsecurity.getBearerTokenWithoutHeader().accessToken);

request.onreadystatechange = function () {
  if (request.readyState == XMLHttpRequest.DONE) {
      var str = request.response;
      var maxSizeForBase64 = 1048576; //1024 * 1024
      var anchor = $('.vcard-hyperlink');
      var windowUrl = window.URL || window.webkitURL;
      anchor.attr({
            href: 'data:text/plain;base64,' + btoa(unescape(encodeURIComponent(request.response))),
                    download: 'test.xml',
      });
      anchor.trigger('click');
    }
  }
}
request.send(data);

这是由客户端上的一个按钮调用的整个方法

Answer 1

假设

• 你正确加载了 jQuery 并且
• 有该类名的链接，
• 你点击的按钮没有提交页面
• 响应返回正确的字符串

您提供的代码应该可以工作

这行得通 - mime type text/xml

var anchor = $('.vcard-hyperlink');
anchor.attr({
  //  href: 'data:text/plain;base64,' + btoa(unescape(encodeURIComponent(request.response))),
  href: "data:text/xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCiAgIDx2Y2FyZHMgeG1sbnM9InVybjppZXRmOnBhcmFtczp4bWw6bnM6dmNhcmQtNC4wIj4NCiAgICAgPHZjYXJkPg0KICAgICAgIDxmbj48dGV4dD5TaW1vbiBQZXJyZWF1bHQ8L3RleHQ+PC9mbj4NCiAgICAgICA8bj4NCiAgICAgICAgIDxzdXJuYW1lPlBlcnJlYXVsdDwvc3VybmFtZT4NCiAgICAgICAgIDxnaXZlbj5TaW1vbjwvZ2l2ZW4+DQogICAgICAgICA8YWRkaXRpb25hbC8+DQogICAgICAgICA8cHJlZml4Lz4NCiAgICAgICAgIDxzdWZmaXg+aW5nLiBqcjwvc3VmZml4Pg0KICAgICAgICAgPHN1ZmZpeD5NLlNjLjwvc3VmZml4Pg0KICAgICAgIDwvbj4NCiAgICAgICA8YmRheT48ZGF0ZT4tLTAyMDM8L2RhdGU+PC9iZGF5Pg0KICAgICAgIDxhbm5pdmVyc2FyeT4NCiAgICAgICAgIDxkYXRlLXRpbWU+MjAwOTA4MDhUMTQzMC0wNTAwPC9kYXRlLXRpbWU+DQogICAgICAgPC9hbm5pdmVyc2FyeT4NCiAgICAgICA8Z2VuZGVyPjxzZXg+TTwvc2V4PjwvZ2VuZGVyPg0KICAgICAgIDxsYW5nPg0KICAgICAgICAgPHBhcmFtZXRlcnM+PHByZWY+PGludGVnZXI+MTwvaW50ZWdlcj48L3ByZWY+PC9wYXJhbWV0ZXJzPg0KICAgICAgICAgPGxhbmd1YWdlLXRhZz5mcjwvbGFuZ3VhZ2UtdGFnPg0KICAgICAgIDwvbGFuZz4NCiAgICAgICA8bGFuZz4NCiAgICAgICAgIDxwYXJhbWV0ZXJzPjxwcmVmPjxpbnRlZ2VyPjI8L2ludGVnZXI+PC9wcmVmPjwvcGFyYW1ldGVycz4NCiAgICAgICAgIDxsYW5ndWFnZS10YWc+ZW48L2xhbmd1YWdlLXRhZz4NCiAgICAgICA8L2xhbmc+DQogICAgICAgPG9yZz4NCiAgICAgICAgIDxwYXJhbWV0ZXJzPjx0eXBlPjx0ZXh0Pndvcms8L3RleHQ+PC90eXBlPjwvcGFyYW1ldGVycz4NCiAgICAgICAgIDx0ZXh0PlZpYWdlbmllPC90ZXh0Pg0KICAgICAgIDwvb3JnPg0KICAgICAgIDxhZHI+DQogICAgICAgICA8cGFyYW1ldGVycz4NCiAgICAgICAgICAgPHR5cGU+PHRleHQ+d29yazwvdGV4dD48L3R5cGU+DQogICAgICAgICAgIDxsYWJlbD48dGV4dD5TaW1vbiBQZXJyZWF1bHQNCiAgIDI4NzUgYm91bC4gTGF1cmllciwgc3VpdGUgRDItNjMwDQogICBRdWViZWMsIFFDLCBDYW5hZGENCiAgIEcxViAyTTI8L3RleHQ+PC9sYWJlbD4NCiAgICAgICAgIDwvcGFyYW1ldGVycz4NCiAgICAgICAgIDxwb2JveC8+DQogICAgICAgICA8ZXh0Lz4NCiAgICAgICAgIDxzdHJlZXQ+Mjg3NSBib3VsLiBMYXVyaWVyLCBzdWl0ZSBEMi02MzA8L3N0cmVldD4NCiAgICAgICAgIDxsb2NhbGl0eT5RdWViZWM8L2xvY2FsaXR5Pg0KICAgICAgICAgPHJlZ2lvbj5RQzwvcmVnaW9uPg0KICAgICAgICAgPGNvZGU+RzFWIDJNMjwvY29kZT4NCiAgICAgICAgIDxjb3VudHJ5PkNhbmFkYTwvY291bnRyeT4NCiAgICAgICA8L2Fkcj4NCiAgICAgICA8dGVsPg==",
  download: 'test.xml'
});
anchor.get(0).click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a href="#" class="vcard-hyperlink">Click</a>

这也是 - mime type text/x-vcard

var anchor = $('.vcard-hyperlink');
anchor.attr({
  //  href: 'data:text/plain;base64,' + btoa(unescape(encodeURIComponent(request.response))),
  href: "data:text/x-vcard;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCiAgIDx2Y2FyZHMgeG1sbnM9InVybjppZXRmOnBhcmFtczp4bWw6bnM6dmNhcmQtNC4wIj4NCiAgICAgPHZjYXJkPg0KICAgICAgIDxmbj48dGV4dD5TaW1vbiBQZXJyZWF1bHQ8L3RleHQ+PC9mbj4NCiAgICAgICA8bj4NCiAgICAgICAgIDxzdXJuYW1lPlBlcnJlYXVsdDwvc3VybmFtZT4NCiAgICAgICAgIDxnaXZlbj5TaW1vbjwvZ2l2ZW4+DQogICAgICAgICA8YWRkaXRpb25hbC8+DQogICAgICAgICA8cHJlZml4Lz4NCiAgICAgICAgIDxzdWZmaXg+aW5nLiBqcjwvc3VmZml4Pg0KICAgICAgICAgPHN1ZmZpeD5NLlNjLjwvc3VmZml4Pg0KICAgICAgIDwvbj4NCiAgICAgICA8YmRheT48ZGF0ZT4tLTAyMDM8L2RhdGU+PC9iZGF5Pg0KICAgICAgIDxhbm5pdmVyc2FyeT4NCiAgICAgICAgIDxkYXRlLXRpbWU+MjAwOTA4MDhUMTQzMC0wNTAwPC9kYXRlLXRpbWU+DQogICAgICAgPC9hbm5pdmVyc2FyeT4NCiAgICAgICA8Z2VuZGVyPjxzZXg+TTwvc2V4PjwvZ2VuZGVyPg0KICAgICAgIDxsYW5nPg0KICAgICAgICAgPHBhcmFtZXRlcnM+PHByZWY+PGludGVnZXI+MTwvaW50ZWdlcj48L3ByZWY+PC9wYXJhbWV0ZXJzPg0KICAgICAgICAgPGxhbmd1YWdlLXRhZz5mcjwvbGFuZ3VhZ2UtdGFnPg0KICAgICAgIDwvbGFuZz4NCiAgICAgICA8bGFuZz4NCiAgICAgICAgIDxwYXJhbWV0ZXJzPjxwcmVmPjxpbnRlZ2VyPjI8L2ludGVnZXI+PC9wcmVmPjwvcGFyYW1ldGVycz4NCiAgICAgICAgIDxsYW5ndWFnZS10YWc+ZW48L2xhbmd1YWdlLXRhZz4NCiAgICAgICA8L2xhbmc+DQogICAgICAgPG9yZz4NCiAgICAgICAgIDxwYXJhbWV0ZXJzPjx0eXBlPjx0ZXh0Pndvcms8L3RleHQ+PC90eXBlPjwvcGFyYW1ldGVycz4NCiAgICAgICAgIDx0ZXh0PlZpYWdlbmllPC90ZXh0Pg0KICAgICAgIDwvb3JnPg0KICAgICAgIDxhZHI+DQogICAgICAgICA8cGFyYW1ldGVycz4NCiAgICAgICAgICAgPHR5cGU+PHRleHQ+d29yazwvdGV4dD48L3R5cGU+DQogICAgICAgICAgIDxsYWJlbD48dGV4dD5TaW1vbiBQZXJyZWF1bHQNCiAgIDI4NzUgYm91bC4gTGF1cmllciwgc3VpdGUgRDItNjMwDQogICBRdWViZWMsIFFDLCBDYW5hZGENCiAgIEcxViAyTTI8L3RleHQ+PC9sYWJlbD4NCiAgICAgICAgIDwvcGFyYW1ldGVycz4NCiAgICAgICAgIDxwb2JveC8+DQogICAgICAgICA8ZXh0Lz4NCiAgICAgICAgIDxzdHJlZXQ+Mjg3NSBib3VsLiBMYXVyaWVyLCBzdWl0ZSBEMi02MzA8L3N0cmVldD4NCiAgICAgICAgIDxsb2NhbGl0eT5RdWViZWM8L2xvY2FsaXR5Pg0KICAgICAgICAgPHJlZ2lvbj5RQzwvcmVnaW9uPg0KICAgICAgICAgPGNvZGU+RzFWIDJNMjwvY29kZT4NCiAgICAgICAgIDxjb3VudHJ5PkNhbmFkYTwvY291bnRyeT4NCiAgICAgICA8L2Fkcj4NCiAgICAgICA8dGVsPg==",
  download: 'test.xml'
});
anchor.get(0).click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a href="#" class="vcard-hyperlink">Click</a>