使用 JavaScript 的 HTTP POST 的可下载数据链接答案

【问题标题】：Downloadable data link for HTTP POST using JavaScript使用 JavaScript 的 HTTP POST 的可下载数据链接
【发布时间】：2017-01-19 10:17:17
【问题描述】：

我有一个 HTTP POST REST 端点，它使用图像并返回包含图像像素数据的 HTML 文档。 HTTP 响应包含标头 Content-Disposition: attachment; filename=Pixels.html 以便浏览器提示下载。

我想要一个 HTML/JavaScript（不是 jQuery）应用程序

允许我浏览和选择图像（例如，<input id="fid" name="fid" type="file" />
单击链接后，将图像数据发布到端点，然后让我将 HTML 内容下载到磁盘（例如，<p onclick="javascript: getPixels()">Get Pixels</p>）。

我该怎么做呢？我尝试了以下代码：

  function getPixels() {
     var input = document.getElementById("fid");
     if (input.files && input.files[0]) {
        if (typeof (FileReader) != "undefined") {
           var reader = new FileReader();
           reader.onload = function (e) {
              var imgData = e.target.result;
              var postUrl = "./GetPixelsService.svc/image";
              var xhr = new XMLHttpRequest();
              xhr.open("POST", postUrl);
              xhr.setRequestHeader("Content-Type", "image/png");
              //xhr.onreadystatechange = function () {
              //   if (xhr.readyState === 4) {
              //      var res_display = document.getElementById("results");
              //      res_display.srcdoc = xhr.responseText;
              //   }
              //}
              xhr.send(imgData);
           };
           reader.readAsArrayBuffer(input.files[0]);
        }
     }
  }

以下是调用上述函数的 HTML 简介。

  <p>
     Upload the image here:
  </p>
  <input id="fid" name="fid" type="file" />
  <!--<button type="submit" onclick="javascript: getPixels()">Get Pixels</button>-->
  <p onclick="javascript: getPixels()">Get Pixels</p>
  <p />
  <hr />
  <p>
     <img id="img2check" src="" alt="" />
  </p>
  <p />
  <iframe id="results" style="width: 100%; border: 0; height: 400px;" src="javascript:;">
     Your browser does not support iframes.
  </iframe>

我能够选择响应并将其显示在 iframe 中，但无法让浏览器下载内容。

感谢您的帮助。我已经查看了 StackOverflow 上的相关问题，但到目前为止没有任何帮助。

提前致谢。

【问题讨论】：

标签： javascript html http-post content-disposition

【解决方案1】：

您不能强制客户端浏览器使用 XMLHttpRequest 提示保存对话框。

你可以做的如下：

1：检查我对另一个类似问题的回答：How to get pdf file via javascript ajax

2: 在服务器上生成文件或创建get 类型的请求处理程序并使用download 属性提供指向它的链接。 http://www.w3schools.com/TAgs/att_a_download.asp

3：使用第三方应用，例如 Downloadify：https://github.com/dcneiner/Downloadify

4：还有另一种使用Blob的方法，我还没有尝试过，在这里：Browser/HTML Force download of image from src="data:image/jpeg;base64..."。这篇文章是关于 base64 图像的，但我认为值得尝试使用 html 文件。

【讨论】：

谢谢。我尝试通过 Blob 创建 URL，但这不起作用：URL 的内容被转储到页面中。我再看看。
服务器端是 REST，所以它所期望的只是图像二进制文件。这就是为什么我没有通过表单方法（它将对图像二进制进行编码）。有没有办法通过表单只发送图像二进制文件？
谢谢。 (2) 和 (4) 的组合具有魔力。为了他人的利益，我将发布整个解决方案作为答案。再次感谢...

【解决方案2】：

感谢er-han，下面的代码实现了目标。

  <!DOCTYPE html>
  <html>
  <head>
     <meta charset="utf-8" />
     <title></title>
  </head>
  <body>
     <script type="text/javascript">
        function getPixels() {
           showImage();
           var input = document.getElementById("fid");
           if (input.files && input.files[0]) {
              if (typeof (FileReader) != "undefined") {
                 var reader = new FileReader();
                 reader.onload = function (e) {
                    var imgData = e.target.result;
                    var postUrl = "./SimpleService.svc/image";
                    var xhr = new XMLHttpRequest();
                    xhr.open("POST", postUrl);
                    xhr.setRequestHeader("Content-Type", "image/png");
                    xhr.onreadystatechange = function () {
                       if (xhr.readyState === 4) {
                          var res_url = URL.createObjectURL(new Blob([xhr.responseText]));
                          var lnk = document.getElementById("dlink");
                          lnk.href = res_url;
                          lnk.style.display = "block";
                       }
                    }
                    xhr.send(imgData);
                 };
                 reader.readAsArrayBuffer(input.files[0]);
              }
           }
        }

        function showImage() {
           var input = document.getElementById("fid");
           if (input.files && input.files[0]) {
              if (typeof (FileReader) != "undefined") {
                 var reader = new FileReader();
                 reader.onload = function (e) {
                    var img_display = document.getElementById("img2check");
                    img_display.src = e.target.result;
                 };
                 reader.readAsDataURL(input.files[0]);
              }
           }
        }
     </script>

     <p>
        Upload the image here:
     </p>
     <input id="fid" name="fid" type="file" />
     <p/>
     <button type="submit" onclick="javascript: getPixels()">Upload</button>
     <p />
     <hr />
     <p>
        <img id="img2check" src="" alt="" />
     </p>
     <p />
     <p>
        <a id="dlink" href="#" download="Data.html" style="display: none;">Download data</a>
     </p>
  </body>
  </html>

【讨论】：

抱歉，我没有时间研究它，但我很高兴你做到了。我相信我将来会需要这个正确的答案:)
感谢您的帮助。没有它就无法做到。再次感谢！ :-)