制作自己的事件的问题

本文提出的许多解决方案都让JavaScript异步运行，并创建一个link元素，然后调用

const a = documet.createElement("a") 
a.click()

或者创建一个鼠标事件

new MouseEvent({/* ...some config */})

这看起来很好，对吧?这有什么错呢?

什么是事件源?

事件源在整个计算领域有很多含义，比如基于云架构的发布订阅系统，或者浏览器api EventSource。在浏览器的上下文中 所有事件都有一个源，该源有一个隐藏属性，说明是谁发起了这个事件(用户或站点)。

了解了这一点，我们就可以开始理解为什么两次点击事件不能被同等对待

user click*          new MouseEvent()
-----------            -----------
| Event 1 |            | Event 2 |
-----------            -----------
     |                      |     
     |----------------------|
                 |
                 |
      ----------------------
      | Permissions Policy |    Available in chrome allows the server to control
      ----------------------    what features are going to be used by the JS
                 |
                 |
   ----------------------------
   | Browser Fraud Protection | The Browser REALLY doesnt like being told to pretend
   ---------------------------- to be a user. If you will remember back to the early
                 |              2000s when one click spun off 2000 pop ups. Well here
                 |              is where popups are blocked, fraudulent ad clicks are
                \ /             thrown out, and most importantly for our case stops 
                 v              fishy downloads
      JavaScript Event Fires

所以我不能下载一个帖子，这是愚蠢的

不，你当然可以。您只需要给用户一个创建事件的机会。这里有一些模式，您可以使用它们来创建明显且常规的用户流，并且不会被标记为欺诈。(使用JSX抱歉，不抱歉)

表单可以使用post操作导航到url。

const example = () => (
  <form
   method="POST"
   action="/super-api/stuff"
   onSubmit={(e) => {/* mutably change e form data but don't e.preventDetfault() */}}
  >
    {/* relevant input fields of your download */}
  </form>
)

如果你的下载是不可配置的，你可能想要考虑将下载预加载到respb . Blob()或new Blob(resp)，这会告诉浏览器这是一个文件，我们不会对它做任何字符串操作。与其他答案一样，你可以使用window.URL.createObjectURL，这里没有提到的是

createObjectURL可以在javascript源代码中产生内存泄漏

如果你不想让c++恶霸来取笑你，你必须释放这个内存。但我只是个爱好，喜欢收垃圾的人。不用担心，这很简单，如果你在大多数框架中工作(对我来说)，你只需要在你的组件和你的权利上注册某种清理效果。

const preload = () => {
  const [payload, setPayload] = useState("")
  
  useEffect(() => {
    fetch("/super-api/stuff")
      .then((f) => f.blob())
      .then(window.URL.createObjectURL)
      .then(setPayload)

    return () => window.URL.revokeObjectURL(payload)
  }, [])


  return (<a href={payload} download disabled={payload === ""}>Download Me</a>)
}

解决方案

内容-性格依恋似乎对我很管用:

self.set_header("Content-Type", "application/json")
self.set_header("Content-Disposition", 'attachment; filename=learned_data.json')

解决方案

应用程序/八进制

我有类似的事情发生在我的JSON，对我来说，在服务器端，我设置头 自我。set_header(“内容类型”、“application / json”) 但是当我把它改成:

self.set_header("Content-Type", "application/octet-stream")

它会自动下载。

还要知道，为了让文件仍然保持.json后缀，你需要在文件名头文件:

self.set_header("Content-Disposition", 'filename=learned_data.json')

$scope.downloadSearchAsCSV = function(httpOptions) {
  var httpOptions = _.extend({
    method: 'POST',
    url:    '',
    data:   null
  }, httpOptions);
  $http(httpOptions).then(function(response) {
    if( response.status >= 400 ) {
      alert(response.status + " - Server Error \nUnable to download CSV from POST\n" + JSON.stringify(httpOptions.data));
    } else {
      $scope.downloadResponseAsCSVFile(response)
    }
  })
};
/**
 * @source: https://github.com/asafdav/ng-csv/blob/master/src/ng-csv/directives/ng-csv.js
 * @param response
 */
$scope.downloadResponseAsCSVFile = function(response) {
  var charset = "utf-8";
  var filename = "search_results.csv";
  var blob = new Blob([response.data], {
    type: "text/csv;charset="+ charset + ";"
  });

  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, filename); // @untested
  } else {
    var downloadContainer = angular.element('<div data-tap-disabled="true"><a></a></div>');
    var downloadLink      = angular.element(downloadContainer.children()[0]);
    downloadLink.attr('href', window.URL.createObjectURL(blob));
    downloadLink.attr('download', "search_results.csv");
    downloadLink.attr('target', '_blank');

    $document.find('body').append(downloadContainer);

    $timeout(function() {
      downloadLink[0].click();
      downloadLink.remove();
    }, null);
  }

  //// Gets blocked by Chrome popup-blocker
  //var csv_window = window.open("","","");
  //csv_window.document.write('<meta name="content-type" content="text/csv">');
  //csv_window.document.write('<meta name="content-disposition" content="attachment;  filename=data.csv">  ');
  //csv_window.document.write(response.data);
};

很久以前在某个地方找到它，它工作得很完美!

let payload = {
  key: "val",
  key2: "val2"
};

let url = "path/to/api.php";
let form = $('<form>', {'method': 'POST', 'action': url}).hide();
$.each(payload, (k, v) => form.append($('<input>', {'type': 'hidden', 'name': k, 'value': v})) );
$('body').append(form);
form.submit();
form.remove();

Another approach instead of saving the file on the server and retrieving it, is to use .NET 4.0+ ObjectCache with a short expiration until the second Action (at which time it can be definitively dumped). The reason that I want to use JQuery Ajax to do the call, is that it is asynchronous. Building my dynamic PDF file takes quite a bit of time, and I display a busy spinner dialog during that time (it also allows other work to be done). The approach of using the data returned in the "success:" to create a Blob does not work reliably. It depends on the content of the PDF file. It is easily corrupted by data in the response, if it is not completely textual which is all that Ajax can handle.

我喜欢弗兰克的想法，并决定做出自己的改变。因为尝试在一篇文章中做到这一点是非常复杂的，我使用了两篇文章的方法，但只击中数据库一次，不需要保存文件或完成后清理文件。

首先，我运行ajax请求来检索数据，但不是从控制器返回数据，而是返回一个绑定到记录的TempData存储的GUID。

$.get("RetrieveData", { name: "myParam"} , function(results){
    window.location = "downloadFile?id=" + results
});

public string RetrieveData(string name)
{
    var data = repository.GetData(name);
    string id = Guid.NewGuid().ToString();
    var file = new KeyValuePair<string, MyDataModel>(name, data);
    TempData[id]=file;
    return id;
}

然后当我呼叫窗口的时候。我将Guid传递给新方法，并从TempData获取数据。执行此方法后，TempData将是空闲的。

public ActionResult DownloadFile(string id)
{
   var file = (KeyValuePair<string,MyDataModel>)TempData[id];
   var filename = file.Key;
   var data = file.Value;
   var byteArray = Encoding.UTF8.GetBytes(data);
   ...
   return File(byteArray, "text/csv", "myFile.csv");
}